7 Principles of Rich Web Apps

Node学園付属小学校の基調講演で話した『リッチなウェブアプリケーションのための7つの原則』の話です。

Transcript

1. 7 principles of Rich Web Applications @yosuke_furukawa
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. Node.js೔ຊϢʔβʔάϧʔϓ୅ද io.js Evangelist / io.js Collaborator
4. WebApps 2016
5. 7 principles of Rich Web Applications • socket.io ͷ࡞ऀ • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
6. 7 principles of Rich Web Applications • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ • σʔλͷมߋʹ൓Ԡ͢Δ • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ෣͍Λ༧ଌ͢Δ
7. αʔόʔͰ΋ϖʔδΛϨϯμϦ ϯά͢Δ • server side web apps vs single page apps • ͜͏͍͏ରཱߏ଄ͰޠΒΕͯ͘Δ͜ͱ͕ଟ͍ • Α͋͘Δͷ͸ “SEO” ͷͨΊʹ͸αʔόʔαΠυϨ ϯμϦϯάͨ͠ํ͕͍͍ͱ͍͏΋ͷɻ • UXͱੑೳΛ࠷దʹ͢Δʹ͸྆ํ΍Δͷ͕Ұ൪ྑ͍
8. αʔόʔͰ΋ϖʔδΛϨϯμϦ ϯά͢Δ
9. αʔόʔͰ΋ϖʔδΛϨϯμϦ ϯά͢Δ
10. αʔόʔͰ΋ϖʔδΛϨϯμϦ ϯά͢Δ • Ͳ͜·Ͱ଎͘ͳͬͯ΋ϨΠςϯγ(ߦ͔ͬͯΒ ؼͬͯ͘Δ·Ͱͷ࣌ؒ)ͱ͍͏΋ͷ͕͋Δ • Boston <=> Stanford ؒͳΒݱ࣌఺Ͱ΋
 ໿50ms • SPA͸ॳظϖʔδͷϩʔυʹ͓͍ͯ͸ෆར
11. αʔόʔͰ΋ϖʔδΛϨϯμϦ ϯά͢Δ • SPA͸ॳظϖʔδͷϩʔυʹ͓͍ͯ͸ෆར • ߦ͔ͬͯΒؼͬͯ͘Δ·Ͱͷ͕͔͔࣌ؒΔɻ • JSONΛड͚औͬͯϖʔδΛߏ੒͠ɺimage ΍audioͳͲͷ৘ใΛ΋Β͏ɻɻɻ
12. αʔόʔͰ΋ϖʔδΛϨϯμϦ ϯά͢Δ • ͡Ό͋Ͳ͏͢Δ͔ʁ • ॳظϖʔδͷϩʔυͰ͸αʔόʔαΠυϨϯμϦ ϯά • ͦͷޙͷߋ৽͸SPAͰ΍Δ • ϋΠϒϦουͷΞϓϩʔνͰϨΠςϯγΛ࠷খݶ ʹͯ͠ɺUX΋ੑೳ΋࠷దԽ͢Δɻ
13. αʔόʔͰ΋ϖʔδΛϨϯμϦ ϯά͢Δ • ํ๏࿦͸ʁ • isomorphic web application • universal web apps ౳ͰޠΒΕͯΔ • fluxible౳Web Application Frameworkͷ࣮ ૷΋͋Δɻ
14. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • Googleͷྫ
15. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • CloudUpͷྫ
16. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢
17. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢ • ʢ͝·͔͢ͱ΋ݴ͏ʣ
18. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͳΜΒ͔ͷ൓ԠΛࣔͯ͋͛͠Δɻ • ࠷ۙͰ͸RAILͱ͍͏ݴ༿΋͋Γɺݪଇʹैͬ ͯ։ൃ͢Δࣄ͕ॏཁɻ
19. σʔλͷมߋʹ൓Ԡ͢Δ
20. σʔλͷมߋʹ൓Ԡ͢Δ • ߋ৽ॲཧΛߦΘͯ͘΋࣮ࡍʹσʔλΛಉظ͢ Δɻ • มߋ͕ൃੜͨ͠Βͦͷ౎౓σʔλΛมߋ͢Δɻ
21. σʔλͷมߋʹ൓Ԡ͢Δ • ํ๏࿦ • WebSocket౳ͷσʔλߋ৽ݕ஌ͷ࢓૊ΈΛ ݕ౼͢Δ
22. αʔόʔͱͷσʔλަ׵Λίϯ τϩʔϧ͢Δɻ • ͖ͬ͞ͷ΍ͭʹࣅͯΔ͚Ͳͪΐͬͱҧ͏ɻ • σʔλͷߋ৽ͷࣦഊΛϋϯυϦϯά͢Δɻ • ੲ͸POSTʹࣦഊ͢Δͱ͜͏͍͏Τϥʔϝοηʔδ ͕ग़ͯͨɻ
23. αʔόʔͱͷσʔλަ׵Λίϯ τϩʔϧ͢Δɻ • ࠓͰ͸XHR΋͋Δ͠ɺWebSocketͳͲ΋͋ ΔɻJavaScriptͰͳΜͰ΋ϋϯυϦϯάͰ͖Δ ࣌୅ʹͳ͍ͬͯΔɻ • ະདྷͰ͸ServiceWorker͕͋ΓɺΦϑϥΠϯʹ ͳͬͯ΋ߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ
24. αʔόʔͱͷσʔλަ׵Λίϯ τϩʔϧ͢Δɻ • ํ๏࿦ • ServiceWorker ʹΑΔόοΫάϥ΢ϯυͰͷ σʔλަ׵ • WebSocketΛ࢖ͬͨσʔλ௨৴ɾϦτϥΠ
25. historyΛյ͢ͳhistoryΛ֦ு ͠Α͏
26. historyΛյ͢ͳhistoryΛ֦ு ͠Α͏
27. historyΛյ͢ͳhistoryΛ֦ு ͠Α͏
28. historyΛյ͢ͳhistoryΛ֦ு ͠Α͏ • ํ๏࿦ • historyͷ֦ுΛݕ౼͢Δ • history.pushState/popState/replaceState • localStorageͷݕ౼ͳͲ
29. ίʔυͷߋ৽Λpush͠Α͏ • Demo • http://gaearon.github.io/react-hot-loader/
30. ίʔυͷߋ৽Λpush͠Α͏ • ํ๏࿦ • react hot loaderͳͲͷhot loaderͷݕ౼ • Server push ΍ websocket ʹΑΔίʔυม ߋͷ࣮ࢪ
31. ৼΔ෣͍Λ༧ଌ͠Α͏ • ϨΠςϯγʔͷนΛ௒͑Ζ
32. ৼΔ෣͍Λ༧ଌ͠Α͏ • Ϣʔβʔͷಈ͖Λ༧ଌ͢Δɻ • Google Map ͷઌಡΈͷΑ͏ͳߟ͑ • ํ๏࿦͸·ཱͩ֬͞Ε͍ͯͳ͍ɻɻ
33. ·ͱΊ • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ • σʔλͷมߋʹ൓Ԡ͢Δ • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ෣͍Λ༧ଌ͢Δ
34. JavaScriptͷςΫϊϩδʔͰ΄ ΅࣮ݱͰ͖Δɻ • fluxibleͳͲͷisomorphic web application framework ͷݕ౼ • RAILͳͲͷํ๏࿦ • WebSocket ͷػߏ • ServiceWorker ͰͷωοτϫʔΫ֦ு • historyͷ֦ு • Ϣʔβʔͷಈ͖༧ଌ