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

クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming

Edward Fox
December 15, 2018

クライアントサイド開発の落とし穴 / 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

Edward Fox

December 15, 2018
Tweet

More Decks by Edward Fox

Other Decks in Technology

Transcript

  1. Fallacies of Client Side
    Programming
    ʙΫϥΠΞϯταΠυ։ൃͷམͱ݀͠ʙ
    Edward Fox 2018/12/15
    @Developers Boost 2018

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. ࠓ೔࿩͢͜ͱ
    ɾWeb SDKͱϑϩϯτ։ൃΛ௨ͯ͠෼͔ͬͨ
    ʮΫϥΠΞϯταΠυ։ൃͷམͱ݀͠ʯ
    Λ঺հ

    View full-size slide

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

    View full-size slide

  11. ෼ࢄίϯϐϡʔςΟϯάͷམͱ݀͠
    1. ωοτϫʔΫ͸৴པͰ͖Δ
    2. ϨΠςϯγ͸θϩͰ͋Δ
    3. ଳҬ෯͸ແݶͰ͋Δ
    4. ωοτϫʔΫ͸ηΩϡΞͰ͋Δ
    5. ωοτϫʔΫߏ੒͸มԽͤͣҰఆͰ͋Δ
    6. ؅ཧऀ͸1ਓͰ͋Δ
    7. τϥϯεϙʔτίετ͸θϩͰ͋Δ
    8. ωοτϫʔΫ͸ۉ࣭Ͱ͋Δɻ
    https://ja.wikipedia.org/wiki/෼ࢄίϯϐϡʔςΟϯάͷམͱ݀͠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞
    ɾَͷΑ͏ͳ࿈ଧ

    View full-size slide

  16. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞
    ɾَͷΑ͏ͳ࿈ଧ
    => HTTPϦΫΤετΛAtomicʹ

    View full-size slide

  17. ɾෳ਺λϒΛۦ࢖ͯ͠ૢ࡞
    ɾَͷΑ͏ͳ࿈ଧ
    => HTTPϦΫΤετΛAtomicʹ
    => UIͷঢ়ଶ؅ཧΛஸೡʹ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. WE ARE HIRING!

    View full-size slide