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

Forward Universal WebApps

Forward Universal WebApps

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

Yosuke Furukawa

October 14, 2016
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Client Server micro services Rich Single Page Web Apps with

    MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
  2. 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
  3. 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
  4. Client Server micro services Rich Single Page Web Apps with

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

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

    MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
  7. 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
  8. 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*૚ͷ ॲཧʹ஫ྗͰ͖Δ
  9. 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΋ͨ͘͞Μ࣋ͯΔ ԚΕ໾ΛҾ͖ड͚ΒΕΔ
  10. 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 ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕
  11. 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
  12. 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
  13. Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ໾ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ໾

    • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
  14. ·ͱΊ (why) • Backend For Frontend Λ࡞Δͱ thin ͳ API

    αʔόͱͷௐఀ ໾Λ୲͑Δ • ΫϥΠΞϯτ͸UI૚ͷߏஙʹ஫ྗͰ͖Δ • Node.js Ͱ BFF Λ࡞Δͱ ϑϩϯτͷ࡞ۀ΋ڞ௨ԽͰ͖Δ • ಛʹ Server Side Rendering Λ͢ΔͱSPA ͷॳظϨϯμ ϦϯάͱSEOͷ໰୊ΛղܾͰ͖Δɻ
  15. 7 principles of Rich Web Applications • socket.io ͷ࡞ऀ •

    Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
  16. 7 principles of Rich Web Applications • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ

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

    • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ෣͍Λ༧ଌ͢Δ