Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Haruhiko Kobayashi

February 26, 2018
Tweet

More Decks by Haruhiko Kobayashi

Other Decks in Programming

Transcript

  1. )BSVIJLP,PCBZBTIJ
    εϖʔεϚʔέοτͷ
    ΞʔΩςΫνϟมભ

    View full-size slide

  2. Haruhiko Kobayashi
    Tech Lead
    εϖʔεϚʔέοτ
    1ਓ໨ͷΤϯδχΞͱͯ͠ࢀՃ
    ࣗݾ঺հ

    View full-size slide

  3. εϖʔεΛିΓ͍ͨਓͱआ͍ͨ͠ਓΛϚονϯάͤ͞Δϓϥοτ
    ϑΥʔϜ
    αʔϏε঺հ
    आΓ͍ͨਓ
    ήετ

    आ͍ͨ͠ਓ
    ϗετ

    View full-size slide

  4. 1࣌ؒ୯ҐͰεϖʔεΛି͠आΓ(2014/4ʙ)
    SPACEMARKET

    View full-size slide

  5. ॓ധεϖʔεΛି͠आΓ(2017/9ʙ)
    SPACEMARKET STAY

    View full-size slide

  6. ࣾһͷ༧໿ΛҰׅ؅ཧ(2017/11ʙ)
    ๏ਓ؅ཧαʔϏε

    View full-size slide

  7. • ήετ޲͚ iOS(2015/6ʙ) Android(2017/2ʙ)
    • ϗετ޲͚ iOSɺAndroid(2017/11ʙ)
    ωΠςΟϒΞϓϦ

    View full-size slide

  8. εϖʔεϚʔέοτͷٕज़ελοΫ
    ΞʔΩςΫνϟͷมભ
    ϩʔϯνॳظ(2014/8ʙ2016/1)
    React x Railsظ(2016/2ʙ2017/8)
    ݱࡏ(2017/9ʙ)
    ࠓޙ͸ʁ
    ࠓ೔࿩͢͜ͱ
    Agenda

    View full-size slide

  9. εϖʔεϚʔέοτͷٕज़ελοΫ

    View full-size slide

  10. Rails
    React
    SPACEMARKET
    Node.js
    React/Redux
    Apollo Client
    SPACEMARKET STAY / ๏ਓ؅ཧαʔϏε
    webٕज़ελοΫ
    API
    Rails

    View full-size slide

  11. Swift
    Kotlin
    ήετ޲͚ΞϓϦ
    ReactNative
    ϗετ޲͚ΞϓϦ
    ΞϓϦٕज़ελοΫ

    View full-size slide

  12. ֓ཁਤ
    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

    View full-size slide

  13. ΞʔΩςΫνϟͷมભ

    View full-size slide

  14. ϩʔϯνॳظ

    View full-size slide

  15. ΤϯδχΞ2ਓ
    ఏڙαʔϏε͸SPACEMARKETͷΈ
    ։ൃݱ৔
    RailsͷσϑΥϧτ
    ಠࣗFEϑϨʔϜϫʔΫ
    HTMLΛฦ͢ΤϯυϙΠϯτ
    ES5
    ΞʔΩςΫνϟ
    ϩʔϯνॳظ(2014/8ʙ2016/1) લ൒
    jQuery
    Rails
    )5.-
    )5.-

    View full-size slide

  16. ΤϯδχΞ2ਓ -> 4ਓͱ૿͍͑ͯ͘
    iOSΞϓϦ͕ϦϦʔε(2015/6)
    ઐ༻ͷREST APIΛ։ൃ
    มԽ
    ૊৫ɾαʔϏεͷ੒௕ͱͱ΋ʹFEͷόά͕૿͖͑ͯͨ
    ՝୊
    ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ൒

    View full-size slide

  17. jQuery͕DOM(globalม਺)Λ௚઀৮Δࣄ
    PRͷίʔυϨϏϡʔͰ͸DOMͷঢ়ଶ·Ͱ͸ݟ͑ͳ͍
    ຊ࣭తͳ໰୊͸ʁ
    globalม਺Λѻ͏ͷΛ΍ΊΔ
    ղܾҊ
    ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ൒

    View full-size slide

  18. jQuery͕DOM(globalม਺)Λ௚઀৮Δࣄ
    PRͷίʔυϨϏϡʔͰ͸DOMͷঢ়ଶ·Ͱ͸ݟ͑ͳ͍
    ຊ࣭తͳ໰୊͸ʁ
    globalม਺Λѻ͏ͷΛ΍ΊΔ => ReactͷVirtual DOM
    ղܾҊ
    ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ൒

    View full-size slide

  19. React x Railsظ

    View full-size slide

  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

    View full-size slide

  21. globalม਺ʹ৮Βͳ͘ͳͬͨ
    SSR(ϩδοΫ/ςϯϓϨʔτͷ2ॏ؅ཧͷഉআ)
    όάͷ࡟ݮ
    DOMͷશߋ৽͔Βࠩ෼ߋ৽ʹҠߦ
    ύϑΥʔϚϯεͷ޲্
    React࠾༻ͷͶΒ͍

    View full-size slide

  22. ΤϯδχΞ4ਓ -> 8ਓͱ૿͍͑ͯ͘
    σόΠεͷ૿Ճ(ήετ޲͚AndroidΞϓϦ)
    ৽نαʔϏε͕ଓʑ૿Ճ༧ఆ(ϗετ޲͚ΞϓϦɺStayɺ๏ਓ޲͚)
    มԽ
    ৽ظαʔϏεͷFE։ൃʹ͕͔͔࣌ؒΔ
    FE։ൃͷཁٻʹREST API͕͍ͭͯ͜Εͳ͍
    ՝୊
    React x Railsظ(2016/2ʙ2017/8) ޙ൒

    View full-size slide

  23. Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍
    RESTfulͳAPIʹॊೈੑ͕ͳ͍
    ຊ࣭తͳ໰୊͸ʁ
    ViewϑϨʔϜϫʔΫΛ౷Ұ
    ॊೈͳAPIͷ࠾༻
    ղܾҊ
    React x Railsظ(2016/2ʙ2017/8) ޙ൒

    View full-size slide

  24. Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍
    RESTfulͳAPIʹॊೈੑ͕ͳ͍
    ຊ࣭తͳ໰୊͸ʁ
    ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻
    ॊೈͳAPIͷ࠾༻
    ղܾҊ
    React x Railsظ(2016/2ʙ2017/8) ޙ൒

    View full-size slide

  25. Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍
    RESTfulͳAPIʹॊೈੑ͕ͳ͍
    ຊ࣭తͳ໰୊͸ʁ
    ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻
    ॊೈͳAPIͷ࠾༻ => ࢀরܥΫΤϦʹGraphQLΛ࠾༻
    ղܾҊ
    React x Railsظ(2016/2ʙ2017/8) ޙ൒

    View full-size slide

  26. ΤϯδχΞ10ਓ
    FE(web+ΞϓϦ)ͱBEͰΤϯδχΞνʔϜΛ෼཭
    ։ൃݱ৔
    Node.js
    React/Redux
    Apollo Client
    ΞʔΩςΫνϟ
    ݱࡏ(2017/9ʙ)
    Apollo
    React/
    Redux
    Node.js
    REST API
    GraphQL
    )5.-
    +40/
    +40/

    View full-size slide

  27. ཧ૝͸Ͳ͜Ͱ΋࠶ར༻Ͱ͖Δ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

    View full-size slide

  28. Partial Response
    Batch Request
    σϑΥϧτػೳ
    graphdoc
    GraphiQL
    ApolloͰͷ࣮૷ϫʔΫϑϩʔ
    ։ൃޮ཰ੑ
    GraphQLͷ͝঺հ

    View full-size slide

  29. ࢦఆͨ͠σʔλͷΈऔಘ
    Partial Response

    View full-size slide

  30. Ұ౓ͷAPIίʔϧͰෳ਺ͷϦιʔεΛऔಘ
    Batch Request

    View full-size slide

  31. Partial Response
    Batch Request
    σϑΥϧτػೳ
    graphdoc
    GraphiQL
    ApolloͰͷ࣮૷ϫʔΫϑϩʔ
    ։ൃޮ཰ੑ
    GraphQLͷ͝঺հ

    View full-size slide

  32. graphdoc
    graphqlAPIͷ࣮૷͔ΒυΩϡϝϯτΛੜ੒

    View full-size slide

  33. graphdoc
    graphqlAPIͷ࣮૷͔ΒυΩϡϝϯτΛੜ੒

    View full-size slide

  34. GraphiQL(άϥϑΟΫϧ)
    ϦΫΤετ Ϩεϙϯε
    GraphQLͷΫΤϦ࣮ߦ؀ڥ

    View full-size slide

  35. 1.graphdocͷυΩϡϝϯτݟΔ
    2.GraphiQLͰΫΤϦςετ
    3.jsxʹΫΤϦΛίϐϖ
    ApolloͰͷ࣮૷ϫʔΫϑϩʔ

    View full-size slide

  36. ApolloͰͷ࣮૷ϫʔΫϑϩʔ

    View full-size slide

  37. Rails/Swift/Kotlin෦෼ͷஔ͖׵͑
    ViewϑϨʔϜϫʔΫͷ౷Ұ
    ΍͍͖͍ͬͯͨ͜ͱ

    View full-size slide

  38. ݱࡏ
    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

    View full-size slide

  39. ະདྷ
    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

    View full-size slide

  40. ૊৫΍αʔϏεͷঢ়گ࣍ୈͰϕλʔͳબ୒ࢶΛબͿ
    ϩʔϯνʹ͸RailsσϑΥϧτͰՃ଎͢Δ
    தن໛Ҏ্ͷ։ൃʹ͸Virtul DOM
    αʔϏεԣల։ͳΒϢχόʔαϧJS΋͋Γ
    ·ͱΊ

    View full-size slide

  41. React / JavaScript / iOS / Android
    UI / UX ʹ΋ͩ͜ΘΓ͍ͨ
    ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢
    िҰϦϞʔτϫʔΫ੍౓ʢਫ༵೔ʣ
    ΤϯδχΞ࠾༻தͰ͢ʂ

    View full-size slide