どこでも React する

@dots

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.
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
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גࣜձࣾ