RoRoRoRoR

React on Redux on Relay on Ruby on Rails を試みて失敗した話をしました

Transcript

1. RoRoRoRoR 2016.10.27 Cloud x HR ߹ಉϏΞόογϡ Izuta Hiroyuki
2. ࣗݾ঺հ • ҏ౾ా യ೗ • 2013/01 ೖࣾ 
 
 
 
 

3. ࣗݾ঺հ • ҏ౾ా യ೗ • 2013/01 ೖࣾ 
 
 
 
 
 • ࠓ೔͸ϑϩϯτΤϯυؔ࿈ͷ࿩
4. React on Redux on Relay on Ruby on Rails ͱ͍͏ࢼΈ
5. Ruby / Rails ͷ࿩͸͜͜·Ͱ dev-server
6. ࠓ೔ͷΰʔϧ • ReactपลͷϥΠϒϥϦΛ੔ཧͯ͠ɺ
 ͋Ε͜Ε໎Θͳ͍Α͏શମ؍Λ࣋ͭ
 ʢϨʔϧΛෑ͘ʣ
7. React on Redux on Relay on Ruby on Rails
8. React ͬͯʁ • Facebook ੡ UI ίϯϙʔωϯτϥΠϒϥϦ
 - https://facebook.github.io/react/ • Google Trends
9. എܠ
10. jQuery ࠷ߴ • େલఏͱͯ͠ • Selector, Event, Ajax, Effect … • ϥΠϒϥϦॆ࣮ • DOMૢ࡞Ͱ͖Δ͠
11. jQuery ࠷ߴʁ • DOMૢ࡞ • <ul>ͯ͠loopͯ͠<li>ͯ͠ଐੑ͚ͭͯ… • खଓ͖త • DOMͷঢ়ଶΛ೴಺ิ׬͢Δ
12. Virtual DOM
13. Virtual DOM • Ծ૝తͳDOMπϦʔΛ΋͓͍ͬͯͯɺࠩ෼ߋ৽ • ޮ཰త
 
 
 
 
 

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

15. React Concepts • Declarative • Component-Based • Learn Once, Write Anywhere
16. Sample Code (component)
17. React ·ͱΊ • jQuery ͸΄΅࠷ߴ • React ͸ UI ίϯϙʔωϯτ • Virtual DOMͷࠩ෼ߋ৽Ͱɺޮ཰త
18. React on Redux on Relay on Ruby on Rails
19. Redux ͬͯʁ • ༧૝Մೳͳঢ়ଶίϯςφ • React Component ͸ props ͱ state Λ࣋ͪɺ
 state ͸ߋ৽Մೳ • ͨͩɺ؅ཧ͕େมͳͷͰͦ͜Λαϙʔτ͢Δ • ReactҎ֎Ͱ΋࢖͑Δ
20. എܠ
21. ϑϩϯτΤϯυͷ໾ׂ૿େ • SPA ΍ͦͷଞϥΠϒϥϦʹΑΔෳࡶԽ • σʔλϑϩʔͷͨΊͷΞʔΩςΫνϟ͕ඞཁ • React ʹ͓͍ͯ͸ state ͷ؅ཧ
22. Flux
23. Flux ͬͯʁ • σʔλϑϩʔͷ୯ํ޲ԽΛଅ͢ΞʔΩςΫνϟ • Facebook ੡ͷ Flux ࣮૷ “Flux” ΋͋Δ…
 - http://facebook.github.io/flux/

24. Flux Architecture
25. Redux ͷ৔߹ ɾAction͕Dispatcherʹ౉Δ
 ɾDispatcher͸Stateͱͱ΋ʹ ActionΛReducerʹ౉͢ 
 ɾReducer͸৽ͨͳStateΛ Viewʹ౉͢
26. Sample Code (Reducer)
27. Sample Code (react-redux)
28. Redux ͷ ҋ(?)
29. 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
30. Redux ·ͱΊ • Redux ͸ Flux ࣮૷ͷ1ͭͰɺঢ়ଶΛ؅ཧ͢Δ ͨΊͷ΋ͷ • React Ͱ΋࢖͑Δ͕ɺͦΕʹݶΒͳ͍ • “You Might Not Need Redux.”
 - ಋೖ͢ΔલʹҰ୴མͪண͜͏
31. React on Redux on Relay on Ruby on Rails
32. Relay ͬͯʁ • A Javascript framework
 for building Data-Driven React Apps. • Facebook ੡
 - https://facebook.github.io/relay/
33. എܠ
34. • Ϣʔβʔ৘ใΛऔಘ͢Δ "1*
    4FSWFS ɾࢯ໊
    ɾ೥ྸ
    ɾ݂ӷܕ GET /users/:id REST API ๊͕͑Δ໰୊
35. • ΫϥΠΞϯτ͕૿͑ͨ "1*
    4FSWFS ɾࢯ໊
    ɾ೥ྸ
    ɾ݂ӷܕ ɾࢯ໊ͱ
    ɾग़਎஍ GET /users/:id REST API ๊͕͑Δ໰୊
36. "1*
    4FSWFS GET /users/:id ͦΜͳʹཁΒͳ͍ ɾࢯ໊
    ɾ೥ྸ
    ɾ݂ӷܕ
    ɾग़਎஍ REST API ๊͕͑Δ໰୊ • ·ͱΊͯฦͨ͠
37. • ΫϥΠΞϯτͷཁٻ͸༷ʑ • UA / QueryParams Ͱ൑அͯ͠෼ذ͢Δʁ • ඞཁͳ෼͚ͩϦΫΤετͯ͠ɺ
 ඞཁͳ෼ฦ͍ͨ͠ REST API ๊͕͑Δ໰୊
38. GraphQL
39. GraphQL ͬͯʁ • άϥϑ : Graph
 ϊʔυʢ௖఺ʣ܈ͱϊʔυؒͷ࿈݁ؔ܎Λද͢
 Τοδʢࢬʣ܈Ͱߏ੒͞ΕΔந৅σʔλܕ(wikipedia)
 
 
 
 
 • ΦϒδΣΫτಉ࢜ͷؔ܎ੑΛද͢ΫΤϦݴޠ
40. GraphQL ͷ৔߹ • Ϣʔβʔ৘ใΛऔಘ͢Δ "1*
    4FSWFS VTFS
    \

    
    OBNF
    
    
    BHF
    
    
    CMPPE@UZQF
    ^ VTFS
    \

    
    OBNF
    
    
    MPDBUJPO
 ^ ඞཁͳ෼͚ͩ
41. Sample Code (Object Type)
42. GraphiQL
43. GraphiQL • An in-browser IDE for exploring GraphQL.
 - https://github.com/graphql/graphiql • ಡΈํ͸ͨͿΜʮ͙Β;͔͌Δʯ • GUIͰखܰʹGraphQL͕ୟ͚Δ
 - ܕ৘ใ͋Γ
 - ύϥϝʔλࢦఆՄ
44. Demo
45. Redux on or Relay ? • Comparing Redux and Relay
 - https://www.reindex.io/blog/redux-and-relay/ • Redux ΋ Relay ΋ state Λࣗ਎Ͱ؅ཧ͢ΔͨΊɺซ ༻Ͱ͖ͳ͍
46. Relay ·ͱΊ • Relay ͸ React ޲͚JSϑϨʔϜϫʔΫ • GraphQL Λ࢖ͬͯඞཁͳ෼͚ͩϦΫΤετ • ঢ়ଶΛ؅ཧ͢Δ Redux ͱซ༻Ͱ͖ͳ͍
47. શମ·ͱΊ
48. എܠͱͯ͋͠Δ֓೦Λ੔ཧ શମ૾Λ੔ཧͯ͠ɺࡉ෦ʹߦ͘લʹಓےΛཱ͓ͯͯ͜͏ ϥΠϒϥϦ എܠ 3FBDU 7JSUVBM
    %0. 3FEVY 'MVY 3FMBZ (SBQI2-
49. ऴ
50. ͓·͚ • ؾʹͳΔN+1ճආ
51. ࢀߟURL • React
 - https://facebook.github.io/react/ • Redux
 - http://redux.js.org/ • GraphQL
 - http://graphql.org/ • Relay
 - https://facebook.github.io/relay/
52. ࢀߟ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