RoRoRoRoR - Speaker Deck

RoRoRoRoR

by bakunyo

Slide 1

Slide 1 text

RoRoRoRoR 2016.10.27 Cloud x HR ߹ಉϏΞόογϡ Izuta Hiroyuki

Slide 2

Slide 2 text

ࣗݾ঺հ • ҏ౾ా യ೗ • 2013/01 ೖࣾ          

Slide 3

Slide 3 text

ࣗݾ঺հ • ҏ౾ా യ೗ • 2013/01 ೖࣾ           • ࠓ೔͸ϑϩϯτΤϯυؔ࿈ͷ࿩

Slide 4

Slide 4 text

React on Redux on Relay on Ruby on Rails ͱ͍͏ࢼΈ

Slide 5

Slide 5 text

Ruby / Rails ͷ࿩͸͜͜·Ͱ dev-server

Slide 6

Slide 6 text

ࠓ೔ͷΰʔϧ • ReactपลͷϥΠϒϥϦΛ੔ཧͯ͠ɺ  ͋Ε͜Ε໎Θͳ͍Α͏શମ؍Λ࣋ͭ  ʢϨʔϧΛෑ͘ʣ

Slide 7

Slide 7 text

React on Redux on Relay on Ruby on Rails

Slide 8

Slide 8 text

React ͬͯʁ • Facebook ੡ UI ίϯϙʔωϯτϥΠϒϥϦ  - https://facebook.github.io/react/ • Google Trends

Slide 9

Slide 9 text

എܠ

Slide 10

Slide 10 text

jQuery ࠷ߴ • େલఏͱͯ͠ • Selector, Event, Ajax, Effect … • ϥΠϒϥϦॆ࣮ • DOMૢ࡞Ͱ͖Δ͠

Slide 11

Slide 11 text

jQuery ࠷ߴʁ • DOMૢ࡞ •

ͯ͠ଐੑ͚ͭͯ… • खଓ͖త • DOMͷঢ়ଶΛ೴಺ิ׬͢Δ

Slide 12

Slide 12 text

Virtual DOM

Slide 13

Slide 13 text

Virtual DOM • Ծ૝తͳDOMπϦʔΛ΋͓͍ͬͯͯɺࠩ෼ߋ৽ • ޮ཰త           

Slide 14

Slide 14 text

Virtual DOM ࣮૷ • Vue.js  - https://vuejs.org/ • Riot.js  - http://riotjs.com/ • React.js 

Slide 15

Slide 15 text

React Concepts • Declarative • Component-Based • Learn Once, Write Anywhere

Slide 16

Slide 16 text

Sample Code (component)

Slide 17

Slide 17 text

React ·ͱΊ • jQuery ͸΄΅࠷ߴ • React ͸ UI ίϯϙʔωϯτ • Virtual DOMͷࠩ෼ߋ৽Ͱɺޮ཰త

Slide 18

Slide 18 text

React on Redux on Relay on Ruby on Rails

Slide 19

Slide 19 text

Redux ͬͯʁ • ༧૝Մೳͳঢ়ଶίϯςφ • React Component ͸ props ͱ state Λ࣋ͪɺ  state ͸ߋ৽Մೳ • ͨͩɺ؅ཧ͕େมͳͷͰͦ͜Λαϙʔτ͢Δ • ReactҎ֎Ͱ΋࢖͑Δ

Slide 20

Slide 20 text

എܠ

Slide 21

Slide 21 text

ϑϩϯτΤϯυͷ໾ׂ૿େ • SPA ΍ͦͷଞϥΠϒϥϦʹΑΔෳࡶԽ • σʔλϑϩʔͷͨΊͷΞʔΩςΫνϟ͕ඞཁ • React ʹ͓͍ͯ͸ state ͷ؅ཧ

Slide 22

Slide 22 text

Flux

Slide 23

Slide 23 text

Flux ͬͯʁ • σʔλϑϩʔͷ୯ํ޲ԽΛଅ͢ΞʔΩςΫνϟ • Facebook ੡ͷ Flux ࣮૷ “Flux” ΋͋Δ…  - http://facebook.github.io/ﬂux/ 

Slide 24

Slide 24 text

Flux Architecture

Slide 25

Slide 25 text

Redux ͷ৔߹ ɾAction͕Dispatcherʹ౉Δ  ɾDispatcher͸Stateͱͱ΋ʹ ActionΛReducerʹ౉͢   ɾReducer͸৽ͨͳStateΛ Viewʹ౉͢

Slide 26

Slide 26 text

Sample Code (Reducer)

Slide 27

Slide 27 text

Sample Code (react-redux)

Slide 28

Slide 28 text

Redux ͷ ҋ(?)

Slide 29

Slide 29 text

Before Proceeding Further  ʢઌʹਐΊΔલʹʣ • “You Might Not Need Redux”  - Dan Abramov, creator of Redux  - https://medium.com/@dan_abramov/you-might-not-need-redux- be46360cf367#.k02221rdc • redux ʹ͸ྑ͍ middleware ͕ඞਢ  - http://togetter.com/li/979237 • mizchi ͷ Redux ߟ  - http://togetter.com/li/911228

Slide 30

Slide 30 text

Redux ·ͱΊ • Redux ͸ Flux ࣮૷ͷ1ͭͰɺঢ়ଶΛ؅ཧ͢Δ ͨΊͷ΋ͷ • React Ͱ΋࢖͑Δ͕ɺͦΕʹݶΒͳ͍ • “You Might Not Need Redux.”  - ಋೖ͢ΔલʹҰ୴མͪண͜͏

Slide 31

Slide 31 text

React on Redux on Relay on Ruby on Rails

Slide 32

Slide 32 text

Relay ͬͯʁ • A Javascript framework  for building Data-Driven React Apps. • Facebook ੡  - https://facebook.github.io/relay/

Slide 33

Slide 33 text

എܠ

Slide 34

Slide 34 text

• Ϣʔβʔ৘ใΛऔಘ͢Δ "1*4FSWFS ɾࢯ໊ ɾ೥ྸ ɾ݂ӷܕ GET /users/:id REST API ๊͕͑Δ໰୊

Slide 35

Slide 35 text

• ΫϥΠΞϯτ͕૿͑ͨ "1*4FSWFS ɾࢯ໊ ɾ೥ྸ ɾ݂ӷܕ ɾࢯ໊ͱ ɾग़਎஍ GET /users/:id REST API ๊͕͑Δ໰୊

Slide 36

Slide 36 text

"1*4FSWFS GET /users/:id ͦΜͳʹཁΒͳ͍ ɾࢯ໊ ɾ೥ྸ ɾ݂ӷܕ ɾग़਎஍ REST API ๊͕͑Δ໰୊ • ·ͱΊͯฦͨ͠

Slide 37

Slide 37 text

• ΫϥΠΞϯτͷཁٻ͸༷ʑ • UA / QueryParams Ͱ൑அͯ͠෼ذ͢Δʁ • ඞཁͳ෼͚ͩϦΫΤετͯ͠ɺ  ඞཁͳ෼ฦ͍ͨ͠ REST API ๊͕͑Δ໰୊

Slide 38

Slide 38 text

GraphQL

Slide 39

Slide 39 text

GraphQL ͬͯʁ • άϥϑ : Graph  ϊʔυʢ௖఺ʣ܈ͱϊʔυؒͷ࿈݁ؔ܎Λද͢  Τοδʢࢬʣ܈Ͱߏ੒͞ΕΔந৅σʔλܕ(wikipedia)          • ΦϒδΣΫτಉ࢜ͷؔ܎ੑΛද͢ΫΤϦݴޠ

Slide 40

Slide 40 text

GraphQL ͷ৔߹ • Ϣʔβʔ৘ใΛऔಘ͢Δ "1*4FSWFS VTFS\  OBNF BHF CMPPE@UZQF ^ VTFS\  OBNF MPDBUJPO  ^ ඞཁͳ෼͚ͩ

Slide 41

Slide 41 text

Sample Code (Object Type)

Slide 42

Slide 42 text

GraphiQL

Slide 43

Slide 43 text

GraphiQL • An in-browser IDE for exploring GraphQL.  - https://github.com/graphql/graphiql • ಡΈํ͸ͨͿΜʮ͙Β;͔͌Δʯ • GUIͰखܰʹGraphQL͕ୟ͚Δ  - ܕ৘ใ͋Γ  - ύϥϝʔλࢦఆՄ

Slide 44

Slide 44 text

Demo

Slide 45

Slide 45 text

Redux on or Relay ? • Comparing Redux and Relay  - https://www.reindex.io/blog/redux-and-relay/ • Redux ΋ Relay ΋ state Λࣗ਎Ͱ؅ཧ͢ΔͨΊɺซ ༻Ͱ͖ͳ͍

Slide 46

Slide 46 text

Relay ·ͱΊ • Relay ͸ React ޲͚JSϑϨʔϜϫʔΫ • GraphQL Λ࢖ͬͯඞཁͳ෼͚ͩϦΫΤετ • ঢ়ଶΛ؅ཧ͢Δ Redux ͱซ༻Ͱ͖ͳ͍

Slide 47

Slide 47 text

શମ·ͱΊ

Slide 48

Slide 48 text

എܠͱͯ͋͠Δ֓೦Λ੔ཧ શମ૾Λ੔ཧͯ͠ɺࡉ෦ʹߦ͘લʹಓےΛཱ͓ͯͯ͜͏ ϥΠϒϥϦ എܠ 3FBDU 7JSUVBM%0. 3FEVY 'MVY 3FMBZ (SBQI2-

Slide 49

Slide 49 text

ऴ

Slide 50

Slide 50 text

͓·͚ • ؾʹͳΔN+1ճආ

Slide 51

Slide 51 text

ࢀߟURL • React  - https://facebook.github.io/react/ • Redux  - http://redux.js.org/ • GraphQL  - http://graphql.org/ • Relay  - https://facebook.github.io/relay/

Slide 52

Slide 52 text

ࢀߟURL • ͳͥԾ૝DOMͱ͍͏֓೦͕ԶୡͷࠢΛ਒͑ͤ͞Δͷ͔ - Qiita  - http://qiita.com/mizchi/items/4d25bc26def1719d52e6 • redux ʹ͸ྑ͍ middleware ͕ඞਢ  - http://togetter.com/li/979237 • mizchi ͷ Redux ߟ  - http://togetter.com/li/911228 • GraphQLͷ͸͡Ί͔ͨ - Write and Run  - http://diary.hatenablog.jp/entry/2016/10/23/224206