スペースマーケットのアーキテクチャ変遷

スペースマーケットのアーキテクチャ変遷

Transcript

1. )BSVIJLP
   ,PCBZBTIJ
    εϖʔεϚʔέοτͷ ΞʔΩςΫνϟมભ
2. Haruhiko Kobayashi Tech Lead εϖʔεϚʔέοτ 1ਓ໨ͷΤϯδχΞͱͯ͠ࢀՃ ࣗݾ঺հ
3. εϖʔεΛିΓ͍ͨਓͱआ͍ͨ͠ਓΛϚονϯάͤ͞Δϓϥοτ ϑΥʔϜ αʔϏε঺հ आΓ͍ͨਓ
   ήετ आ͍ͨ͠ਓ
   ϗετ
4. 1࣌ؒ୯ҐͰεϖʔεΛି͠आΓ(2014/4ʙ) SPACEMARKET
5. ॓ധεϖʔεΛି͠आΓ(2017/9ʙ) SPACEMARKET STAY
6. ࣾһͷ༧໿ΛҰׅ؅ཧ(2017/11ʙ) ๏ਓ؅ཧαʔϏε
7. • ήετ޲͚ iOS(2015/6ʙ) Android(2017/2ʙ) • ϗετ޲͚ iOSɺAndroid(2017/11ʙ) ωΠςΟϒΞϓϦ
8. εϖʔεϚʔέοτͷٕज़ελοΫ ΞʔΩςΫνϟͷมભ ϩʔϯνॳظ(2014/8ʙ2016/1) React x Railsظ(2016/2ʙ2017/8) ݱࡏ(2017/9ʙ) ࠓޙ͸ʁ ࠓ೔࿩͢͜ͱ Agenda
9. εϖʔεϚʔέοτͷٕज़ελοΫ
10. Rails React SPACEMARKET Node.js React/Redux Apollo Client SPACEMARKET STAY / ๏ਓ؅ཧαʔϏε webٕज़ελοΫ API Rails
11. Swift Kotlin ήετ޲͚ΞϓϦ ReactNative ϗετ޲͚ΞϓϦ ΞϓϦٕज़ελοΫ
12. ֓ཁਤ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&5
    45":
    ๏ਓ޲͚؅ཧαʔϏε 41"$&."3,&5 Apollo React/Redux /PEFKT 3BJMT '& #& Swift Kotlin React/Redux ௨৴ͷྲྀΕ ϗετ޲͚ΞϓϦ ήετ޲͚ΞϓϦ KT non-js React 3FBDU/BUJWF
13. ΞʔΩςΫνϟͷมભ
14. ϩʔϯνॳظ
15. ΤϯδχΞ2ਓ ఏڙαʔϏε͸SPACEMARKETͷΈ ։ൃݱ৔ RailsͷσϑΥϧτ ಠࣗFEϑϨʔϜϫʔΫ HTMLΛฦ͢ΤϯυϙΠϯτ ES5 ΞʔΩςΫνϟ ϩʔϯνॳظ(2014/8ʙ2016/1) લ൒ jQuery Rails )5.- )5.-
16. ΤϯδχΞ2ਓ -> 4ਓͱ૿͍͑ͯ͘ iOSΞϓϦ͕ϦϦʔε(2015/6) ઐ༻ͷREST APIΛ։ൃ มԽ ૊৫ɾαʔϏεͷ੒௕ͱͱ΋ʹFEͷόά͕૿͖͑ͯͨ ՝୊ ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ൒
17. jQuery͕DOM(globalม਺)Λ௚઀৮Δࣄ PRͷίʔυϨϏϡʔͰ͸DOMͷঢ়ଶ·Ͱ͸ݟ͑ͳ͍ ຊ࣭తͳ໰୊͸ʁ globalม਺Λѻ͏ͷΛ΍ΊΔ ղܾҊ ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ൒
18. jQuery͕DOM(globalม਺)Λ௚઀৮Δࣄ PRͷίʔυϨϏϡʔͰ͸DOMͷঢ়ଶ·Ͱ͸ݟ͑ͳ͍ ຊ࣭తͳ໰୊͸ʁ globalม਺Λѻ͏ͷΛ΍ΊΔ => ReactͷVirtual DOM ղܾҊ ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ൒
19. React x Railsظ
20. ΤϯδχΞ4ਓ ։ൃݱ৔ React react-rails gem webpacker gem ES6 FlowType ΞʔΩςΫνϟ React x Railsظ(2016/2ʙ2017/8) લ൒ REST API React +40/ +40/ )5.- React 3BJMT
21. globalม਺ʹ৮Βͳ͘ͳͬͨ SSR(ϩδοΫ/ςϯϓϨʔτͷ2ॏ؅ཧͷഉআ) όάͷ࡟ݮ DOMͷશߋ৽͔Βࠩ෼ߋ৽ʹҠߦ ύϑΥʔϚϯεͷ޲্ React࠾༻ͷͶΒ͍
22. ΤϯδχΞ4ਓ -> 8ਓͱ૿͍͑ͯ͘ σόΠεͷ૿Ճ(ήετ޲͚AndroidΞϓϦ) ৽نαʔϏε͕ଓʑ૿Ճ༧ఆ(ϗετ޲͚ΞϓϦɺStayɺ๏ਓ޲͚) มԽ ৽ظαʔϏεͷFE։ൃʹ͕͔͔࣌ؒΔ FE։ൃͷཁٻʹREST API͕͍ͭͯ͜Εͳ͍ ՝୊ React x Railsظ(2016/2ʙ2017/8) ޙ൒
23. Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳ໰୊͸ʁ ViewϑϨʔϜϫʔΫΛ౷Ұ ॊೈͳAPIͷ࠾༻ ղܾҊ React x Railsظ(2016/2ʙ2017/8) ޙ൒
24. Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳ໰୊͸ʁ ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻ ॊೈͳAPIͷ࠾༻ ղܾҊ React x Railsظ(2016/2ʙ2017/8) ޙ൒
25. Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳ໰୊͸ʁ ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻ ॊೈͳAPIͷ࠾༻ => ࢀরܥΫΤϦʹGraphQLΛ࠾༻ ղܾҊ React x Railsظ(2016/2ʙ2017/8) ޙ൒
26. ݱࡏ
27. ΤϯδχΞ10ਓ FE(web+ΞϓϦ)ͱBEͰΤϯδχΞνʔϜΛ෼཭ ։ൃݱ৔ Node.js React/Redux Apollo Client ΞʔΩςΫνϟ ݱࡏ(2017/9ʙ) Apollo React/ Redux Node.js REST API GraphQL )5.- +40/ +40/
28. ཧ૝͸Ͳ͜Ͱ΋࠶ར༻Ͱ͖Δ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
29. Partial Response Batch Request σϑΥϧτػೳ graphdoc GraphiQL ApolloͰͷ࣮૷ϫʔΫϑϩʔ ։ൃޮ཰ੑ GraphQLͷ͝঺հ
30. ࢦఆͨ͠σʔλͷΈऔಘ Partial Response
31. Ұ౓ͷAPIίʔϧͰෳ਺ͷϦιʔεΛऔಘ Batch Request
32. Partial Response Batch Request σϑΥϧτػೳ graphdoc GraphiQL ApolloͰͷ࣮૷ϫʔΫϑϩʔ ։ൃޮ཰ੑ GraphQLͷ͝঺հ
33. graphdoc graphqlAPIͷ࣮૷͔ΒυΩϡϝϯτΛੜ੒
34. graphdoc graphqlAPIͷ࣮૷͔ΒυΩϡϝϯτΛੜ੒
35. GraphiQL(άϥϑΟΫϧ) ϦΫΤετ Ϩεϙϯε GraphQLͷΫΤϦ࣮ߦ؀ڥ
36. 1.graphdocͷυΩϡϝϯτݟΔ 2.GraphiQLͰΫΤϦςετ 3.jsxʹΫΤϦΛίϐϖ ApolloͰͷ࣮૷ϫʔΫϑϩʔ
37. ApolloͰͷ࣮૷ϫʔΫϑϩʔ
38. ࠓޙ͸ʁ
39. Rails/Swift/Kotlin෦෼ͷஔ͖׵͑ ViewϑϨʔϜϫʔΫͷ౷Ұ ΍͍͖͍ͬͯͨ͜ͱ
40. ݱࡏ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&5
    45":
    ๏ਓ޲͚؅ཧαʔϏε 41"$&."3,&5 Apollo React/Redux /PEFKT 3BJMT '& #& Swift Kotlin React/Redux ௨৴ͷྲྀΕ ϗετ޲͚ΞϓϦ ήετ޲͚ΞϓϦ KT non-js React 3FBDU/BUJWF
41. ະདྷ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&5
    45":
    ๏ਓ޲͚؅ཧαʔϏε 41"$&."3,&5 Apollo React/Redux /PEFKT /PEFKT '& #& Apollo React/Redux ௨৴ͷྲྀΕ ήετ޲͚ΞϓϦ ϗετ޲͚ΞϓϦ KT non-js Apollo React/Redux Apollo React/Redux 3FBDU/BUJWF 3FBDU/BUJWF
42. ૊৫΍αʔϏεͷঢ়گ࣍ୈͰϕλʔͳબ୒ࢶΛબͿ ϩʔϯνʹ͸RailsσϑΥϧτͰՃ଎͢Δ தن໛Ҏ্ͷ։ൃʹ͸Virtul DOM αʔϏεԣల։ͳΒϢχόʔαϧJS΋͋Γ ·ͱΊ
43. React / JavaScript / iOS / Android UI / UX ʹ΋ͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍౓ʢਫ༵೔ʣ ΤϯδχΞ࠾༻தͰ͢ʂ