フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)

この資料は2019/02/14に登壇したDevelopers Summit 2019で利用した講演資料で、内容は2018/12/15に開催されたDevelopers Boost 2018登壇時に利用した資料「クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming」を改変したものです。

https://speakerdeck.com/edwardkenfox/fallacies-of-client-side-programming
---

Repro
https://repro.io

モバイルアプリのNo.1マーケティングツール「Repro」、Web領域に拡大へAIも搭載したWebマーケティングツール「Repro Web」をリリース
https://prtimes.jp/main/html/rd/p/000000064.000013569.html

Wikipedia – 分散コンピューティングの落とし穴
https://ja.wikipedia.org/wiki/分散コンピューティングの落とし穴

Sentry
https://sentry.io

Transcript

1. Fallacies of Client Side Programming ʙϑϩϯτΤϯυ։ൃͷམͱ݀͠ʙ Edward Fox 2019/02/14 @Developers Summit 2019
2. @edwardkenfox Edward Fox ɾWEBΤϯδχΞ @ Reproגࣜձࣾ ɾWEBʗϒϥ΢βٕज़શൠɺPWA ɾΫϥϑτϏʔϧɺԻָɺόεέ
3. ීஈͷۀ຿ ɾWebαΠτ༻ͷJS SDKͷ։ൃ ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ IUUQTSFQSPJP
4. ීஈͷۀ຿ ɾWebαΠτ༻ͷJS SDKͷ։ൃ ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ 8FC
   
   "QQ
   .BSLFUJOH
   
   "VUPNBUJPO IUUQTSFQSPJP
5. ීஈͷۀ຿ ɾWebαΠτ༻ͷJS SDKͷ։ൃ ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ IUUQTSFQSPJP ،فٔך竰竲ⵃ欽׾
   װ׭׉ֲזِ٦ؠ٦
   ׌ֽח
   فحءُ鸐濼׾鷏׶׋ְ
6. ීஈͷۀ຿ ɾWebαΠτ༻ͷJS SDKͷ։ൃ ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ IUUQTQSUJNFTKQNBJOIUNMSEQIUNM
7. ීஈͷۀ຿ ɾWebαΠτ༻ͷJS SDKͷ։ൃ ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ IUUQTSFQSPJP
8. ීஈͷۀ຿ ɾWebαΠτ༻ͷJS SDKͷ։ൃ ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ IUUQTSFQSPJP ීஈͷۀ຿ ɾWeb SDKͷ։ൃʢJavaScriptʣ ɾReproͷ؅ཧը໘ͷ։ൃʢRailsʣ
9. ࠓ೔࿩͢͜ͱ ɾWeb SDKͱ؅ཧը໘ͷ։ൃΛ௨ͯ͠෼͔ͬͨ ʮϑϩϯτΤϯυ։ൃͷམͱ݀͠ʯ Λ঺հ
10. ࠓ೔࿩͞ͳ͍͜ͱ ɾ۩ମతͳίʔυ΍ରࡦͷৄࡉ
11. ෼ࢄίϯϐϡʔςΟϯάͷམͱ݀͠ 1. ωοτϫʔΫ͸৴པͰ͖Δ 2. ϨΠςϯγ͸θϩͰ͋Δ 3. ଳҬ෯͸ແݶͰ͋Δ . . . https://ja.wikipedia.org/wiki/෼ࢄίϯϐϡʔςΟϯάͷམͱ݀͠
12. ϑϩϯτΤϯυ։ൃͷམͱ݀͠ ͦͷҰɺϢʔβʔ͸߹ཧతͰ͋Δ ͦͷೋɺϢʔβʔ͸࠷৽ͷόʔδϣϯΛ࢖ͬͯ͘ΕΔ ͦͷࡾɺExtension΍Plugin͸ߦّΑ͘ৼΔ෣͏ ͦͷ࢛ɺϢʔβʔͷߦಈ͸ਖ਼͘͠ཧղͰ͖͍ͯΔ ͦͷޒɺωοτϫʔΫ͸ৗʹߴ඼࣭Ͱ҆ఆ͍ͯ͠Δ
13. ͦͷҰɺ Ϣʔβʔ͸߹ཧతͰ͋Δ
14. ɾϓϩάϥϚͷࡾେඒಙ = ଵଦɺ୹ظɺၗຫ Ϣʔβʔ΋ಉ͘͡Β͍ଵଦͰ୹ظ ɾRepro͸B2BͷϓϩμΫτͳͷͰɺ Ϣʔβʔ͸ۀ຿ͱͯ͠ར༻͢Δ = ຊؾͰ࢖͏ɺ͔͚࣌ؒͣʹָΛ͍ͨ͠
15. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞
16. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞ => HTTPϦΫΤετΛAtomicʹ
17. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞ => HTTPϦΫΤετΛAtomicʹ => storage΁ͷಡΈॻ͖࣌͸ ৗʹ࠷৽ঢ়ଶΛࢀর͢Δ
18. ͦͷೋɺ Ϣʔβʔ͸ ࠷৽ͷόʔδϣϯΛ ࢖ͬͯ͘ΕΔ
19. ɾChrome/Firefox͸ ࣗಈΞοϓσʔτ ɾChrome Devtools͕༏ल = ։ൃʹར༻͍ͯ͠Δਓଟ͍
24. ɾIEҎ֎ʹ΋ɺࣾ಺ͷ ηΩϡϦςΟϙϦγʔʹΑΓ Chrome 44Ͱߋ৽͕ࢭ·͍ͬͯΔ έʔεͱ͔΋͋Δ
25. ɾSDKΛ഑෍͢Δ৔߹͸ɺ ͋Β͔͡Ίόʔδϣϯ͝ͱͷ αϙʔτܭըΛΑ͘࿅ͬͯ ར༻ऀʹप஌͢Δ͜ͱ͕େࣄ
26. ͦͷࡾɺ Extension΍Plugin͸ ߦّΑ͘ৼΔ෣͏
27. ɾReproʹ͸෼ੳػೳ͕͋Δ ʮ෼ੳʯ͸ӳޠͰ Analytics ɾuBlock plusͱ͍͏ΞυϒϩοΫͷϒϥ΢β֦ு͕ analytics ͱ͍͏จࣈྻ͕ೖͬͨURLΛҰ཯ϒϩοΫ => JSONϦΫΤετ͕ϒϩοΫ͞Ε ෼ੳը໘͕ਖ਼͘͠දࣔͰ͖ͳ͔ͬͨ
28. ɾkonami.js ΩʔϘʔυͷೖྗΠϕϯτΛୣ͏ => ΠϕϯτपΓͷॲཧ্͕ॻ͖ ͞ΕɺReproͷJS͕ਖ਼ৗʹಈ͔ͳ͍
29. ͦͷ࢛ɺ Ϣʔβʔͷߦಈ͸ ਖ਼͘͠ཧղͰ͖͍ͯΔ
30. ɾσϓϩΠʗϦϦʔεͯ͠ऴΘΓ ʹͳͬͯ·ͤΜ͔ʁ => ΤϥʔτϥοΩϯάͷॏཁੑ => sentry++, breadcrumbs++
34. UIૢ࡞ ௨৴ Τϥʔ UIૢ࡞
35. ͦͷޒɺ ωοτϫʔΫ͸ ৗʹߴ඼࣭Ͱ҆ఆ͍ͯ͠Δ
36. ɾϞόΠϧͰ͋Ε͹ωοτϫʔΫͷ ϋϯυΦʔόʔ͕ৗʹى͖͍ͯΔ͠ɺ ύέϩε΋ଟ͍ => PageSpeed Insight΍ webpagetest.orgΛ׆༻ͯ͠ ௿඼࣭ͳωοτϫʔΫΛΤϛϡϨʔτ
37. ɾNetwork Error Loggingͱ͍͏࢓༷ͷ υϥϑτ͕࠷ۙॻ͔Εͨ => Report URIͱ͍͏πʔϧ͕ αʔϏεΛఏڙ
38. ·ͱΊ ɾզʑʢ։ൃऀʣʹͱͬͯͷ౰ͨΓલ͸ ར༻ऀʹͱͬͯͷ౰ͨΓલͰ͸ͳ͍ ɾΫϥΠΞϯτ͕͍͔ʹ৴པͰ͖ͳ͍؀ڥ͔ ɾ͜ΕΒͷʮམͱ݀͠ʯΛڭ܇ͱͯ͠׆͔ͤΕ͹ ࣭ͷߴ͘ݎ࿚ͳϓϩάϥϜ͕ॻ͚Δ
39. WE ARE HIRING!
40. i
41. Fin