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.5k
Other Decks in Programming
See All in Programming
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
130
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
830
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
見た目から始める生産性向上
ikumatadokoro
7
830
Ruby GitHub Packages
bkuhlmann
0
630
Goのmultiple errorsについて (2024年4月版)
syumai
3
660
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
Code Reviews
bkuhlmann
4
890
"config" ってなんだ? / What is "config"?
okashoi
0
240
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
A better future with KSS
kneath
231
16k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Building Your Own Lightsaber
phodgson
99
5.7k
Agile that works and the tools we love
rasmusluckow
325
20k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Clear Off the Table
cherdarchuk
84
310k
Into the Great Unknown - MozCon
thekraken
10
990
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
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
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ