どこでも React する

@dots

Transcript

1. React Everywhere
   How to create huge and flexible application
   mizchi / Increments, Inc
   React Meetup #2 @dots
   

   View Slide

2. About
   ☞ @mizchi / Koutarou Chikuba
   ☞ Frontend SPA Specialist
   ☞ Game Engineer → Web Programmer
   ☞ node.js / frontend / ruby
   ☞ My English is very poor, sorry.
   

   View Slide

3. View Slide

4. Products
   ☞ Kobito for Windows | Markdown Editor built on Electron
   ☞ mizchi/arda | flux framework
   ☞ mizchi/md2react | markdown text to ReactElement
   ☞ mizchi/TypedCoffeeScript (suspended)
   ☞ etc...
   

   View Slide

5. Today's themes
   ➀ React and Universal
   ➁ Flux and DDD
   ➂ Server Side Rendering
   

   View Slide

6. React and Universal
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. React is universal?
   ☞ ReactComponent's srops/state can be universal.
   ☞ Virtual DOM is universal yet.
   ☞ Rendering to document is NOT
   React.render(
   , // <= Universal
   document.querySelector('.content') // <= Not Universal HTMLElement
   );
   

   View Slide

10. Custom Renderer on React v0.14.x
    var React = require('react');
    var ReactDOM = require('react-dom');
    var MyComponent = React.createClass({
    render: function() {
    return Hello World;
    }
    });
    ReactDOM.render(, node);
    

    View Slide

11. Selectable Backends
    ☞ react-dom
    ☞ react-native
    ☞ react-canvas
    ☞ react-pixi
    ☞ react-three
    ☞ react-blessed
    ☞ etc...
    

    View Slide

12. react-native
    First Impressions using React Native
    

    View Slide

13. react-blessed
    Yomguithereal/react-blessed
    

    View Slide

14. react-pixi
    Izzimach/react-pixi
    

    View Slide

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
    

    View Slide

16. React is good enough?
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. Next...
    

    View Slide

21. Flux and DDD
    

    View Slide

22. What is React?
    ☞ Just the UI
    

    View Slide

23. View Slide

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

    View Slide

25. Let's think layers.
    

    View Slide

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

    View Slide

27. Frontend Layers
    ☞ UI Layer: React
    ☞ Application Layer: Flux
    ☞ Domain Layer: Your own Domain
    ☞ Infrastructure Layer
    ☞ REST Abstraction
    ☞ BrowserStorages(localStorage, IndexedDb, File API...)
    

    View Slide

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
    

    View Slide

29. Flux Essence
    ➀ update(previousState: State, action) => State
    

    View Slide

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

    View Slide

31. Flux Essence
    ➀ update(previousState: State, action) => State
    ➁ stateToView(state: State) => View
    ➂ View dispatches events!
    ➃ Listen events and dispatch to store.
    

    View Slide

32. Itroduction to Arda
    ☞ mizchi/arda
    ☞ One of flux implementation by @mizchi
    ☞ Extracted from Kobito for Windows and refactored.
    

    View Slide

33. Arda: Features
    ☞ State management and transition by stack.
    ☞ EventEmitter Pub/Sub
    ☞ All control steps can handle Promise.
    

    View Slide

34. Arda: Overviews
    

    View Slide

35. Arda: Overviews
    

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

39. DDD on Arda
    ➀ EventEmitter subscribe → update flow // Action to Domain
    ➁ Context.expandComponentProps() // Domain to View
    

    View Slide

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
    

    View Slide

41. What you should think in development
    ☞ Domain can be universal
    ☞ Avoid Smart UI
    ☞ Doubt code you write belongs domain layer
    

    View Slide

42. Reward of DDD on Flux
    ☞ Removable infrustructure
    ☞ Runnable in everywhere
    ☞ Browser
    ☞ Electron
    ☞ Terminal
    

    View Slide

43. Practice
    - env/
    - browser/
    - components/
    - main.js
    - api/
    - commands/
    - queries/
    - application/
    - router.js
    

    View Slide

44. Server Side Rendering and Take Over
    

    View Slide

45. react-rails
    ☞ reactjs/react-rails
    ☞ Render HTML string with V8 by ReactComponent
    <%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %>
    
    
    Hello, John!
    
    

    View Slide

46. Take Over
    ☞ Can avoid refreshing in cline if you provide same component
    and same props
    ☞ react-railsͰαʔόʔαΠυϨϯμϦϯάͭͭ͠ΫϥΠΞϯτͰ
    setStateͰ͖ͯ࠷ߴʹͳͬͨ - Qiita
    

    View Slide

47. ReactPhoenix
    ☞ increments/react_phoenix
    ☞ for Elixir
    ☞ WIP
    ☞ same api with react_rails
    <%= react_component("HelloMessage", %{a: 1}, prerender: true) %>
    # =>
    

    View Slide

48. Why SSR?
    ☞ Embbed partially in application
    ☞ Improve initial view UX
    ☞ Share templates with client and server
    ☞ SEO
    

    View Slide

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
    

    View Slide

50. Thank you for listening
    We are hiring.
    ΤϯδχΞ࠾༻৘ใ - Incrementsגࣜձࣾ
    

    View Slide