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
OSSとコミュニティを支える
masashi
1
750
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦！？
masashi
1
2.7k
フロントエンド開発のためのセキュリティ入門について
masashi
1
400
フロントエンド開発のためのセキュリティ入門
masashi
45
16k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
930
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
12k
Node.js + Web Compatibility
masashi
2
520
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
masashi
10
2.8k
実践 OSSことはじめ / First Step for OSS Contribution
masashi
4
9.5k

Other Decks in Programming

See All in Programming
Code Reviews
bkuhlmann
4
880
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
500
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
810
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
2
370
サイコロで理解する統計的仮説検定の考え方
tatamiya
2
250
PostmanでAPIの動作確認が楽になった話
h455h1
0
140
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
310
脱・初心者！脱・マネコン！AWS CDKを使ってみませんか！？
har1101
0
310
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
290
エンターテイメント業界で利用されるAWS
demuyan
0
200
ONE WEDGE_company_guide
1wedge_one
0
390

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
The Invisible Side of Design
smashingmag
294
49k
Building Your Own Lightsaber
phodgson
98
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Music & Morning Musume
bryan
41
5.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Bash Introduction
62gerente
604
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Fireside Chat
paigeccino
20
2.6k

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