Upgrade to Pro — share decks privately, control downloads, hide ads and more …

どこでも React する

どこでも React する

@dots

Koutarou Chikuba

September 08, 2015
Tweet

More Decks by Koutarou Chikuba

Other Decks in Technology

Transcript

  1. About ☞ @mizchi / Koutarou Chikuba ☞ Frontend SPA Specialist

    ☞ Game Engineer → Web Programmer ☞ node.js / frontend / ruby ☞ My English is very poor, sorry.
  2. Products ☞ Kobito for Windows | Markdown Editor built on

    Electron ☞ mizchi/arda | flux framework ☞ mizchi/md2react | markdown text to ReactElement ☞ mizchi/TypedCoffeeScript (suspended) ☞ etc...
  3. Universal JavaScript ☞ Pure JavaScript World ☞ Runnable in node,

    browser and so on... becuase it's pure. ☞ JSON serializable to communicate with others ref. ☞ Universal JavaScript — Medium ☞ Unimorphic Isoversal JavaScript What? | getiblog
  4. Compilable => Runnable in everywhere ☞ ES Modules (TypeScript /

    Babel) ☞ Browserify to resolve dependencies and concat ☞ Avoid native modules ☞ Emscripten? fmm... ☞ Wait for WebAssembly ☞ Avoid DOM ☞ HTML is a GUI toolkit library only for browser
  5. React is universal? ☞ ReactComponent's srops/state can be universal. ☞

    Virtual DOM is universal yet. ☞ Rendering to document is NOT React.render( <App/>, // <= Universal document.querySelector('.content') // <= Not Universal HTMLElement );
  6. Custom Renderer on React v0.14.x var React = require('react'); var

    ReactDOM = require('react-dom'); var MyComponent = React.createClass({ render: function() { return <div>Hello World</div>; } }); ReactDOM.render(<MyComponent />, node);
  7. Main Role of React Virtual Tree → Distribute Diff and

    Patch ☞ Just the Tree. Node and Leaf. ☞ React detects previous/next tree diffirenece and patches
  8. My frontend experience says... ☞ Backbone does NOT have bone.

    ☞ with stickit is hasty preparation. ☞ Chaplin 's reuse/dispose rule are not intuitive. ☞ Vue is simple and great. but children management is hard. ☞ Angular is massive and not clean API and has performance issues.
  9. My last one year with React Pros. ☞ Handling state

    transaction becomes easy. ☞ Easy to separate UI and Domain Layers. Cons. ☞ Need mirco management for platfrom optimization. ☞ Hacky componentWillUpdate and componentShouldUpdate
  10. ... But We have Another Choices Now ☞ React is

    big to adopt cheerfully ☞ VirtualDOM Implementation Size (with uglify-js) ☞ react(119kb) ☞ dekujs/deku(33kb) ☞ Matt-Esch/virtual-dom(30kb) ☞ lhorie/mithril.js(90kb) ☞ ref. jQuery(129kb) / Probably you need yet
  11. (Eric Evans's) DDD Layers ☞ UI Layer ← ☞ Application

    Layer ☞ Domain Layer ☞ Infrastructure Layers
  12. Frontend Layers ☞ UI Layer: React ☞ Application Layer: Flux

    ☞ Domain Layer: Your own Domain ☞ Infrastructure Layer ☞ REST Abstraction ☞ BrowserStorages(localStorage, IndexedDb, File API...)
  13. Flux: backend agnostic (Something Action) => Store => (RootComponent State)

    ☞ Control Flow ☞ Store does not have to know where actions happen. ☞ Store does not have to know what is renderer result. Redux calls it reducer
  14. Flux Essence ➀ update(previousState: State, action) => State ➁ stateToView(state:

    State) => View ➂ View dispatches events! ➃ Listen events and dispatch to store.
  15. Itroduction to Arda ☞ mizchi/arda ☞ One of flux implementation

    by @mizchi ☞ Extracted from Kobito for Windows and refactored.
  16. Arda: Features ☞ State management and transition by stack. ☞

    EventEmitter Pub/Sub ☞ All control steps can handle Promise.
  17. Arda : Features : Just the EventEmitter // ReactComponent mixins:

    [Arda.mixin], onClick() { this.dispatch('foo'); } // Context Subscriber subscribe('foo', () => {context.update(state => state)}); Context => RootComponent => Dispatcher => Context ...
  18. Arda: Features: Stacked Contexts router.pushContext(MainContext, {}) # Main .then(()=> router.pushContext(SubContext,

    {})) # Main, Sub .then(() => router.pushContext(MainContext, {})) # Main, Sub, Main .then(() => router.popContext()) # Main, Sub .then(() => router.replaceContext(MainContext, {})) # Main, Main
  19. Features of Arda: LifeCycle subscriber = (context, subscribe) => {

    subscribe('context:created', () => console.log('created')); subscribe('context:started', () => console.log('started')); subscribe('context:paused', () => console.log('paused')); subscribe('context:resumed', () => console.log('resumed')); subscribe('context:disposed', () => console.log('disposed')); } Referred Android Activity LifeCycle.
  20. DDD on Arda ➀ EventEmitter subscribe → update flow //

    Action to Domain ➁ Context.expandComponentProps() // Domain to View
  21. Why I made Arda ☞ react-router has a strong habit.

    ☞ Need TypeScript friendly framework to scale. ☞ Need to separate domains from application layers Real World Virtual DOM // Speaker Deck
  22. What you should think in development ☞ Domain can be

    universal ☞ Avoid Smart UI ☞ Doubt code you write belongs domain layer
  23. Reward of DDD on Flux ☞ Removable infrustructure ☞ Runnable

    in everywhere ☞ Browser ☞ Electron ☞ Terminal
  24. Practice - env/ - browser/ - components/ - main.js -

    api/ - commands/ - queries/ - application/ - router.js
  25. react-rails ☞ reactjs/react-rails ☞ Render HTML string with V8 by

    ReactComponent <%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %> <!-- becomes: --> <div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"> <h1>Hello, John!</h1> </div>
  26. Take Over ☞ Can avoid refreshing in cline if you

    provide same component and same props ☞ react-railsͰαʔόʔαΠυϨϯμϦϯάͭͭ͠ΫϥΠΞϯτͰ setStateͰ͖ͯ࠷ߴʹͳͬͨ - Qiita
  27. ReactPhoenix ☞ increments/react_phoenix ☞ for Elixir ☞ WIP ☞ same

    api with react_rails <%= react_component("HelloMessage", %{a: 1}, prerender: true) %> # => <div data-react-class="HelloMessage" data-react-props='{\"a\":1}'></div>
  28. Why SSR? ☞ Embbed partially in application ☞ Improve initial

    view UX ☞ Share templates with client and server ☞ SEO
  29. Conclusion ☞ Universal JavaScript runs in everywhere ☞ Universal React

    Virtual Tree can exists everywhere ☞ Flux leads you Universal and first steps to DDD. ☞ Runnable in Server too