Movatterモバイル変換

[0]ホーム
URL:

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

Forward Universal WebApps

Avatar for Yosuke Furukawa Yosuke Furukawa
October 14, 2016

Forward Universal WebApps

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

Avatar for Yosuke Furukawa

Yosuke Furukawa

October 14, 2016
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa

Other Decks in Programming

See All in Programming

Featured

See All Featured

Transcript

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

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. [PR]

  4. None
  5. None

  6. universal (isomorphic)

  7. universal (isomorphic) Server Side Rendering??? Source code sharing between client

    and server ???? SEO??? Only Node.js ???
  8. None

  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"QQTCBTFEPO)5.- XJUI+4

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

  16. past 2012 2013 2014 2015 2016 future 3JDI4JOHMF1BHF8FC"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 3JDI4JOHMF1BHF8FC"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

  39. None
  40. None

  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. ΈΜͳͰ֮ޛ͍͖ͯ͠·͠ΐ͏

[8]ページ先頭
©2009-2025 Movatter.jp