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
スペースマーケットのアーキテクチャ変遷
Search
Haruhiko Kobayashi
February 26, 2018
Programming
0
2.1k
スペースマーケットのアーキテクチャ変遷
スペースマーケットのアーキテクチャ変遷
Haruhiko Kobayashi
February 26, 2018
Tweet
Share
More Decks by Haruhiko Kobayashi
See All by Haruhiko Kobayashi
GraphQL GatewayをNode.jsで作ってる話
hmatsuda
2
1.6k
Other Decks in Programming
See All in Programming
CSC307 Lecture 07
javiergs
PRO
0
220
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
最近追加した型の紹介とその振り返り
aki19035vc
0
170
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
CSC307 Lecture 12
javiergs
PRO
0
220
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
157
8.1k
BBQ
matthewcrist
82
9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Clear Off the Table
cherdarchuk
89
320k
Building Your Own Lightsaber
phodgson
101
5.9k
Embracing the Ebb and Flow
colly
81
4.3k
A designer walks into a library…
pauljervisheath
201
24k
Gamification - CAS2011
davidbonilla
78
4.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Git: the NoSQL Database
bkeepers
PRO
423
64k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Transcript
)BSVIJLP,PCBZBTIJ εϖʔεϚʔέοτͷ ΞʔΩςΫνϟมભ
Haruhiko Kobayashi Tech Lead εϖʔεϚʔέοτ 1ਓͷΤϯδχΞͱͯ͠ࢀՃ ࣗݾհ
εϖʔεΛିΓ͍ͨਓͱआ͍ͨ͠ਓΛϚονϯάͤ͞Δϓϥοτ ϑΥʔϜ αʔϏεհ आΓ͍ͨਓ ήετ आ͍ͨ͠ਓ ϗετ
1࣌ؒ୯ҐͰεϖʔεΛି͠आΓ(2014/4ʙ) SPACEMARKET
॓ധεϖʔεΛି͠आΓ(2017/9ʙ) SPACEMARKET STAY
ࣾһͷ༧ΛҰׅཧ(2017/11ʙ) ๏ਓཧαʔϏε
• ήετ͚ iOS(2015/6ʙ) Android(2017/2ʙ) • ϗετ͚ iOSɺAndroid(2017/11ʙ) ωΠςΟϒΞϓϦ
εϖʔεϚʔέοτͷٕज़ελοΫ ΞʔΩςΫνϟͷมભ ϩʔϯνॳظ(2014/8ʙ2016/1) React x Railsظ(2016/2ʙ2017/8) ݱࡏ(2017/9ʙ) ࠓޙʁ ࠓ͢͜ͱ Agenda
εϖʔεϚʔέοτͷٕज़ελοΫ
Rails React SPACEMARKET Node.js React/Redux Apollo Client SPACEMARKET STAY /
๏ਓཧαʔϏε webٕज़ελοΫ API Rails
Swift Kotlin ήετ͚ΞϓϦ ReactNative ϗετ͚ΞϓϦ ΞϓϦٕज़ελοΫ
֓ཁਤ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&545": ๏ਓ͚ཧαʔϏε 41"$&."3,&5
Apollo React/Redux /PEFKT 3BJMT '& #& Swift Kotlin React/Redux ௨৴ͷྲྀΕ ϗετ͚ΞϓϦ ήετ͚ΞϓϦ KT non-js React 3FBDU/BUJWF
ΞʔΩςΫνϟͷมભ
ϩʔϯνॳظ
ΤϯδχΞ2ਓ ఏڙαʔϏεSPACEMARKETͷΈ ։ൃݱ RailsͷσϑΥϧτ ಠࣗFEϑϨʔϜϫʔΫ HTMLΛฦ͢ΤϯυϙΠϯτ ES5 ΞʔΩςΫνϟ ϩʔϯνॳظ(2014/8ʙ2016/1) લ
jQuery Rails )5.- )5.-
ΤϯδχΞ2ਓ -> 4ਓͱ૿͍͑ͯ͘ iOSΞϓϦ͕ϦϦʔε(2015/6) ઐ༻ͷREST APIΛ։ൃ มԽ ৫ɾαʔϏεͷͱͱʹFEͷόά͕૿͖͑ͯͨ ՝ ϩʔϯνॳظ(2014/8ʙ2016/1)
ޙ
jQuery͕DOM(globalม)Λ৮Δࣄ PRͷίʔυϨϏϡʔͰDOMͷঢ়ଶ·Ͱݟ͑ͳ͍ ຊ࣭తͳʁ globalมΛѻ͏ͷΛΊΔ ղܾҊ ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ
jQuery͕DOM(globalม)Λ৮Δࣄ PRͷίʔυϨϏϡʔͰDOMͷঢ়ଶ·Ͱݟ͑ͳ͍ ຊ࣭తͳʁ globalมΛѻ͏ͷΛΊΔ => ReactͷVirtual DOM ղܾҊ ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ
React x Railsظ
ΤϯδχΞ4ਓ ։ൃݱ React react-rails gem webpacker gem ES6 FlowType ΞʔΩςΫνϟ
React x Railsظ(2016/2ʙ2017/8) લ REST API React +40/ +40/ )5.- React 3BJMT
globalมʹ৮Βͳ͘ͳͬͨ SSR(ϩδοΫ/ςϯϓϨʔτͷ2ॏཧͷഉআ) όάͷݮ DOMͷશߋ৽͔Βࠩߋ৽ʹҠߦ ύϑΥʔϚϯεͷ্ React࠾༻ͷͶΒ͍
ΤϯδχΞ4ਓ -> 8ਓͱ૿͍͑ͯ͘ σόΠεͷ૿Ճ(ήετ͚AndroidΞϓϦ) ৽نαʔϏε͕ଓʑ૿Ճ༧ఆ(ϗετ͚ΞϓϦɺStayɺ๏ਓ͚) มԽ ৽ظαʔϏεͷFE։ൃʹ͕͔͔࣌ؒΔ FE։ൃͷཁٻʹREST API͕͍ͭͯ͜Εͳ͍ ՝
React x Railsظ(2016/2ʙ2017/8) ޙ
Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳʁ ViewϑϨʔϜϫʔΫΛ౷Ұ ॊೈͳAPIͷ࠾༻ ղܾҊ React x Railsظ(2016/2ʙ2017/8) ޙ
Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳʁ ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻ ॊೈͳAPIͷ࠾༻ ղܾҊ React x
Railsظ(2016/2ʙ2017/8) ޙ
Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳʁ ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻ ॊೈͳAPIͷ࠾༻ => ࢀরܥΫΤϦʹGraphQLΛ࠾༻ ղܾҊ
React x Railsظ(2016/2ʙ2017/8) ޙ
ݱࡏ
ΤϯδχΞ10ਓ FE(web+ΞϓϦ)ͱBEͰΤϯδχΞνʔϜΛ ։ൃݱ Node.js React/Redux Apollo Client ΞʔΩςΫνϟ ݱࡏ(2017/9ʙ) Apollo
React/ Redux Node.js REST API GraphQL )5.- +40/ +40/
ཧͲ͜Ͱ࠶ར༻Ͱ͖ΔView Ϣχόʔαϧͳίϯϙʔωϯτ Σϒ։ൃϦιʔε͕Γͳ͍࣌ʹΞϓϦΤϯδχΞΛΞαΠϯ ٯ·͔ͨ͠Γ ϦιʔεͷྲྀಈԽ ViewϑϨʔϜϫʔΫͷ౷Ұ αʔϏε1 web αʔϏε2 web
αʔϏε3 web αʔϏε1 iOS αʔϏε2 iOS αʔϏε3 iOS αʔϏε1 Android αʔϏε2 Android αʔϏε3 Android αʔϏεN web αʔϏεN iOS αʔϏεN Android
Partial Response Batch Request σϑΥϧτػೳ graphdoc GraphiQL ApolloͰͷ࣮ϫʔΫϑϩʔ ։ൃޮੑ GraphQLͷ͝հ
ࢦఆͨ͠σʔλͷΈऔಘ Partial Response
ҰͷAPIίʔϧͰෳͷϦιʔεΛऔಘ Batch Request
Partial Response Batch Request σϑΥϧτػೳ graphdoc GraphiQL ApolloͰͷ࣮ϫʔΫϑϩʔ ։ൃޮੑ GraphQLͷ͝հ
graphdoc graphqlAPIͷ࣮͔ΒυΩϡϝϯτΛੜ
graphdoc graphqlAPIͷ࣮͔ΒυΩϡϝϯτΛੜ
GraphiQL(άϥϑΟΫϧ) ϦΫΤετ Ϩεϙϯε GraphQLͷΫΤϦ࣮ߦڥ
1.graphdocͷυΩϡϝϯτݟΔ 2.GraphiQLͰΫΤϦςετ 3.jsxʹΫΤϦΛίϐϖ ApolloͰͷ࣮ϫʔΫϑϩʔ
ApolloͰͷ࣮ϫʔΫϑϩʔ
ࠓޙʁ
Rails/Swift/Kotlin෦ͷஔ͖͑ ViewϑϨʔϜϫʔΫͷ౷Ұ ͍͖͍ͬͯͨ͜ͱ
ݱࡏ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&545": ๏ਓ͚ཧαʔϏε 41"$&."3,&5
Apollo React/Redux /PEFKT 3BJMT '& #& Swift Kotlin React/Redux ௨৴ͷྲྀΕ ϗετ͚ΞϓϦ ήετ͚ΞϓϦ KT non-js React 3FBDU/BUJWF
ະདྷ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&545": ๏ਓ͚ཧαʔϏε 41"$&."3,&5
Apollo React/Redux /PEFKT /PEFKT '& #& Apollo React/Redux ௨৴ͷྲྀΕ ήετ͚ΞϓϦ ϗετ͚ΞϓϦ KT non-js Apollo React/Redux Apollo React/Redux 3FBDU/BUJWF 3FBDU/BUJWF
৫αʔϏεͷঢ়گ࣍ୈͰϕλʔͳબࢶΛબͿ ϩʔϯνʹRailsσϑΥϧτͰՃ͢Δ தنҎ্ͷ։ൃʹVirtul DOM αʔϏεԣల։ͳΒϢχόʔαϧJS͋Γ ·ͱΊ
React / JavaScript / iOS / Android UI / UX
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ