どこでも React する

どこでも React する

@dots

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

September 08, 2015
Tweet

Transcript

  1. React Everywhere How to create huge and flexible application mizchi

    / Increments, Inc React Meetup #2 @dots
  2. About ☞ @mizchi / Koutarou Chikuba ☞ Frontend SPA Specialist

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

    Electron ☞ mizchi/arda | flux framework ☞ mizchi/md2react | markdown text to ReactElement ☞ mizchi/TypedCoffeeScript (suspended) ☞ etc...
  5. Today's themes ➀ React and Universal ➁ Flux and DDD

    ➂ Server Side Rendering
  6. React and Universal

  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
  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
  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 );
  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);
  11. Selectable Backends ☞ react-dom ☞ react-native ☞ react-canvas ☞ react-pixi

    ☞ react-three ☞ react-blessed ☞ etc...
  12. react-native First Impressions using React Native

  13. react-blessed Yomguithereal/react-blessed

  14. react-pixi Izzimach/react-pixi

  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
  16. React is good enough?

  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.
  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
  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
  20. Next...

  21. Flux and DDD

  22. What is React? ☞ Just the UI

  23. None
  24. What is UI? ➀ Presentation Layer ➁ User Interuction Handler

  25. Let's think layers.

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

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

    ☞ Domain Layer: Your own Domain ☞ Infrastructure Layer ☞ REST Abstraction ☞ BrowserStorages(localStorage, IndexedDb, File API...)
  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
  29. Flux Essence ➀ update(previousState: State, action) => State

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

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

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

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

    EventEmitter Pub/Sub ☞ All control steps can handle Promise.
  34. Arda: Overviews

  35. Arda: Overviews

  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 ...
  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
  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.
  39. DDD on Arda ➀ EventEmitter subscribe → update flow //

    Action to Domain ➁ Context.expandComponentProps() // Domain to View
  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
  41. What you should think in development ☞ Domain can be

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

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

    api/ - commands/ - queries/ - application/ - router.js
  44. Server Side Rendering and Take Over

  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>
  46. Take Over ☞ Can avoid refreshing in cline if you

    provide same component and same props ☞ react-railsͰαʔόʔαΠυϨϯμϦϯάͭͭ͠ΫϥΠΞϯτͰ setStateͰ͖ͯ࠷ߴʹͳͬͨ - Qiita
  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>
  48. Why SSR? ☞ Embbed partially in application ☞ Improve initial

    view UX ☞ Share templates with client and server ☞ SEO
  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
  50. Thank you for listening We are hiring. ΤϯδχΞ࠾༻৘ใ - Incrementsגࣜձࣾ