フロントエンド開発の落とし穴 / 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
   

   View Slide

2. @edwardkenfox
   Edward Fox
   ɾWEBΤϯδχΞ @ Reproגࣜձࣾ
   ɾWEBʗϒϥ΢βٕज़શൠɺPWA
   ɾΫϥϑτϏʔϧɺԻָɺόεέ
   

   View Slide

3. ීஈͷۀ຿
   ɾWebαΠτ༻ͷJS SDKͷ։ൃ
   ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ
   IUUQTSFQSPJP
   

   View Slide

4. ීஈͷۀ຿
   ɾWebαΠτ༻ͷJS SDKͷ։ൃ
   ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ
   8FC"QQ
   .BSLFUJOH
   "VUPNBUJPO
   IUUQTSFQSPJP
   

   View Slide

5. ීஈͷۀ຿
   ɾWebαΠτ༻ͷJS SDKͷ։ൃ
   ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ
   IUUQTSFQSPJP
   ،فٔך竰竲ⵃ欽׾
   װ׭׉ֲזِ٦ؠ٦
   ׌ֽח
   فحءُ鸐濼׾鷏׶׋ְ
   

   View Slide

6. ීஈͷۀ຿
   ɾWebαΠτ༻ͷJS SDKͷ։ൃ
   ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ
   IUUQTQSUJNFTKQNBJOIUNMSEQIUNM
   

   View Slide

7. ීஈͷۀ຿
   ɾWebαΠτ༻ͷJS SDKͷ։ൃ
   ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ
   IUUQTSFQSPJP
   

   View Slide

8. ීஈͷۀ຿
   ɾWebαΠτ༻ͷJS SDKͷ։ൃ
   ɾReproͷ؅ཧը໘ʢRailsʣͷ։ൃ
   IUUQTSFQSPJP
   ීஈͷۀ຿
   ɾWeb SDKͷ։ൃʢJavaScriptʣ
   ɾReproͷ؅ཧը໘ͷ։ൃʢRailsʣ
   

   View Slide

9. ࠓ೔࿩͢͜ͱ
   ɾWeb SDKͱ؅ཧը໘ͷ։ൃΛ௨ͯ͠෼͔ͬͨ
   ʮϑϩϯτΤϯυ։ൃͷམͱ݀͠ʯ
   Λ঺հ
   

   View Slide

10. ࠓ೔࿩͞ͳ͍͜ͱ
    ɾ۩ମతͳίʔυ΍ରࡦͷৄࡉ
    

    View Slide

11. ෼ࢄίϯϐϡʔςΟϯάͷམͱ݀͠
    1. ωοτϫʔΫ͸৴པͰ͖Δ
    2. ϨΠςϯγ͸θϩͰ͋Δ
    3. ଳҬ෯͸ແݶͰ͋Δ
    .
    .
    .
    https://ja.wikipedia.org/wiki/෼ࢄίϯϐϡʔςΟϯάͷམͱ݀͠
    

    View Slide

12. ϑϩϯτΤϯυ։ൃͷམͱ݀͠
    ͦͷҰɺϢʔβʔ͸߹ཧతͰ͋Δ
    ͦͷೋɺϢʔβʔ͸࠷৽ͷόʔδϣϯΛ࢖ͬͯ͘ΕΔ
    ͦͷࡾɺExtension΍Plugin͸ߦّΑ͘ৼΔ෣͏
    ͦͷ࢛ɺϢʔβʔͷߦಈ͸ਖ਼͘͠ཧղͰ͖͍ͯΔ
    ͦͷޒɺωοτϫʔΫ͸ৗʹߴ඼࣭Ͱ҆ఆ͍ͯ͠Δ
    

    View Slide

13. ͦͷҰɺ
    Ϣʔβʔ͸߹ཧతͰ͋Δ
    

    View Slide

14. ɾϓϩάϥϚͷࡾେඒಙ = ଵଦɺ୹ظɺၗຫ
    Ϣʔβʔ΋ಉ͘͡Β͍ଵଦͰ୹ظ
    ɾRepro͸B2BͷϓϩμΫτͳͷͰɺ
    Ϣʔβʔ͸ۀ຿ͱͯ͠ར༻͢Δ
    = ຊؾͰ࢖͏ɺ͔͚࣌ؒͣʹָΛ͍ͨ͠
    

    View Slide

15. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞
    

    View Slide

16. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞
    => HTTPϦΫΤετΛAtomicʹ
    

    View Slide

17. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞
    => HTTPϦΫΤετΛAtomicʹ
    => storage΁ͷಡΈॻ͖࣌͸
    ৗʹ࠷৽ঢ়ଶΛࢀর͢Δ
    

    View Slide

18. ͦͷೋɺ
    Ϣʔβʔ͸
    ࠷৽ͷόʔδϣϯΛ
    ࢖ͬͯ͘ΕΔ
    

    View Slide

19. ɾChrome/Firefox͸
    ࣗಈΞοϓσʔτ
    ɾChrome Devtools͕༏ल
    = ։ൃʹར༻͍ͯ͠Δਓଟ͍
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. ɾIEҎ֎ʹ΋ɺࣾ಺ͷ
    ηΩϡϦςΟϙϦγʔʹΑΓ
    Chrome 44Ͱߋ৽͕ࢭ·͍ͬͯΔ
    έʔεͱ͔΋͋Δ
    

    View Slide

25. ɾSDKΛ഑෍͢Δ৔߹͸ɺ
    ͋Β͔͡Ίόʔδϣϯ͝ͱͷ
    αϙʔτܭըΛΑ͘࿅ͬͯ
    ར༻ऀʹप஌͢Δ͜ͱ͕େࣄ
    

    View Slide

26. ͦͷࡾɺ
    Extension΍Plugin͸
    ߦّΑ͘ৼΔ෣͏
    

    View Slide

27. ɾReproʹ͸෼ੳػೳ͕͋Δ
    ʮ෼ੳʯ͸ӳޠͰ Analytics
    ɾuBlock plusͱ͍͏ΞυϒϩοΫͷϒϥ΢β֦ு͕
    analytics ͱ͍͏จࣈྻ͕ೖͬͨURLΛҰ཯ϒϩοΫ
    => JSONϦΫΤετ͕ϒϩοΫ͞Ε
    ෼ੳը໘͕ਖ਼͘͠දࣔͰ͖ͳ͔ͬͨ
    

    View Slide

28. ɾkonami.js
    ΩʔϘʔυͷೖྗΠϕϯτΛୣ͏
    => ΠϕϯτपΓͷॲཧ্͕ॻ͖
    ͞ΕɺReproͷJS͕ਖ਼ৗʹಈ͔ͳ͍
    

    View Slide

29. ͦͷ࢛ɺ
    Ϣʔβʔͷߦಈ͸
    ਖ਼͘͠ཧղͰ͖͍ͯΔ
    

    View Slide

30. ɾσϓϩΠʗϦϦʔεͯ͠ऴΘΓ
    ʹͳͬͯ·ͤΜ͔ʁ
    => ΤϥʔτϥοΩϯάͷॏཁੑ
    => sentry++, breadcrumbs++
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. UIૢ࡞
    ௨৴
    Τϥʔ
    UIૢ࡞
    

    View Slide

35. ͦͷޒɺ
    ωοτϫʔΫ͸
    ৗʹߴ඼࣭Ͱ҆ఆ͍ͯ͠Δ
    

    View Slide

36. ɾϞόΠϧͰ͋Ε͹ωοτϫʔΫͷ
    ϋϯυΦʔόʔ͕ৗʹى͖͍ͯΔ͠ɺ
    ύέϩε΋ଟ͍
    => PageSpeed Insight΍
    webpagetest.orgΛ׆༻ͯ͠
    ௿඼࣭ͳωοτϫʔΫΛΤϛϡϨʔτ
    

    View Slide

37. ɾNetwork Error Loggingͱ͍͏࢓༷ͷ
    υϥϑτ͕࠷ۙॻ͔Εͨ
    => Report URIͱ͍͏πʔϧ͕
    αʔϏεΛఏڙ
    

    View Slide

38. ·ͱΊ
    ɾզʑʢ։ൃऀʣʹͱͬͯͷ౰ͨΓલ͸
    ར༻ऀʹͱͬͯͷ౰ͨΓલͰ͸ͳ͍
    ɾΫϥΠΞϯτ͕͍͔ʹ৴པͰ͖ͳ͍؀ڥ͔
    ɾ͜ΕΒͷʮམͱ݀͠ʯΛڭ܇ͱͯ͠׆͔ͤΕ͹
    ࣭ͷߴ͘ݎ࿚ͳϓϩάϥϜ͕ॻ͚Δ
    

    View Slide

39. WE ARE HIRING!
    

    View Slide

40. i
    

    View Slide

41. Fin
    

    View Slide