amp-script + Vue.js / #v_kansai 5

amp-script + Vue.js v-kansai Vue.js/Nuxt.js meetup #5 Masashi Hirano /
@shisama

https://speakerdeck.com/masashi/number-v-kansai-5

ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto ofﬁce @shisama_ @shisama
Node.js Core Collaborator ؔ੢NodeֶԂOrganizer

Agenda • AMP? • Introduction of amp-script • amp-script +
Vue.js

".1$POGʹ ߦ͖ͬͯ·ͨ͠ʂ

https://youtu.be/frglA7L7iJY ࠓ೔ͷ࿩ͱؔ܎ͳ͍͚ͲVueͷ࿩΋͋Γ·ͨ͠ʂ

εϚϗͰGoogleݕࡧͨ͠ͱ͖ ʹදࣔ͞ΕΔ⚡

Why AMP • ଎౓  ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্  ɹ὎53%ͷϢʔβ͕அ೦ͯ͠͠·͏  ɾىಈ͕࣌ؒ1ඵ஗͘ͳΔ  ɹ὎ίϯόʔδϣϯ཰͕ 7% ‑Down

DOMContentLoaded: 633 ms Load: 1.45 s DOMContentLoaded: 1.15 s Load:
3.52 s ௨ৗϞόΠϧϖʔδ AMP Why AMP

͔͠͠JavaScript͕࢖͑ͳ͍

Why can’t we use JavaScript in AMP? • AMPϖʔδͰ͸೚ҙͷJavaScript͸࣮ߦͰ͖ͳ͍ •
JavaScriptʹΑΔmain threadઐ༗ʹΑΔύϑΥʔϚϯε໰୊ • ༻ҙ͞ΕͨAMPίϯϙʔωϯτΛ࢖ͬͯಈతͳϖʔδΛ࣮૷

https://youtu.be/1vwOFt9FBm4

Introduction of amp-script

https://amp.dev/documentation/components/amp-script

amp-scriptͱ͸ • AMPͰ΋೚ҙͷJavaScriptΛ࣮ߦՄೳʹ͢ΔAMPίϯϙʔωϯτ • main threadͰ͸ͳ͘worker thread಺ͰJavaScriptΛ࣮ߦ • amp-scriptͷத਎͸worker-domΛϥοϓ͍ͯ͠Δ͚ͩ •
JavaScriptͷ1ϑΝΠϧͷαΠζ͕150KiB·Ͱͷ੍ݶ͕͋Δ

https://github.com/ampproject/worker-dom

WorkerDOMͱ͸ • WebWorkerͰDOMૢ࡞Λߦ͏ͨΊͷϥΠϒϥϦ • AMP(Accelerated Mobile Pages)ϓϩδΣΫτ͕։ൃ • ·ͩalpha൛ •
Worker಺ͷίʔυʹٙࣅDOM͕͋ΓɺͦΕΛmain threadʹૹͬͯ DOMʹ൓ө͍ͯ͠Δ

https://speakerdeck.com/masashi/off-the-main-thread-with-workerdom WorkerDOMͷͦͷଞʹ͍ͭ ͯ͸ͬͪ͜Λݟ͍ͯͩ͘͞

https://youtu.be/sYXkVOiz77I

Restriction and Tradeoff • JavaScriptͷ1ϑΝΠϧͷαΠζ͕150KiB·Ͱ • ϩʔΤϯυͷ୺຤ʹ΋Өڹ͕ͳ͍αΠζ • ϩʔσΟϯάͷύϑΥʔϚϯεΛԼ͛ͳ͍ͨΊ •
ෳ਺ϑΝΠϧͷಡΈࠐΈ͸Մೳ • 1ͭ1ͭͷϑΝΠϧαΠζΛখ͘͞෼ׂ͢Ε͹େৎ෉

amp-script + Vue.js

https://github.com/ampproject/amphtml/pull/21701

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͔Β࣮ߦ

amp-script ࣮૷ (͔ͳΓলུ͍ͯ͠Δ) <!DOCTYPE html> <html ⚡ lang="en"> <head> <link
rel="preload" as="script" href=“https://cdn.ampproject.org/v0.js"> <script async src=“https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-script" src=“https://cdn.ampproject.org/v0/amp-script-0.1.js"></script> <link rel="canonical" href="."> </head> <body> <amp-script layout="container" src="./vue-todomvc.js"> <div class="todoapp"> <header class="header"> <h1>todos</h1> <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo" > </header> </amp-script> </body> IFBE಺ͰBNQTDSJQUͷ+4Λϩʔυ ɾBNQTDSJQUͷTSDʹXPSLFSUISFBEͰಈ͔͢+4ϑΝΠϧΛࢦఆ ɾ+4͔ΒΞΫηε͕ඞཁͳ%0.͸BNQTDSJQUͷλάͰғΉ ɾUFNQMBUF͸)5.-಺ʹॻ͘

Worker Thread JavaScript͕Worker্Ͱಈ͍ͯΔͷ ͸devTools͔Β֬ೝͰ͖·͢ɻ

͜͜·Ͱ࿩͖ͯ͠·͕ͨ͠…

·࣮ͩ༻తͰ͸ͳ͍ • amp-script͸ExperimentalͳͨΊ·ͩ༗ޮͳAMPͱͯ͠͸ೝࣝ ͞Εͳ͍ • Origin Trial͕։࢝͞Ε͍ͯΔ  (ਃ੥ͨ͠OriginͷΈͰ༗ޮʹͳΔ)  https://bit.ly/amp-script-trial

·ͱΊ • amp-scriptΛ࢖͑͹AMPϖʔδͰ΋೚ҙͷJavaScript͕࣮ߦՄೳ • Vue΋࣮ߦͰ͖Δ͸ͣ • ϑΝΠϧαΠζʹ੍ݶ΍Ϩεϙϯεϔομʔʹ͸஫ҙ͢Δ

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ @shisama_ @shisama

amp-script + Vue.js / #v_kansai 5

amp-script + Vue.js / #v_kansai 5

Masashi Hirano

More Decks by Masashi Hirano

Other Decks in Programming

Featured

Transcript

amp-script + Vue.js v-kansai Vue.js/Nuxt.js meetup #5 Masashi Hirano /

https://speakerdeck.com/masashi/number-v-kansai-5

ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto ofﬁce @shisama_ @shisama

Agenda • AMP? • Introduction of amp-script • amp-script +

".1$POGʹ ߦ͖ͬͯ·ͨ͠ʂ

https://youtu.be/frglA7L7iJY ࠓ೔ͷ࿩ͱؔ܎ͳ͍͚ͲVueͷ࿩΋͋Γ·ͨ͠ʂ

AMP?

εϚϗͰGoogleݕࡧͨ͠ͱ͖ ʹදࣔ͞ΕΔ⚡

Why AMP • ଎౓  ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্  ɹ὎53%ͷϢʔβ͕அ೦ͯ͠͠·͏  ɾىಈ͕࣌ؒ1ඵ஗͘ͳΔ  ɹ὎ίϯόʔδϣϯ཰͕ 7% ‑Down

DOMContentLoaded: 633 ms Load: 1.45 s DOMContentLoaded: 1.15 s Load:

͔͠͠JavaScript͕࢖͑ͳ͍

Why can’t we use JavaScript in AMP? • AMPϖʔδͰ͸೚ҙͷJavaScript͸࣮ߦͰ͖ͳ͍ •

https://youtu.be/1vwOFt9FBm4

Introduction of amp-script

https://amp.dev/documentation/components/amp-script

amp-scriptͱ͸ • AMPͰ΋೚ҙͷJavaScriptΛ࣮ߦՄೳʹ͢ΔAMPίϯϙʔωϯτ • main threadͰ͸ͳ͘worker thread಺ͰJavaScriptΛ࣮ߦ • amp-scriptͷத਎͸worker-domΛϥοϓ͍ͯ͠Δ͚ͩ •

https://github.com/ampproject/worker-dom

WorkerDOMͱ͸ • WebWorkerͰDOMૢ࡞Λߦ͏ͨΊͷϥΠϒϥϦ • AMP(Accelerated Mobile Pages)ϓϩδΣΫτ͕։ൃ • ·ͩalpha൛ •

https://speakerdeck.com/masashi/off-the-main-thread-with-workerdom WorkerDOMͷͦͷଞʹ͍ͭ ͯ͸ͬͪ͜Λݟ͍ͯͩ͘͞

https://youtu.be/sYXkVOiz77I

Restriction and Tradeoff • JavaScriptͷ1ϑΝΠϧͷαΠζ͕150KiB·Ͱ • ϩʔΤϯυͷ୺຤ʹ΋Өڹ͕ͳ͍αΠζ • ϩʔσΟϯάͷύϑΥʔϚϯεΛԼ͛ͳ͍ͨΊ •

amp-script + Vue.js

https://github.com/ampproject/amphtml/pull/21701

amp-script + Vue.js example • ampproject/amphtmlຊՈʹαϯϓϧ͕͋Δ • vuejs/vueͷToDoMVC(by Evan You)ΛҠ২

amp-script ࣮૷ (͔ͳΓলུ͍ͯ͠Δ) <!DOCTYPE html> <html ⚡ lang="en"> <head> <link

Worker Thread JavaScript͕Worker্Ͱಈ͍ͯΔͷ ͸devTools͔Β֬ೝͰ͖·͢ɻ

͜͜·Ͱ࿩͖ͯ͠·͕ͨ͠…

·࣮ͩ༻తͰ͸ͳ͍ • amp-script͸ExperimentalͳͨΊ·ͩ༗ޮͳAMPͱͯ͠͸ೝࣝ ͞Εͳ͍ • Origin Trial͕։࢝͞Ε͍ͯΔ  (ਃ੥ͨ͠OriginͷΈͰ༗ޮʹͳΔ)  https://bit.ly/amp-script-trial

·ͱΊ • amp-scriptΛ࢖͑͹AMPϖʔδͰ΋೚ҙͷJavaScript͕࣮ߦՄೳ • Vue΋࣮ߦͰ͖Δ͸ͣ • ϑΝΠϧαΠζʹ੍ݶ΍Ϩεϙϯεϔομʔʹ͸஫ҙ͢Δ

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ @shisama_ @shisama