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 ofﬁce @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-script͸ExperimentalͳͨΊ·ͩ༗ޮͳ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