Pro Yearly is on sale from $80 to $50! »

amp-script + Vue.js / #v_kansai 5

amp-script + Vue.js / #v_kansai 5

v-kansai Vue.js/Nuxt.js meetup #5 でamp-scriptについて話をしました。
https://vuekansai.connpass.com/event/122664/

ampproject/amphtml: https://github.com/ampproject/amphtml
amp-scriptのサンプル: https://github.com/ampproject/amphtml/tree/master/examples/amp-script
WorkerDOMに関する過去の資料: https://speakerdeck.com/masashi/off-the-main-thread-with-workerdom

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

April 25, 2019
Tweet

Transcript

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

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

  3. ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto office @shisama_ @shisama

    Node.js Core Collaborator ؔ੢NodeֶԂOrganizer
  4. Agenda • AMP? • Introduction of amp-script • amp-script +

    Vue.js
  5. ".1$POGʹ ߦ͖ͬͯ·ͨ͠ʂ

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

  7. AMP?

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

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

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

    3.52 s ௨ৗϞόΠϧϖʔδ AMP Why AMP
  11. ͔͠͠JavaScript͕࢖͑ͳ͍

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

    JavaScriptʹΑΔmain threadઐ༗ʹΑΔύϑΥʔϚϯε໰୊ • ༻ҙ͞ΕͨAMPίϯϙʔωϯτΛ࢖ͬͯಈతͳϖʔδΛ࣮૷
  13. https://youtu.be/1vwOFt9FBm4

  14. Introduction of amp-script

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

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

    JavaScriptͷ1ϑΝΠϧͷαΠζ͕150KiB·Ͱͷ੍ݶ͕͋Δ
  17. https://github.com/ampproject/worker-dom

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

    Worker಺ͷίʔυʹٙࣅDOM͕͋ΓɺͦΕΛmain threadʹૹͬͯ DOMʹ൓ө͍ͯ͠Δ
  19. None
  20. https://speakerdeck.com/masashi/off-the-main-thread-with-workerdom WorkerDOMͷͦͷଞʹ͍ͭ ͯ͸ͬͪ͜Λݟ͍ͯͩ͘͞

  21. https://youtu.be/sYXkVOiz77I

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

    ෳ਺ϑΝΠϧͷಡΈࠐΈ͸Մೳ • 1ͭ1ͭͷϑΝΠϧαΠζΛখ͘͞෼ׂ͢Ε͹େৎ෉
  23. amp-script + Vue.js

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

  25. 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͔Β࣮ߦ
  26. 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.-಺ʹॻ͘
  27. Worker Thread JavaScript͕Worker্Ͱಈ͍ͯΔͷ ͸devTools͔Β֬ೝͰ͖·͢ɻ

  28. ͜͜·Ͱ࿩͖ͯ͠·͕ͨ͠…

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

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

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