Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue Fes Japan
Search
takanorip
November 03, 2018
Programming
5
9.9k
Vue Fes Japan
takanorip
November 03, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
3
670
早わかり W3C Community Group
takanorip
0
250
Ubieとアクセシビリティのこれからを考える
takanorip
0
200
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
2.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.8k
デザインシステム運用とOKRの良い関係
takanorip
0
1.6k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
160
メンタルヘルスチューニング
takanorip
0
240
Other Decks in Programming
See All in Programming
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
460
使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話
fursich
0
150
So You Think You Know Git - Part 2
schacon
PRO
0
1.3k
SmartHRにおけるプロダクトエンジニア/product_engineer_in_smarthr_20240227
saitoryc
5
180
TokyoR#111_ANOVA
kilometer
1
710
iOS / Android ネイティブ 実装アプリの Flutter 化事例
mthiroshi
0
650
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
190
TDDと今まで
kanayannet
0
110
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
4
440
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
160
Cloudflare Workersの環境を再現することについて
yusukebe
5
730
decksh - a little language for decks
ajstarks
4
18k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
8
4.2k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
How to train your dragon (web standard)
notwaldorf
71
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Happy Clients
brianwarren
91
6.3k
Building Applications with DynamoDB
mza
88
5.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
How GitHub (no longer) Works
holman
301
140k
Transcript
The Good relation between Vue.js and Web Components To the
future Takanori Oki @Vue Fes Japan
Self Introduction • Takanori Oki (@takanorip) • Frontend Developer at
FOLIO Inc. • Use Nuxt.js/Vue.js, React, Polymer • A member of Polymer Japan • I love font and webfont
None
What are Web Components?
Web Components w 8FCඪ४ٕज़ͰɺΧϓηϧԽ͞Εͨ ίϯϙʔωϯτʢ෦ʣͷ࠶ར༻ΛՄೳʹ ͢Δ֓೦ w 8FCඪ४ٕज़ͳͷͰɺಛఆͷπʔϧ ϥΠϒϥϦʹґଘ͠ͳ͍ w
ͦͷ··ϒϥβͰಈ࡞͢Δ
Browser Support
production-ready!
We don't need to use polyfill library!!!! (except for IE
and Edge)
Specifications • Custom Elements • Shadow DOM • HTML Template
• ES ModulesʢHTML Importsʣ HTML Modules
Custom Elements w ಠࣗͷػೳݟͨΛ࣋ͬͨ)5.-ཁૉΛ ఆٛͰ͖ΔΑ͏ʹ͢ΔͨΊͷ༷ w ఆٛͨ͠)5.-ཁૉͷλάΛ)5.-தʹ هड़ͯ͠༻͢Δ w ͜ΕҎ߱ʮಠࣗͷػೳݟͨΛ࣋ͬͨ)5.-
ཁૉʯͷ͜ͱΛʮΧελϜཁૉʯͱݺͿ
None
None
Shadow DOM w %0.ͷΧϓηϧԽΛ࣮ݱ͢ΔͨΊͷ༷ w 4IBEPX3PPUԼʹ4IBEPX5SFFͱ ݺΕΔ/PEF5SFF͕ੜ͞ΕΔ w άϩʔόϧͷ$44+BWB4DSJQU 4IBEPX%0.෦ʹӨڹ͠ͳ͍
None
None
HTML Template w <templates>ཁૉΛ༻͠)5.-υΩϡϝϯτ Ͱ)5.-ͷܗΛѻ͏ͨΊͷ༷ w ͜Ε8)"58(%0.4UBOEBSEͷҰ෦ʹ औΓࠐ·Ε͍ͯΔ w +BWB4DSJQU͔Βѻ͍͘͢͢ΔͨΊͷػೳ
֦ு͕ٞਐΜͰ͍Δ
None
ES Modules w &4Ͱಋೖ͞Εͨ&4.PEVMFTͷػೳΛ ར༻ͯ͠ɺ֎෦Ͱఆٛ͞ΕͨΧελϜཁૉΛ ಡΈࠐΉ w ͦͷલʹ)5.-*NQPSUTͱ͍͏༷͕ ଘࡏ͍͕ͯͨ͠ɺഇࢭ͞Εͨ w
HTML Modulesͱ͍͏༷͕ٞ͞Ε͍ͯΔ
HTML Imports w )5.-Λ)5.-ͰಡΈࠐΉͨΊͷ༷ w ࣅͨػೳΛ࣋ͭ&4.PEVMFTͷ༷͕҆ఆ͠ ϒϥβ࣮͕ग़ଗͬͨ͜ͱͰɺ ඇਪʹͳͬͨ w ݱࡏ།Ұ࣮͞Ε͍ͯΔ(PPHMF$ISPNF
͔Βय़ʹআ͞ΕΔ༧ఆ
HTML Modules w )5.-Λ+BWB4DSJQUͷதʹ*NQPSUՄೳ ʹ͢Δ༷ w 8FCQBDLͷIUNMMPBEFSʹࣅͨػೳΛ ϒϥβͰαϙʔτ͠Α͏ͱ͍͏ͷ w ·ͩ(JU)VCͷ*TTVFͰٞ͞Ε͍ͯΔஈ֊
ʢ$44.PEVMFTಉ࣌ʹٞ͞Ε͍ͯΔʣ
How to use Web Components with Vue.js?
None
None
How to build Web Components with Vue.js?
Vue CLI 3 Build Targets w 7VF$-*ͰCVJME͢Δͱ͖ɺ--target wcͱ ͍͏ΦϓγϣϯΛ͚ͭΔͱɺ7VFKTͷ ίϯϙʔωϯτΛ8FC$PNQPOFOUTʹ
มͯ͠CVJME͢Δ͜ͱ͕Ͱ͖Δ w ͜ΕͰੜ͞ΕͨϑΝΠϧɺ୯ମͰ 8FC$PNQPOFOUTͱͯ͠ಈ࡞͢Δ
None
None
@vue/web-component-wrapper w 7VFίϯϙʔωϯτΛϥοϓͯ͠ ΧελϜཁૉͱͯ͠ొ͢Δ w #VJME5BSHFUTͰ͜ΕΛ༻͍ͯ͠Δ w 7VFKTΛϥοϓ͍ͯ͠ΔͷͰɺ ௨ৗͷ8FC$PNQPOFOUTͱൺͯ ϑΝΠϧαΠζ͕େ͖͍
None
͜ͷػೳΛ͏͜ͱͰ Vue.jsͷίϯϙʔωϯτΛ Web Components εϜʔζʹҠߦͰ͖Δ
·ͨɺWeb Componentsͷ ෦తͳಋೖʹཱͭ
Why we use Web Components?
1. We can use the same component with any JavaScript
Libraries
For example... w 6*ϑϨʔϜϫʔΫΛ౷Ұ͍ͨ͠ +BWB4DSJQUϑϨʔϜϫʔΫ͝ͱʹ6*ϑϨʔϜ ϫʔΫ͍͚Δͷɺޮѱ͍ w ϑϨʔϜϫʔΫΛมߋ͠ͳͯ͘ͳΒͳ͘ͳͬ ͨͱ͖ɺ6*෦Λ͍ճ͢͜ͱ͕Ͱ͖Δ w
֎෦ެ։͍͢͠
2. Fully Scoped
For example... w େ͖͍ϓϩδΣΫτͰ$44ͷґଘ͕ؔ Α͘Θ͔Βͳ͍ͷͰɺHMPCBMͳ$44ʹӨڹ ͞Εͳ͍࣮͕͍ͨ͠ w ֎෦ެ։͍ͨ͠
Demerit w ଐੑʹ4USJOHܕ͔ͤ͠ͳ͍ w ֎෦͔Β͞ΕΔΠϕϯτͷϋϯυϦϯά͕ ͍͠ w %0.ཁૉͷऔΓճ͕͠໘ w $44ͷઃܭΛେ෯ʹݟ͢ඞཁ͕͋Δ
ਖ਼ɺ7VFKTͷػೳΛͬͯίϯϙʔωϯτ ࡞ͬͨ΄͏͕ॊೈͰػೳతͰ؆ܿ
3. Micro Frontends
Micro Frontends? • Be Technology Agnostic • Isolate Team Code
• Establish Team Prefixes • Favor Native Browser Features over Custom APIs • Build a Resilient Site
Think about a web app as a composition of features
Functions Normal Frontend
Function1 Micro Frontend Function2 Function4 Function3
Build a Resilient Site
w CSSͷมߋ w ༻͢ΔϥΠϒϥϦͷมߋ w JavaScriptͷมߋ w DOMߏͷมߋ • etc...
Web ComponentsͳΒ ScopedͳͷͰ มߋ͕༰қ
The biggest change that can be assumed = Framework migration
When Vue.js die, we should think about this
Why didn't we use Web Components earlier...?
ʁ A B A? B?
None
Replacing UI implementation with Web Components, we can respond flexibly
to changing frameworks
ͦΕ͕Webඪ४ͷڧΈ
What will become of us?
Vue.js is replaced by Web Components?
/P
Vue.js (and other frameworks) will be coexistent with Web Components
Web Components Vue.js (and other frameworks) Web Components Web Components
Web Components is "to encapsulate HTML elements"
Vue.js is "To make Web Applications"
5IFZEPOUEJSFDUMZ SFQMBDFCFDBVTF XIBUUIFZXBOUUPSFBMJ[F JTEJ⒎FSFOU
Summary
Summary w 8FC$PNQPOFOUTQSPEVDUJPOSFBEZ ͚ͩͲɺ՝ଟ͍ w 7VFKTͱ8FC$PNQPOFOUTڞଘͰ͖Δ w 6*Λ8FC$PNQPOFOUTʹ·͔ͤΔ͜ͱͰɺ ෛ࠴ΛݮΒ͢͜ͱ͕Ͱ͖Δ
Let's use Web Components!
THANK YOU! (font: Futura, ৽ΰ1SP)