Forward Universal WebApps

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

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