Tweet
Tweet

Slide 1

Slide 1 text

Fallacies of Client Side Programming ʙϑϩϯτΤϯυ։ൃͷམͱ݀͠ʙ Edward Fox 2019/02/14 @Developers Summit 2019

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

UIૢ࡞ ௨৴ Τϥʔ UIૢ࡞

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

WE ARE HIRING!

Slide 40

Slide 40 text

i

Slide 41

Slide 41 text

Fin