Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Masashi Hirano

April 25, 2019
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. AMP?

    View Slide

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

    View Slide

  9. Why AMP
    • ଎౓

    ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্

    ɹ὎53%ͷϢʔβ͕அ೦ͯ͠͠·͏

    ɾىಈ͕࣌ؒ1ඵ஗͘ͳΔ

    ɹ὎ίϯόʔδϣϯ཰͕ 7% ‑Down

    View Slide

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

    View Slide

  11. ͔͠͠JavaScript͕࢖͑ͳ͍

    View Slide

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

    View Slide

  13. https://youtu.be/1vwOFt9FBm4

    View Slide

  14. Introduction of amp-script

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. View Slide

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

    View Slide

  21. https://youtu.be/sYXkVOiz77I

    View Slide

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

    View Slide

  23. amp-script + Vue.js

    View Slide

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

    View Slide

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

    View Slide

  26. amp-script ࣮૷ (͔ͳΓলུ͍ͯ͠Δ)












    todos
    class="new-todo"
    autofocus
    autocomplete="off"
    placeholder="What needs to be done?"
    v-model="newTodo"
    @keyup.enter="addTodo"
    >



    IFBE಺ͰBNQTDSJQUͷ+4Λϩʔυ
    ɾBNQTDSJQUͷTSDʹXPSLFSUISFBEͰಈ͔͢+4ϑΝΠϧΛࢦఆ
    ɾ+4͔ΒΞΫηε͕ඞཁͳ%0.͸BNQTDSJQUͷλάͰғΉ
    ɾUFNQMBUF͸)5.-಺ʹॻ͘

    View Slide

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

    View Slide

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

    View Slide

  29. ·࣮ͩ༻తͰ͸ͳ͍
    • amp-script͸ExperimentalͳͨΊ·ͩ༗ޮͳAMPͱͯ͠͸ೝࣝ
    ͞Εͳ͍
    • Origin Trial͕։࢝͞Ε͍ͯΔ

    (ਃ੥ͨ͠OriginͷΈͰ༗ޮʹͳΔ)

    https://bit.ly/amp-script-trial

    View Slide

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

    View Slide

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

    View Slide