falcor-with-react

 falcor-with-react

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

April 25, 2016
Tweet

Transcript

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

  2. 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
  3. 11.

    What Falcor does Resources for UI
 (JSON Graph) Services BFF

    ! http://netflix.github.io/falcor/starter/what-is-falcor.html#one-model-everywhere
  4. 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 } }));
  5. 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)); } }
  6. 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'));
  7. 23.

    ΍ͬͨ͜ͱ2 • React.ComponentΛड͚ͱͬͯComponentΛฦؔ͢਺ (=connectModel)Λ࡞੒ • ReactͷLifecycle hook + StoreͷonChangeʹͯ JSON

    Graph͔ΒstateΛੜ੒ɺҾ਺Componentͷ props΁٧ΊࠐΉ • ʮComponent͔ΒContainerΛ࡞Δʯ
 ˠ Redux΍RelayΛࢀߟʹ͍ͯ͠Δ