どこでも React する

どこでも React する

@dots

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

September 08, 2015
Tweet

Transcript

  1. 2.

    About ☞ @mizchi / Koutarou Chikuba ☞ Frontend SPA Specialist

    ☞ Game Engineer → Web Programmer ☞ node.js / frontend / ruby ☞ My English is very poor, sorry.
  2. 3.
  3. 4.

    Products ☞ Kobito for Windows | Markdown Editor built on

    Electron ☞ mizchi/arda | flux framework ☞ mizchi/md2react | markdown text to ReactElement ☞ mizchi/TypedCoffeeScript (suspended) ☞ etc...
  4. 7.

    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
  5. 8.

    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
  6. 9.

    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 );
  7. 10.

    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);
  8. 15.

    Main Role of React Virtual Tree → Distribute Diff and

    Patch ☞ Just the Tree. Node and Leaf. ☞ React detects previous/next tree diffirenece and patches
  9. 17.

    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.
  10. 18.

    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
  11. 19.

    ... 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
  12. 20.
  13. 23.
  14. 26.

    (Eric Evans's) DDD Layers ☞ UI Layer ← ☞ Application

    Layer ☞ Domain Layer ☞ Infrastructure Layers
  15. 27.

    Frontend Layers ☞ UI Layer: React ☞ Application Layer: Flux

    ☞ Domain Layer: Your own Domain ☞ Infrastructure Layer ☞ REST Abstraction ☞ BrowserStorages(localStorage, IndexedDb, File API...)
  16. 28.

    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
  17. 31.

    Flux Essence ➀ update(previousState: State, action) => State ➁ stateToView(state:

    State) => View ➂ View dispatches events! ➃ Listen events and dispatch to store.
  18. 32.

    Itroduction to Arda ☞ mizchi/arda ☞ One of flux implementation

    by @mizchi ☞ Extracted from Kobito for Windows and refactored.
  19. 33.

    Arda: Features ☞ State management and transition by stack. ☞

    EventEmitter Pub/Sub ☞ All control steps can handle Promise.
  20. 36.

    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 ...
  21. 37.

    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
  22. 38.

    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.
  23. 39.

    DDD on Arda ➀ EventEmitter subscribe → update flow //

    Action to Domain ➁ Context.expandComponentProps() // Domain to View
  24. 40.

    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
  25. 41.

    What you should think in development ☞ Domain can be

    universal ☞ Avoid Smart UI ☞ Doubt code you write belongs domain layer
  26. 42.

    Reward of DDD on Flux ☞ Removable infrustructure ☞ Runnable

    in everywhere ☞ Browser ☞ Electron ☞ Terminal
  27. 43.

    Practice - env/ - browser/ - components/ - main.js -

    api/ - commands/ - queries/ - application/ - router.js
  28. 45.

    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>
  29. 46.

    Take Over ☞ Can avoid refreshing in cline if you

    provide same component and same props ☞ react-railsͰαʔόʔαΠυϨϯμϦϯάͭͭ͠ΫϥΠΞϯτͰ setStateͰ͖ͯ࠷ߴʹͳͬͨ - Qiita
  30. 47.

    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>
  31. 48.

    Why SSR? ☞ Embbed partially in application ☞ Improve initial

    view UX ☞ Share templates with client and server ☞ SEO
  32. 49.

    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