Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
amp-script + Vue.js v-kansai Vue.js/Nuxt.js meetup #5 Masashi Hirano / @shisama
Slide 2
Slide 2 text
https://speakerdeck.com/masashi/number-v-kansai-5
Slide 3
Slide 3 text
ฏ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto office @shisama_ @shisama Node.js Core Collaborator ؔNodeֶԂOrganizer
Slide 4
Slide 4 text
Agenda • AMP? • Introduction of amp-script • amp-script + Vue.js
Slide 5
Slide 5 text
".1$POGʹ ߦ͖ͬͯ·ͨ͠ʂ
Slide 6
Slide 6 text
https://youtu.be/frglA7L7iJY ࠓͷͱؔͳ͍͚ͲVueͷ͋Γ·ͨ͠ʂ
Slide 7
Slide 7 text
AMP?
Slide 8
Slide 8 text
εϚϗͰGoogleݕࡧͨ͠ͱ͖ ʹදࣔ͞ΕΔ⚡
Slide 9
Slide 9 text
Why AMP • ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্ ɹ53%ͷϢʔβ͕அ೦ͯ͠͠·͏ ɾىಈ͕࣌ؒ1ඵ͘ͳΔ ɹίϯόʔδϣϯ͕ 7% ‑Down
Slide 10
Slide 10 text
DOMContentLoaded: 633 ms Load: 1.45 s DOMContentLoaded: 1.15 s Load: 3.52 s ௨ৗϞόΠϧϖʔδ AMP Why AMP
Slide 11
Slide 11 text
͔͠͠JavaScript͕͑ͳ͍
Slide 12
Slide 12 text
Why can’t we use JavaScript in AMP? • AMPϖʔδͰҙͷJavaScript࣮ߦͰ͖ͳ͍ • JavaScriptʹΑΔmain threadઐ༗ʹΑΔύϑΥʔϚϯε • ༻ҙ͞ΕͨAMPίϯϙʔωϯτΛͬͯಈతͳϖʔδΛ࣮
Slide 13
Slide 13 text
https://youtu.be/1vwOFt9FBm4
Slide 14
Slide 14 text
Introduction of amp-script
Slide 15
Slide 15 text
https://amp.dev/documentation/components/amp-script
Slide 16
Slide 16 text
amp-scriptͱ • AMPͰҙͷJavaScriptΛ࣮ߦՄೳʹ͢ΔAMPίϯϙʔωϯτ • main threadͰͳ͘worker threadͰJavaScriptΛ࣮ߦ • amp-scriptͷதworker-domΛϥοϓ͍ͯ͠Δ͚ͩ • JavaScriptͷ1ϑΝΠϧͷαΠζ͕150KiB·Ͱͷ੍ݶ͕͋Δ
Slide 17
Slide 17 text
https://github.com/ampproject/worker-dom
Slide 18
Slide 18 text
WorkerDOMͱ • WebWorkerͰDOMૢ࡞Λߦ͏ͨΊͷϥΠϒϥϦ • AMP(Accelerated Mobile Pages)ϓϩδΣΫτ͕։ൃ • ·ͩalpha൛ • WorkerͷίʔυʹٙࣅDOM͕͋ΓɺͦΕΛmain threadʹૹͬͯ DOMʹө͍ͯ͠Δ
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
https://speakerdeck.com/masashi/off-the-main-thread-with-workerdom WorkerDOMͷͦͷଞʹ͍ͭ ͯͬͪ͜Λݟ͍ͯͩ͘͞
Slide 21
Slide 21 text
https://youtu.be/sYXkVOiz77I
Slide 22
Slide 22 text
Restriction and Tradeoff • JavaScriptͷ1ϑΝΠϧͷαΠζ͕150KiB·Ͱ • ϩʔΤϯυͷʹӨڹ͕ͳ͍αΠζ • ϩʔσΟϯάͷύϑΥʔϚϯεΛԼ͛ͳ͍ͨΊ • ෳϑΝΠϧͷಡΈࠐΈՄೳ • 1ͭ1ͭͷϑΝΠϧαΠζΛখׂ͘͢͞Εେৎ
Slide 23
Slide 23 text
amp-script + Vue.js
Slide 24
Slide 24 text
https://github.com/ampproject/amphtml/pull/21701
Slide 25
Slide 25 text
amp-script + Vue.js example • ampproject/amphtmlຊՈʹαϯϓϧ͕͋Δ • vuejs/vueͷToDoMVC(by Evan You)ΛҠ২ • αʔόʔଆͰϨεϙϯεϔομʔΛՃ͠ͳ͚Ε͍͚ͳ͍ • CORSͰͻ͔͔ͬΔͨΊ • AMP-Access-Control-Allow-Source-OriginͳͲΛՃ • ࣮ݧతͳػೳͷͨΊAMP.toggleExperiment(‘amp-script')ΛdevTools͔Β࣮ߦ
Slide 26
Slide 26 text
amp-script ࣮ (͔ͳΓলུ͍ͯ͠Δ)
todos
IFBEͰBNQTDSJQUͷ+4Λϩʔυ ɾBNQTDSJQUͷTSDʹXPSLFSUISFBEͰಈ͔͢+4ϑΝΠϧΛࢦఆ ɾ+4͔ΒΞΫηε͕ඞཁͳ%0.BNQTDSJQUͷλάͰғΉ ɾUFNQMBUF)5.-ʹॻ͘
Slide 27
Slide 27 text
Worker Thread JavaScript͕Worker্Ͱಈ͍ͯΔͷ devTools͔Β֬ೝͰ͖·͢ɻ
Slide 28
Slide 28 text
͜͜·Ͱ͖ͯ͠·͕ͨ͠…
Slide 29
Slide 29 text
·࣮ͩ༻తͰͳ͍ • amp-scriptExperimentalͳͨΊ·ͩ༗ޮͳAMPͱͯ͠ೝࣝ ͞Εͳ͍ • Origin Trial͕։࢝͞Ε͍ͯΔ (ਃͨ͠OriginͷΈͰ༗ޮʹͳΔ) https://bit.ly/amp-script-trial
Slide 30
Slide 30 text
·ͱΊ • amp-scriptΛ͑AMPϖʔδͰҙͷJavaScript͕࣮ߦՄೳ • Vue࣮ߦͰ͖Δͣ • ϑΝΠϧαΠζʹ੍ݶϨεϙϯεϔομʔʹҙ͢Δ
Slide 31
Slide 31 text
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ @shisama_ @shisama