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. 3.

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

    Node.js Core Collaborator ؔ੢NodeֶԂOrganizer
  2. 7.
  3. 10.
  4. 12.

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

    JavaScriptʹΑΔmain threadઐ༗ʹΑΔύϑΥʔϚϯε໰୊ • ༻ҙ͞ΕͨAMPίϯϙʔωϯτΛ࢖ͬͯಈతͳϖʔδΛ࣮૷
  5. 19.
  6. 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͔Β࣮ߦ
  7. 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.-಺ʹॻ͘