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

D32564792887e3fb5955021f9804c0a6?s=47 Edward Fox
February 14, 2019

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

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

February 14, 2019
Tweet

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͕༏ल = ։ൃʹར༻͍ͯ͠Δਓଟ͍

  20. None
  21. None
  22. None
  23. None
  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++

  31. None
  32. None
  33. None
  34. UIૢ࡞ ௨৴ Τϥʔ UIૢ࡞

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

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

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

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

  39. WE ARE HIRING!

  40. i

  41. Fin