Slide 1

Slide 1 text

Falcor + React.js @Quramy 2016.04.25

Slide 2

Slide 2 text

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 


Slide 3

Slide 3 text

I ♥ TypeScript falcor.d.ts was merged into Definitely Typed .

Slide 4

Slide 4 text

Why Falcor ?

Slide 5

Slide 5 text

SPAͷ՝୊(RIA, Mobile΋͖ͬͱҰॹ) • Frontend(UI)ͷཉٻ: • ࠷খݶͷϦΫΤετͰը໘ʹඞཁॆ෼ͳ৘ ใ͕ཉ͍͠ • Backend(API)ͷཉٻ: • Serviceͷઃܭͱ࣮૷ʹઐ೦͍ͨ͠

Slide 6

Slide 6 text

ݱ࣮͸… • ʮը໘ʹ࠷దԽͨ͠APIʹ͢Δͥʂʯ
 ˠ API endpoint͕ը໘ຖʹͭ͘ΔӋ໨ʹ • ʮͲͷը໘͔Β΋࢖͑ΔAPI࡞ͬͨͥʂʯ
 ˠ ͦͷը໘Ͱ͸ඞཁͱ͠ͳ͍ଐੑΛେྔʹ ؚΜͩJSON͕ฦ٫͞ΕΔ

Slide 7

Slide 7 text

Կ͔ղܾࡦ͸ແ͍΋ͷ͔…

Slide 8

Slide 8 text

ͦ͏ͩʂBFFͩʂ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

BFFʹد͍ͤͯΔظ଴ • Service͸υϝΠϯʹ߹ΘͤͯendpointΛެ ։͢Ε͹Α͍ • UIͷҰ࣍తͳཁٻ͸BFF͕ड͚෇͚Δ
 ݸผService΁ͷ໰͍߹Θͤ݁ՌΛUIʹ࠷దԽ ͯ͠ฦ٫͢Δ

Slide 11

Slide 11 text

What Falcor does Resources for UI
 (JSON Graph) Services BFF ! http://netflix.github.io/falcor/starter/what-is-falcor.html#one-model-everywhere

Slide 12

Slide 12 text

Falcor is one of BFF implementation Sam Newman refers: http://samnewman.io/patterns/architectural/bff/#comment-2386306596

Slide 13

Slide 13 text

Falcor is Universal Falcor.ModelΛར༻͢Δίʔυ͸
 Browser/Node.js྆ํͰಈ͘
 ˠ test΍SSRͰ΋࢖͑ͦ͏

Slide 14

Slide 14 text

How to use Falcor with React.js

Slide 15

Slide 15 text

Async MVC http://netflix.github.io/falcor/starter/what-is-falcor.html#bind-to-the-cloud

Slide 16

Slide 16 text

Ͳ͔ͬͰݟͨ͜ͱ͋Δͧɻɻ

Slide 17

Slide 17 text

React + Flux https://github.com/facebook/flux#flux

Slide 18

Slide 18 text

૬ੑྑͦ͞͏ͳͷͰ΍ͬͯΈͨ
 https://github.com/Quramy/react-falcor-demo#inetgrated-with-flux

Slide 19

Slide 19 text

Falcor.Model as store import {Model} from 'falcor'; import {Store} from '../../../lib/built'; /*** Store ***/ export const store = Store.createFromModel(new Model({ cache: { count: 0 } }));

Slide 20

Slide 20 text

React.Component as View // Component export class App extends React.Component<{count: number, dispatch: (action: Action) => void}, {}> { render() { const {count} = this.props; const countUp = this.countUp.bind(this); return (

This is simple demonstation of Falcor, React and flux.

Click + 1 {count}
); } countUp() { this.props.dispatch(countUpAction(this.props.count + 1)); } }

Slide 21

Slide 21 text

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(, document.getElementById('app'));

Slide 22

Slide 22 text

΍ͬͨ͜ͱ1 • Falcor.ModelͷonChangeΛhookͯ͠ ObservableͳStoreΛ࡞Δ • Store(JSON Graph)ͷมߋΛView΁ subscribe͢Δ࢓૊Έ

Slide 23

Slide 23 text

΍ͬͨ͜ͱ2 • React.ComponentΛड͚ͱͬͯComponentΛฦؔ͢਺ (=connectModel)Λ࡞੒ • ReactͷLifecycle hook + StoreͷonChangeʹͯ JSON Graph͔ΒstateΛੜ੒ɺҾ਺Componentͷ props΁٧ΊࠐΉ • ʮComponent͔ΒContainerΛ࡞Δʯ
 ˠ Redux΍RelayΛࢀߟʹ͍ͯ͠Δ

Slide 24

Slide 24 text

·ͱΊ • Falcor͸BFFج൫ͱͯ͠࢖͑ͦ͏ • Store(ͷେ൒)ΛFalcor.ModelͰӅṭ͢Δ • Containerؔ਺Λࣗ࡞͢Δ͜ͱͰɺ Falcor(JSON Graph)͔Βͷ஋औಘΛએݴతʹ هड़Ͱ͖ͦ͏