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.7k
Other Decks in Programming
See All in Programming
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
430
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.9k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
650
AIのメモリー
watany
12
1.2k
decksh - a little language for decks
ajstarks
4
21k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
510
TypeScriptでDXを上げろ! Hono編
yusukebe
4
920
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
BBQ
matthewcrist
89
9.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What's in a price? How to price your products and services
michaelherold
246
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How GitHub (no longer) Works
holman
314
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Automating Front-end Workflow
addyosmani
1370
200k
Six Lessons from altMBA
skipperchong
28
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Into the Great Unknown - MozCon
thekraken
40
2k
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
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ