Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
RoRoRoRoR
Search
bakunyo
October 27, 2016
Programming
0
740
RoRoRoRoR
React on Redux on Relay on Ruby on Rails を試みて失敗した話をしました
bakunyo
October 27, 2016
Tweet
Share
More Decks by bakunyo
See All by bakunyo
合宿成果@日本色
bakunyo
0
110
GitHub Actions CI/CD Update
bakunyo
0
120
AMP 完全に理解した
bakunyo
0
220
NNにふれてみて
bakunyo
0
920
Other Decks in Programming
See All in Programming
EventSourcingの理想と現実
wenas
5
2k
現場で役立つモデリング 超入門
masuda220
PRO
12
2.8k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
980
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
270
Server Driven Compose With Firebase
skydoves
0
360
RailsのPull requestsのレビューの時に私が考えていること
yahonda
4
1.6k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
10
2.3k
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
860
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
色々なIaCツールを実際に触って比較してみる
iriikeita
0
220
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
4
3.2k
Golang と Erlang
taiyow
8
1.8k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
36
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How STYLIGHT went responsive
nonsquared
95
5.1k
Documentation Writing (for coders)
carmenintech
65
4.4k
We Have a Design System, Now What?
morganepeng
50
7.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
280
Transcript
RoRoRoRoR 2016.10.27 Cloud x HR ߹ಉϏΞόογϡ Izuta Hiroyuki
ࣗݾհ • ҏ౾ా യ • 2013/01 ೖࣾ
ࣗݾհ • ҏ౾ా യ • 2013/01 ೖࣾ
• ࠓϑϩϯτΤϯυؔ࿈ͷ
React on Redux on Relay on Ruby on Rails ͱ͍͏ࢼΈ
Ruby / Rails ͷ͜͜·Ͱ dev-server
ࠓͷΰʔϧ • ReactपลͷϥΠϒϥϦΛཧͯ͠ɺ ͋Ε͜Ε໎Θͳ͍Α͏શମ؍Λ࣋ͭ ʢϨʔϧΛෑ͘ʣ
React on Redux on Relay on Ruby on Rails
React ͬͯʁ • Facebook UI ίϯϙʔωϯτϥΠϒϥϦ - https://facebook.github.io/react/ •
Google Trends
എܠ
jQuery ࠷ߴ • େલఏͱͯ͠ • Selector, Event, Ajax, Effect …
• ϥΠϒϥϦॆ࣮ • DOMૢ࡞Ͱ͖Δ͠
jQuery ࠷ߴʁ • DOMૢ࡞ • <ul>ͯ͠loopͯ͠<li>ͯ͠ଐੑ͚ͭͯ… • खଓ͖త • DOMͷঢ়ଶΛิ͢Δ
Virtual DOM
Virtual DOM • ԾతͳDOMπϦʔΛ͓͍ͬͯͯɺࠩߋ৽ • ޮత
Virtual DOM ࣮ • Vue.js - https://vuejs.org/ • Riot.js -
http://riotjs.com/ • React.js
React Concepts • Declarative • Component-Based • Learn Once, Write
Anywhere
Sample Code (component)
React ·ͱΊ • jQuery ΄΅࠷ߴ • React UI ίϯϙʔωϯτ
• Virtual DOMͷࠩߋ৽Ͱɺޮత
React on Redux on Relay on Ruby on Rails
Redux ͬͯʁ • ༧Մೳͳঢ়ଶίϯςφ • React Component props ͱ
state Λ࣋ͪɺ state ߋ৽Մೳ • ͨͩɺཧ͕େมͳͷͰͦ͜Λαϙʔτ͢Δ • ReactҎ֎Ͱ͑Δ
എܠ
ϑϩϯτΤϯυͷׂ૿େ • SPA ͦͷଞϥΠϒϥϦʹΑΔෳࡶԽ • σʔλϑϩʔͷͨΊͷΞʔΩςΫνϟ͕ඞཁ • React ʹ͓͍ͯ state
ͷཧ
Flux
Flux ͬͯʁ • σʔλϑϩʔͷ୯ํԽΛଅ͢ΞʔΩςΫνϟ • Facebook ͷ Flux ࣮ “Flux”
͋Δ… - http://facebook.github.io/flux/
Flux Architecture
Redux ͷ߹ ɾAction͕DispatcherʹΔ ɾDispatcherStateͱͱʹ ActionΛReducerʹ͢ ɾReducer৽ͨͳStateΛ Viewʹ͢
Sample Code (Reducer)
Sample Code (react-redux)
Redux ͷ ҋ(?)
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
Redux ·ͱΊ • Redux Flux ࣮ͷ1ͭͰɺঢ়ଶΛཧ͢Δ ͨΊͷͷ • React
Ͱ͑Δ͕ɺͦΕʹݶΒͳ͍ • “You Might Not Need Redux.” - ಋೖ͢ΔલʹҰ୴མͪண͜͏
React on Redux on Relay on Ruby on Rails
Relay ͬͯʁ • A Javascript framework for building Data-Driven React
Apps. • Facebook - https://facebook.github.io/relay/
എܠ
• ϢʔβʔใΛऔಘ͢Δ "1*4FSWFS ɾࢯ໊ ɾྸ ɾ݂ӷܕ GET /users/:id REST API
๊͕͑Δ
• ΫϥΠΞϯτ͕૿͑ͨ "1*4FSWFS ɾࢯ໊ ɾྸ ɾ݂ӷܕ ɾࢯ໊ͱ ɾग़ GET /users/:id
REST API ๊͕͑Δ
"1*4FSWFS GET /users/:id ͦΜͳʹཁΒͳ͍ ɾࢯ໊ ɾྸ ɾ݂ӷܕ ɾग़ REST API
๊͕͑Δ • ·ͱΊͯฦͨ͠
• ΫϥΠΞϯτͷཁٻ༷ʑ • UA / QueryParams Ͱஅͯ͠ذ͢Δʁ • ඞཁͳ͚ͩϦΫΤετͯ͠ɺ ඞཁͳฦ͍ͨ͠
REST API ๊͕͑Δ
GraphQL
GraphQL ͬͯʁ • άϥϑ : Graph ϊʔυʢʣ܈ͱϊʔυؒͷ࿈݁ؔΛද͢ Τοδʢࢬʣ܈Ͱߏ͞ΕΔநσʔλܕ(wikipedia)
• ΦϒδΣΫτಉ࢜ͷؔੑΛද͢ΫΤϦݴޠ
GraphQL ͷ߹ • ϢʔβʔใΛऔಘ͢Δ "1*4FSWFS VTFS\ OBNF BHF
CMPPE@UZQF ^ VTFS\ OBNF MPDBUJPO ^ ඞཁͳ͚ͩ
Sample Code (Object Type)
GraphiQL
GraphiQL • An in-browser IDE for exploring GraphQL. - https://github.com/graphql/graphiql
• ಡΈํͨͿΜʮ͙Β;͔͌Δʯ • GUIͰखܰʹGraphQL͕ୟ͚Δ - ܕใ͋Γ - ύϥϝʔλࢦఆՄ
Demo
Redux on or Relay ? • Comparing Redux and Relay
- https://www.reindex.io/blog/redux-and-relay/ • Redux Relay state ΛࣗͰཧ͢ΔͨΊɺซ ༻Ͱ͖ͳ͍
Relay ·ͱΊ • Relay React ͚JSϑϨʔϜϫʔΫ • GraphQL Λͬͯඞཁͳ͚ͩϦΫΤετ
• ঢ়ଶΛཧ͢Δ Redux ͱซ༻Ͱ͖ͳ͍
શମ·ͱΊ
എܠͱͯ͋͠Δ֓೦Λཧ શମ૾Λཧͯ͠ɺࡉ෦ʹߦ͘લʹಓےΛཱ͓ͯͯ͜͏ ϥΠϒϥϦ എܠ 3FBDU 7JSUVBM%0. 3FEVY 'MVY 3FMBZ (SBQI2-
ऴ
͓·͚ • ؾʹͳΔN+1ճආ
ࢀߟURL • React - https://facebook.github.io/react/ • Redux - http://redux.js.org/ •
GraphQL - http://graphql.org/ • Relay - https://facebook.github.io/relay/
ࢀߟ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