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.3k
スペースマーケットのアーキテクチャ変遷
スペースマーケットのアーキテクチャ変遷
Haruhiko Kobayashi
February 26, 2018
Tweet
Share
More Decks by Haruhiko Kobayashi
See All by Haruhiko Kobayashi
GraphQL GatewayをNode.jsで作ってる話
hmatsuda
2
1.8k
Other Decks in Programming
See All in Programming
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
fossamagna
2
100
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
730
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
CSC305 Lecture 10
javiergs
PRO
0
290
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
zsmb
1
230
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
EMこそClaude Codeでコード調査しよう
shibayu36
0
450
CSC305 Lecture 09
javiergs
PRO
0
320
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
It's Worth the Effort
3n
187
28k
How STYLIGHT went responsive
nonsquared
100
5.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Pragmatic Product Professional
lauravandoore
36
7k
Building Applications with DynamoDB
mza
96
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Visualization
eitanlees
149
16k
Producing Creativity
orderedlist
PRO
347
40k
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
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ