falcor-with-react

Transcript

1. Falcor + React.js @Quramy 2016.04.25
2. About me • @Quramy (Yosuke Kurami) • Frontend Web Developer at WACUL INC. • develop SPA with Angular(1 and 2) • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢ • http://vimawesome.com/plugin/tsuquyomi 

3. I ♥ TypeScript falcor.d.ts was merged into Definitely Typed .
4. Why Falcor ?
5. SPAͷ՝୊(RIA, Mobile΋͖ͬͱҰॹ) • Frontend(UI)ͷཉٻ: • ࠷খݶͷϦΫΤετͰը໘ʹඞཁॆ෼ͳ৘ ใ͕ཉ͍͠ • Backend(API)ͷཉٻ: • Serviceͷઃܭͱ࣮૷ʹઐ೦͍ͨ͠
6. ݱ࣮͸… • ʮը໘ʹ࠷దԽͨ͠APIʹ͢Δͥʂʯ
 ˠ API endpoint͕ը໘ຖʹͭ͘ΔӋ໨ʹ • ʮͲͷը໘͔Β΋࢖͑ΔAPI࡞ͬͨͥʂʯ
 ˠ ͦͷը໘Ͱ͸ඞཁͱ͠ͳ͍ଐੑΛେྔʹ ؚΜͩJSON͕ฦ٫͞ΕΔ
7. Կ͔ղܾࡦ͸ແ͍΋ͷ͔…
8. ͦ͏ͩʂBFFͩʂ
9. Backends For Frontends (BFF) The BFF is tightly coupled to a specific user experience, and will typically be maintained by the same team as the user interface. http://samnewman.io/patterns/architectural/bff/#bff
10. BFFʹد͍ͤͯΔظ଴ • Service͸υϝΠϯʹ߹ΘͤͯendpointΛެ ։͢Ε͹Α͍ • UIͷҰ࣍తͳཁٻ͸BFF͕ड͚෇͚Δ
 ݸผService΁ͷ໰͍߹Θͤ݁ՌΛUIʹ࠷దԽ ͯ͠ฦ٫͢Δ
11. What Falcor does Resources for UI
 (JSON Graph) Services BFF ! http://netflix.github.io/falcor/starter/what-is-falcor.html#one-model-everywhere
12. Falcor is one of BFF implementation Sam Newman refers: http://samnewman.io/patterns/architectural/bff/#comment-2386306596
13. Falcor is Universal Falcor.ModelΛར༻͢Δίʔυ͸
 Browser/Node.js྆ํͰಈ͘
 ˠ test΍SSRͰ΋࢖͑ͦ͏
14. How to use Falcor with React.js
15. Async MVC http://netflix.github.io/falcor/starter/what-is-falcor.html#bind-to-the-cloud
16. Ͳ͔ͬͰݟͨ͜ͱ͋Δͧɻɻ
17. React + Flux https://github.com/facebook/flux#flux
18. ૬ੑྑͦ͞͏ͳͷͰ΍ͬͯΈͨ
 https://github.com/Quramy/react-falcor-demo#inetgrated-with-flux
19. Falcor.Model as store import {Model} from 'falcor'; import {Store} from '../../../lib/built'; /*** Store ***/ export const store = Store.createFromModel(new Model({ cache: { count: 0 } }));
20. React.Component as View // Component export class App extends React.Component<{count: number, dispatch: (action: Action<any>) => void}, {}> { render() { const {count} = this.props; const countUp = this.countUp.bind(this); return ( <div> <p>This is simple demonstation of Falcor, React and flux.</p> <button onClick={countUp}>Click + 1</button> <span>{count}</span> </div> ); } countUp() { this.props.dispatch(countUpAction(this.props.count + 1)); } }
21. Connect them import * as React from 'react'; import {render} from 'react-dom'; import {connectModel} from '../../../lib/built'; // App Container const AppContainer = connectModel(App, store, { // Component’s property < - > Path of JSON Graph count: 'count' }); /*** Bootstrap ***/ render(<AppContainer dispatch={dispatcher.dispatch.bind(dispatcher)}/>, document.getElementById('app'));
22. ΍ͬͨ͜ͱ1 • Falcor.ModelͷonChangeΛhookͯ͠ ObservableͳStoreΛ࡞Δ • Store(JSON Graph)ͷมߋΛView΁ subscribe͢Δ࢓૊Έ
23. ΍ͬͨ͜ͱ2 • React.ComponentΛड͚ͱͬͯComponentΛฦؔ͢਺ (=connectModel)Λ࡞੒ • ReactͷLifecycle hook + StoreͷonChangeʹͯ JSON Graph͔ΒstateΛੜ੒ɺҾ਺Componentͷ props΁٧ΊࠐΉ • ʮComponent͔ΒContainerΛ࡞Δʯ
 ˠ Redux΍RelayΛࢀߟʹ͍ͯ͠Δ
24. ·ͱΊ • Falcor͸BFFج൫ͱͯ͠࢖͑ͦ͏ • Store(ͷେ൒)ΛFalcor.ModelͰӅṭ͢Δ • Containerؔ਺Λࣗ࡞͢Δ͜ͱͰɺ Falcor(JSON Graph)͔Βͷ஋औಘΛએݴతʹ هड़Ͱ͖ͦ͏