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