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

amp-script + Vue.js / #v_kansai 5

Masashi Hirano
April 25, 2019
Programming
0
1.6k

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

See All by Masashi Hirano
You may not need XXX in Node.js
masashi
5
1.2k
OSSとコミュニティを支える
masashi
1
1k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦！？
masashi
1
3.1k
フロントエンド開発のためのセキュリティ入門について
masashi
1
450
フロントエンド開発のためのセキュリティ入門
masashi
49
17k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
12k
Node.js + Web Compatibility
masashi
2
590
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
masashi
10
2.9k

Other Decks in Programming

See All in Programming
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
220
Click-free releases & the making of a CLI app
oheyadam
2
110
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
610
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
890
Remix on Hono on Cloudflare Workers
yusukebe
1
280
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
860
Arm移行タイムアタック
qnighy
0
310
聞き手から登壇者へ： RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130

Featured

See All Featured
Designing the Hi-DPI Web
ddemaree
280
34k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
How GitHub (no longer) Works
holman
310
140k
Visualization
eitanlees
145
15k
Statistics for Hackers
jakevdp
796
220k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Fireside Chat
paigeccino
34
3k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k

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