$30 off During Our Annual Pro Sale. View Details »

Forward Universal WebApps

Forward Universal WebApps

ubb.jp で発表した Forward Universal WebApps の覚悟のトークです。

Yosuke Furukawa
PRO

October 14, 2016
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Forward Universal WebApps
    2016/10/14 @ ubb.jp

    View Slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View Slide

  3. [PR]

    View Slide

  4. View Slide

  5. View Slide

  6. universal (isomorphic)

    View Slide

  7. universal (isomorphic)
    Server Side Rendering???
    Source code sharing between client and
    server ????
    SEO???
    Only Node.js ???

    View Slide

  8. View Slide

  9. universal ∋ isomorphic

    View Slide

  10. universal (isomorphic)
    Why / How

    View Slide

  11. universal (isomorphic)
    Why / How

    View Slide

  12. History

    View Slide

  13. past 2012 2013 2014 2015 2016 future

    View Slide

  14. past 2012 2013 2014 2015 2016 future
    8FC"QQTCBTFEPO)5.-
    XJUI+4

    View Slide

  15. past 2012 2013 2014 2015 2016 future
    1BSUJBM4JOHMF1BHF"QQT

    View Slide

  16. past 2012 2013 2014 2015 2016 future
    3JDI4JOHMF1BHF8FC"QQT

    View Slide

  17. Isomorphic Survival Guide by @koichik
    https://speakerdeck.com/koichik/isomorphic-survival-guide

    View Slide

  18. Client Server
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    WebApps based on HTML

    View Slide

  19. Client Server
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    Partial SPA
    'SPOUFOE
    -PHJDT

    View Slide

  20. Client Server
    #BDLFOE
    -PHJDT
    Rich Single Page Web Apps
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT

    View Slide

  21. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT

    View Slide

  22. Look back to History
    • ClientͱServerͰϩδοΫ͕ߦͬͨΓདྷͨΓ͍ͯ͠Δ
    • ͜͜࠷ۙ͸ΫϥΠΞϯτͷϦιʔε͕૿͑ɺRichͳ΢Σ
    ϒΞϓϦέʔγϣϯ͕૿͑ͨɻ
    • Server͕ϚΠΫϩαʔϏεͳͲͰAPIԽ͢ΔྲྀΕ΋͋
    Γɺthin-Server / thick-Client ͳํ޲ʹͳ͍ͬͯΔ

    View Slide

  23. ͕ͩɺ଴ͬͯཉ͍͠
    ຊ౰ʹͦΕ͸ΫϥΠΞϯτͷ໾ׂ͔
    Ͳ͏͔

    View Slide

  24. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT

    View Slide

  25. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    ͜͜Ͱ΍͍ͬͯΔ͜ͱɿ
    "1*ͷू໿ॲཧ
    "1*ϨεϙϯεΛ6*༻ʹՃ޻
    "1*SFTQPOTF$BDIF
    $JSDVJU#SFBLFS
    FUD

    View Slide

  26. ͳΜͰ͜͏ͳΔͷ͔

    View Slide

  27. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    ΫϥΠΞϯτɿ
    ը໘ͱಈ͖Λ࡞Δɻ
    αʔόʔɿ
    ಠཱͨ͠ϏδωεϩδοΫΛ
    ఏڙ͢Δ

    View Slide

  28. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    ΫϥΠΞϯτɿ
    ը໘ͱಈ͖Λ࡞Δɻ
    αʔόʔɿ
    ಠཱͨ͠ϏδωεϩδοΫΛ
    ఏڙ͢Δ
    ͋ͱɺ૊৫ͷน

    View Slide

  29. past 2012 2013 2014 2015 2016 future
    3JDI4JOHMF1BHF8FC"QQT
    XJUI#''

    View Slide

  30. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT

    View Slide

  31. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    Backend
    For Frontend
    #BDLFOE
    -PHJDT

    View Slide

  32. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    Backend
    For Frontend
    #BDLFOE
    -PHJDT
    ΫϥΠΞϯτ͸ຊདྷͷ6*૚ͷ
    ॲཧʹ஫ྗͰ͖Δ

    View Slide

  33. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    Backend
    For Frontend
    #BDLFOE
    -PHJDT
    ը໘Λߏங͢Δखॿ͚Λ͢Δ
    "1*ฒྻݺͼग़͠
    $BDIF΋ͨ͘͞Μ࣋ͯΔ
    ԚΕ໾ΛҾ͖ड͚ΒΕΔ

    View Slide

  34. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    Backend
    For Frontend using Node.js
    #BDLFOE
    -PHJDT
    <13>͜͜Λ/PEFKT
    ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕

    View Slide

  35. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    Ұ෦ͷ'SPOUFOE-PHJDΛڞ
    ௨ԽͰ͖Δ
    'SPOUFOE
    -PHJDT
    Backend
    For Frontend using Node.js

    View Slide

  36. Client
    Server
    micro services
    Rich Single Page Web Apps with MicroServices
    'SPOUFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    #BDLFOE
    -PHJDT
    ը໘ͷWBMJEBUJPO
    )5.-ੜ੒FUD
    'SPOUFOE
    -PHJDT
    Backend
    For Frontend using Node.js

    View Slide

  37. Backend For Frontend
    • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ
    ܨ͙ௐఀ໾
    • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ
    • APIͷ·ͱΊ໾
    • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly
    • BFF Λ Node.js ʹ͢Δͱ͞Βʹ
    • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ
    • Server Side Rendering / validation logic etc

    View Slide

  38. Server Side Rendering

    View Slide

  39. View Slide

  40. View Slide

  41. Server Side Rendering
    • Ͳ͜·Ͱ଎͘ͳͬͯ΋ϨΠςϯγ(ߦ͔ͬͯΒؼͬͯ͘
    Δ·Ͱͷ࣌ؒ)ͱ͍͏΋ͷ͕͋Δ
    • Boston <=> Stanford ؒͳΒݱ࣌఺Ͱ΋

    ໿50ms
    • SPA͸ॳظϖʔδͷϩʔυʹ͓͍ͯ͸ෆར

    View Slide

  42. Server Side Rendering
    • UI૚ͷ࢓ࣄΛݞ୅ΘΓ͢Δ *͚ͩ͡Όͳ͍*
    • 2ͭͷޮՌ
    • ॳظϨϯμϦϯάߴ଎Խ
    • Search Engine Friendly (SEO)

    View Slide

  43. ·ͱΊ (why)
    • Backend For Frontend Λ࡞Δͱ thin ͳ API αʔόͱͷௐఀ
    ໾Λ୲͑Δ
    • ΫϥΠΞϯτ͸UI૚ͷߏஙʹ஫ྗͰ͖Δ
    • Node.js Ͱ BFF Λ࡞Δͱ ϑϩϯτͷ࡞ۀ΋ڞ௨ԽͰ͖Δ
    • ಛʹ Server Side Rendering Λ͢ΔͱSPA ͷॳظϨϯμ
    ϦϯάͱSEOͷ໰୊ΛղܾͰ͖Δɻ

    View Slide

  44. universal (isomorphic)
    Why / How

    View Slide

  45. architect voice

    View Slide

  46. SPAͱ֮ޛ by @teppeis
    http://www.slideshare.net/teppeis/spa-66093931

    View Slide

  47. CLIENT SIDE OF ‭‭‭‭‭ FRESH! by @ahomu
    https://speakerdeck.com/ahomu/client-side-of-fresh

    View Slide

  48. Isomorphic Architecture Λ࣮૷ͯ͠Δͱ͖ͷࡉ͔͍ΞϨίϨ
    by @ahomu
    https://havelog.ayumusato.com/develop/javascript/e682-
    universal_architecture_tips.html

    View Slide

  49. ʂʂʂʂ֮ޛ͸ඞཁʂʂʂʂ

    View Slide

  50. ͔ͩΒఘΊΔʁʁʁ

    View Slide

  51. NO!!!!!!!!!!!!!

    View Slide

  52. We (Recruit Techs) are creating
    universal (isomorphic) webapps

    View Slide

  53. ࠓ͸2ͭαʔϏε։ൃதɻ
    1ͭ͸ 11݄ϦϦʔε༧ఆ
    ΋͏1ͭ͸12݄ϦϦʔε༧ఆ
    ͦ͜ͰஷΊͨϊ΢ϋ΢ΛશαʔϏεͷΨΠ
    υϥΠϯͱͯ͠ϦΫϧʔτશମͰ
    ڞ௨Խ͢Δ(༧ఆ)

    View Slide

  54. ϦΫϧʔτͷWebApps͸ී௨ͷα
    Πτ͕ଟ͍ɻ

    View Slide

  55. ؆୯ʹ΍Δํ๏͸ͳ͍͚Ͳ
    Should/How-to͸͋Δ

    View Slide

  56. ڭՊॻతͳ΋ͷ

    View Slide

  57. 7 principles of Rich Web
    Applications

    View Slide

  58. 7 principles of Rich Web
    Applications
    • socket.io ͷ࡞ऀ
    • Guillermo Rauch ࢯఏএ
    • ຋༁
    • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415

    View Slide

  59. 7 principles of Rich Web Applications
    • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ
    • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ
    • σʔλͷมߋʹ൓Ԡ͢Δ
    • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ
    • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ
    • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ
    • ৼΔ෣͍Λ༧ଌ͢Δ

    View Slide

  60. ΄΅͜Εʹै͍ͳ͕Βॻ͍ͯΔ

    View Slide

  61. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢
    Δ
    • Googleͷྫ

    View Slide

  62. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢
    Δ
    • CloudUpͷྫ

    View Slide

  63. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢
    Δ
    • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ
    • ޫͷ଎౓ʹ͸উͯͳ͍
    • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢

    View Slide

  64. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢
    Δ
    • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ
    • ޫͷ଎౓ʹ͸উͯͳ͍
    • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢
    • (͝·͔͢ͱ΋ݴ͏)

    View Slide

  65. σʔλͷมߋʹ൓Ԡ͢Δ
    • ߋ৽ॲཧΛߦΘͳͯ͘΋࣮ࡍʹσʔλΛಉظ
    ͢Δɻ
    • มߋ͕ൃੜͨ͠Βͦͷ౎౓σʔλΛมߋ͢Δɻ

    View Slide

  66. historyΛյ͢ͳ

    View Slide

  67. historyΛյ͢ͳ

    View Slide

  68. historyΛյ͢ͳ

    View Slide

  69. historyΛյ͢ͳ
    • ํ๏࿦
    • historyͷ֦ுΛݕ౼͢Δ
    • history.pushState/popState/replaceState
    • localStorage/sessionStorageͷݕ౼ͳͲ

    View Slide

  70. ৼΔ෣͍Λ༧ଌ͠Α͏
    • ϨΠςϯγʔͷนΛ௒͑Ζ

    View Slide

  71. ৼΔ෣͍Λ༧ଌ͠Α͏
    • ແݶεΫϩʔϧ x ϖʔδઌಡΈ

    View Slide

  72. ৼΔ෣͍Λ༧ଌ͠Α͏
    • Ϣʔβʔͷಈ͖Λ༧ଌ͢Δɻ
    • Google Map ͷઌಡΈͷΑ͏ͳߟ͑
    • ແݶϖʔδωʔγϣϯΛ࣮૷ͭͭ͠ɺ࣍ͷϖʔ
    δͱલͷϖʔδ͸͓࣋ͬͯ͘ɻ্޲͖ʹεΫ
    ϩʔϧͨ͠Β͞ΒʹલͷϖʔδΛɺԼ޲͖ʹ
    εΫϩʔϧͨ͠Β͞Βʹ࣍ͷϖʔδΛɻ

    View Slide

  73. ·ͱΊ (How)
    • ۪௚ʹ7ͭͷݪଇΛಥ͖٧ΊΔ
    • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ
    • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ
    • σʔλͷมߋʹ൓Ԡ͢Δ
    • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ
    • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ
    • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ
    • ৼΔ෣͍Λ༧ଌ͢Δ

    View Slide

  74. ΋͏Ұճݴ͏

    View Slide

  75. ʂʂʂʂ֮ޛ͸ඞཁʂʂʂʂ

    View Slide

  76. ͔ͩΒఘΊΔʁʁʁ

    View Slide

  77. NO!!!!!!!!!!!!!

    View Slide

  78. ΈΜͳͰ֮ޛ͍͖ͯ͠·͠ΐ͏

    View Slide