Forward Universal WebApps

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

Transcript

1. Forward Universal WebApps 2016/10/14 @ ubb.jp
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. [PR]
6. universal (isomorphic)
7. universal (isomorphic) Server Side Rendering??? Source code sharing between client and server ???? SEO??? Only Node.js ???
9. universal ∋ isomorphic
10. universal (isomorphic) Why / How
11. universal (isomorphic) Why / How
12. History
13. past 2012 2013 2014 2015 2016 future
14. past 2012 2013 2014 2015 2016 future 8FC
    "QQT
    CBTFE
    PO
    )5.-
    XJUI
    +4
15. past 2012 2013 2014 2015 2016 future 1BSUJBM
    4JOHMF
    1BHF
    "QQT
16. past 2012 2013 2014 2015 2016 future 3JDI
    4JOHMF
    1BHF
    8FC
    "QQT
17. Isomorphic Survival Guide by @koichik https://speakerdeck.com/koichik/isomorphic-survival-guide
18. Client Server 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT WebApps based on HTML
19. Client Server 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT Partial SPA 'SPOUFOE
    -PHJDT
20. Client Server #BDLFOE
    -PHJDT Rich Single Page Web Apps 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT
21. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT
22. Look back to History • ClientͱServerͰϩδοΫ͕ߦͬͨΓདྷͨΓ͍ͯ͠Δ • ͜͜࠷ۙ͸ΫϥΠΞϯτͷϦιʔε͕૿͑ɺRichͳ΢Σ ϒΞϓϦέʔγϣϯ͕૿͑ͨɻ • Server͕ϚΠΫϩαʔϏεͳͲͰAPIԽ͢ΔྲྀΕ΋͋ Γɺthin-Server / thick-Client ͳํ޲ʹͳ͍ͬͯΔ
23. ͕ͩɺ଴ͬͯཉ͍͠ ຊ౰ʹͦΕ͸ΫϥΠΞϯτͷ໾ׂ͔ Ͳ͏͔
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
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
26. ͳΜͰ͜͏ͳΔͷ͔
27. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT ΫϥΠΞϯτɿ
    ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ
    ಠཱͨ͠ϏδωεϩδοΫΛ
    ఏڙ͢Δ
28. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT ΫϥΠΞϯτɿ
    ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ
    ಠཱͨ͠ϏδωεϩδοΫΛ
    ఏڙ͢Δ ͋ͱɺ૊৫ͷน
29. past 2012 2013 2014 2015 2016 future 3JDI
    4JOHMF
    1BHF
    8FC
    "QQT
    XJUI
    #''
30. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT
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
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*૚ͷ ॲཧʹ஫ྗͰ͖Δ
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΋ͨ͘͞Μ࣋ͯΔ
    ԚΕ໾ΛҾ͖ड͚ΒΕΔ
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
    
    ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕
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
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
37. Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ໾ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ໾ • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
38. Server Side Rendering
41. Server Side Rendering • Ͳ͜·Ͱ଎͘ͳͬͯ΋ϨΠςϯγ(ߦ͔ͬͯΒؼͬͯ͘ Δ·Ͱͷ࣌ؒ)ͱ͍͏΋ͷ͕͋Δ • Boston <=> Stanford ؒͳΒݱ࣌఺Ͱ΋
 ໿50ms • SPA͸ॳظϖʔδͷϩʔυʹ͓͍ͯ͸ෆར
42. Server Side Rendering • UI૚ͷ࢓ࣄΛݞ୅ΘΓ͢Δ *͚ͩ͡Όͳ͍* • 2ͭͷޮՌ • ॳظϨϯμϦϯάߴ଎Խ • Search Engine Friendly (SEO)
43. ·ͱΊ (why) • Backend For Frontend Λ࡞Δͱ thin ͳ API αʔόͱͷௐఀ ໾Λ୲͑Δ • ΫϥΠΞϯτ͸UI૚ͷߏஙʹ஫ྗͰ͖Δ • Node.js Ͱ BFF Λ࡞Δͱ ϑϩϯτͷ࡞ۀ΋ڞ௨ԽͰ͖Δ • ಛʹ Server Side Rendering Λ͢ΔͱSPA ͷॳظϨϯμ ϦϯάͱSEOͷ໰୊ΛղܾͰ͖Δɻ
44. universal (isomorphic) Why / How
45. architect voice
46. SPAͱ֮ޛ by @teppeis http://www.slideshare.net/teppeis/spa-66093931
47. CLIENT SIDE OF ‭‭‭‭‭ FRESH! by @ahomu https://speakerdeck.com/ahomu/client-side-of-fresh
48. Isomorphic Architecture Λ࣮૷ͯ͠Δͱ͖ͷࡉ͔͍ΞϨίϨ by @ahomu https://havelog.ayumusato.com/develop/javascript/e682- universal_architecture_tips.html
49. ʂʂʂʂ֮ޛ͸ඞཁʂʂʂʂ
50. ͔ͩΒఘΊΔʁʁʁ
51. NO!!!!!!!!!!!!!
52. We (Recruit Techs) are creating universal (isomorphic) webapps
53. ࠓ͸2ͭαʔϏε։ൃதɻ 1ͭ͸ 11݄ϦϦʔε༧ఆ ΋͏1ͭ͸12݄ϦϦʔε༧ఆ ͦ͜ͰஷΊͨϊ΢ϋ΢ΛશαʔϏεͷΨΠ υϥΠϯͱͯ͠ϦΫϧʔτશମͰ ڞ௨Խ͢Δ(༧ఆ)
54. ϦΫϧʔτͷWebApps͸ී௨ͷα Πτ͕ଟ͍ɻ
55. ؆୯ʹ΍Δํ๏͸ͳ͍͚Ͳ Should/How-to͸͋Δ
56. ڭՊॻతͳ΋ͷ
57. 7 principles of Rich Web Applications
58. 7 principles of Rich Web Applications • socket.io ͷ࡞ऀ • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
59. 7 principles of Rich Web Applications • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ • σʔλͷมߋʹ൓Ԡ͢Δ • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ෣͍Λ༧ଌ͢Δ
60. ΄΅͜Εʹै͍ͳ͕Βॻ͍ͯΔ
61. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • Googleͷྫ
62. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • CloudUpͷྫ
63. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢
64. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢ • (͝·͔͢ͱ΋ݴ͏)
65. σʔλͷมߋʹ൓Ԡ͢Δ • ߋ৽ॲཧΛߦΘͳͯ͘΋࣮ࡍʹσʔλΛಉظ ͢Δɻ • มߋ͕ൃੜͨ͠Βͦͷ౎౓σʔλΛมߋ͢Δɻ
66. historyΛյ͢ͳ
67. historyΛյ͢ͳ
68. historyΛյ͢ͳ
69. historyΛյ͢ͳ • ํ๏࿦ • historyͷ֦ுΛݕ౼͢Δ • history.pushState/popState/replaceState • localStorage/sessionStorageͷݕ౼ͳͲ
70. ৼΔ෣͍Λ༧ଌ͠Α͏ • ϨΠςϯγʔͷนΛ௒͑Ζ
71. ৼΔ෣͍Λ༧ଌ͠Α͏ • ແݶεΫϩʔϧ x ϖʔδઌಡΈ
72. ৼΔ෣͍Λ༧ଌ͠Α͏ • Ϣʔβʔͷಈ͖Λ༧ଌ͢Δɻ • Google Map ͷઌಡΈͷΑ͏ͳߟ͑ • ແݶϖʔδωʔγϣϯΛ࣮૷ͭͭ͠ɺ࣍ͷϖʔ δͱલͷϖʔδ͸͓࣋ͬͯ͘ɻ্޲͖ʹεΫ ϩʔϧͨ͠Β͞ΒʹલͷϖʔδΛɺԼ޲͖ʹ εΫϩʔϧͨ͠Β͞Βʹ࣍ͷϖʔδΛɻ
73. ·ͱΊ (How) • ۪௚ʹ7ͭͷݪଇΛಥ͖٧ΊΔ • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ • σʔλͷมߋʹ൓Ԡ͢Δ • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ෣͍Λ༧ଌ͢Δ
74. ΋͏Ұճݴ͏
75. ʂʂʂʂ֮ޛ͸ඞཁʂʂʂʂ
76. ͔ͩΒఘΊΔʁʁʁ
77. NO!!!!!!!!!!!!!
78. ΈΜͳͰ֮ޛ͍͖ͯ͠·͠ΐ͏