Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Vue.js with Web Components
hiro
November 10, 2018
Programming
2
6.9k
Vue.js with Web Components
hiro
November 10, 2018
Tweet
Share
More Decks by hiro
See All by hiro
takahirosaeki
0
170
takahirosaeki
0
360
Other Decks in Programming
See All in Programming
xrdnk
0
130
cwozaki
1
1.9k
attsumi
1
460
akatsukinewgrad
0
220
yagitatsu
3
1.6k
standfm
0
250
nbkouhou
0
970
kazuki19992
0
450
akkeylab
0
360
yumcyawiz
4
650
thatjeffsmith
0
450
line_developers_tw2
0
130
Featured
See All Featured
trishagee
20
2.1k
samlambert
237
9.9k
jmmastey
9
540
danielanewman
200
20k
colly
66
3k
yeseniaperezcruz
302
31k
productmarketing
5
660
chrislema
173
14k
morganepeng
92
14k
tenderlove
52
3.4k
holman
288
130k
sachag
267
17k
Transcript
Vue.js with Web Components
5BLBIJSP4BFLJ 'SPOU&OE%FWFMPQFS )PCCZ%%3 %BODFSVTI 5XJUUFS!IJSPEFBUI (JU)VCUBLBIJSPTBFLJ
ίϛέ$౦τC৽ץग़͠·͢ʂʂʂʂ
Disclaimer
None
web components
8FC$PNQPOFOUTͱ 8FCϖʔδ8FCΞϓϦέʔγϣϯͷதͰ࠶ར༻ՄೳͰΧϓηϧԽ͞Εͨ ಠࣗͷ)5.-λάΛ࡞͢Δҝͷ༷Ͱ͢ɻ 8FC$PNQPOFOUTओʹͭͷ༷Ͱߏ͞Ε͍ͯ·͢ɻ )5.-5FNQMBUFT $VTUPN&MFNFOUT 4IBEPX%PN &4.PEVMFT
None
None
XFCDPNQPOFOUTΛܽΛิ͓͏ҝʹ ૉͷXFCDPNQPOFOUT͚ͩͩͱBUUSJCVUF͕มߋͨ͠ࡍʹɺ %0.શମ͕࠶ඳը͞Εͯ͠·͏ Կ͔͠ΒͷϦετΛදࣔͤ͞ΔΑ͏ͳ$VTUPN&MFNFOUTΛ ࡞ͨ͠߹ʹɺྫ͑Ϧετͷ༰ͷҰ෦͔͠มߋࠩҟ͕ͳ͔ͬͨ ͱͯ͠Ϧετશମ͕࠶ඳը͞Εͯ͠·͏ɻ ͦͷܽΛิ͏ҝʹMJUIUNMɺMJUFMFNFOUIZQFS)UNMͱ͍ͬͨ খ͞ͳԾ%0.Λ7JFXͷϥΠϒϥϦͱͯ͠༻͢Δͱ͜ͷΛ ղܾग़དྷΔɻ
None
None
͏ҰͭͷXFCDPNQPOFOUTͷܽ )PU.PEVMF3FQMBDFNFOU ).3 ͕ޮ͔ͳ͍ɻ ͱ͍͏ͷ$VTUPN&MFNFOU3FHJTUSZʹ$VTUPN&MFNFOUTΛҰొ͢Δͱ ొͨ͠$VTUPN&MFNFOUTΛഁغͨ͠ΓɺΞοϓσʔτ͢Δखஈ͕ແ͍ɻ ͦͷҝɺ).3͕༗ޮԽ͞Ε͍ͯΔXFCQBDLڥQBSDFMCVOEMFSͷڥͰ $VTUPN&MFNFOUTΛ։ൃ͍ͯ͠ΔͱɺϑΝΠϧΛมߋͯ͠ϒϥβʹ දࣔ͞Ε͍ͯΔ%0.Ξοϓσʔτ͞Εͳ͍ɻ
Vue.js + Web Components
7VFKT্ͰXFCDPNQPOFOUTΛ͏ OQN͔ΒJOTUBMMͯ͠ಡΈࠐΈɺͦͷ··༻ग़དྷΔɻ
None
None
None
None
7VFKT্ͰXFCDPNQPOFOUTΛ࡞Δ 7VF$-*ͷΦϓγϣϯΛͬͯ࡞Δ͜ͱ͕ग़དྷΔ
None
None
None
None
7VFKTΛ༻ͯ͠8FC$PNQPOFOUTΛ ࡞ΔϝϦοτ 7VF$PNQPOFOUΛͦͷ··8FC$PNQPOFOUTͱͯ͠ੜग़དྷΔ ).3͕༗ޮԽͨ͠ঢ়ଶͰ8FC$PNQPOFOUTΛ։ൃग़དྷΔ ࠩඳը͞ΕΔͷͰૉͰ8FC$PNQPOFOUTΛ࡞ΔΑΓ ύϑΥʔϚϯε͕ྑ͍ͱࢥ͏
7VFKTΛ༻ͯ͠8FC$PNQPOFOUTΛ ࡞ΔσϝϦοτ 7VFKTΛ෦Ͱแ͍ͯ͠Δҝɺී௨ʹ8FC$PNQPOFOUTΛ࡞ΔΑΓ ϑΝΠϧαΠζ͕ॏ͍ͨ
Micro Frontends
None
.JDSP'SPOUFOETͱ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ுͨ͠ͷɻ ಛʹେاۀͩͱ͋Δ෦ॺ͕࡞ͨ͠6*ίϯϙʔωϯτΛྲྀ༻ͯ͠༻͢Δ έʔε͕͋ͬͨΓ͢Δɻ ͍҃اۀͷϒϥϯυσβΠϯݪଇʹԊͬͯಉ͡Α͏ͳ6*Λ֤ͦΕͧΕͷ ෦ॺͰ࡞͢Δέʔε͕͋Δɻ ͦ͏͍ͬͨ߹ʹɺ6*ίϯϙʔωϯτΛXFCDPNQPOFOUTͰ͢Δ ͜ͱͰΛղܾ͢Δɻ
ྫ͑ ·ͨXFCDPNQPOFOUTΛ༻͍ͯ͠Δͱ7VFKT3FBDUKTͳͲɺϥΠϒϥϦ ϑϨʔϜϫʔΫଆͷରԠʹΑΔ͕ɺ෦ͰXFCDPNQPOFOUTΛ༻͢Δ͜ͱ͕ ग़དྷΔͷͰɺকདྷతͳΞʔΩςΫνϟʔมߋ͕ൃੜͨ͠ࡍʹɺ6*͕ෛ࠴ʹͳΓ ʹ͍͘ ͱ͍͑ɺݱࡏ7VFKT3FBDUKTڥԼͰͷ41"XFCΞϓϦΛ։ൃ͍ͯ͠ΔͷͰ ͋Εૉʹ7VFDPNQPOFOU3FBDUDPNQPOFOUͰߏஙͨ͠ํ͕ྑ͍ͱ ࢥ͏ɻ
None
ݸਓతͳײ 7VFKTͰͷ։ൃʹ׳Ε͍ͯΕଞ෦ॺ ͘͠ଞͷ৫ʹ 8FC$PNQPOFOUT ͱͯ͠ؾܰʹϥΠϒϥϦΛఏڙग़དྷͦ͏ɻ 7VFKTͩͱ8FC$PNQPOFOUTͷαϙʔτ͢Δʹͯ͠࡞Δʹͯ͠αϙʔτ͕ ް͍ͱࢥ͏ɻ ͱ͍͑7VFKTͰ8FC$PNQPOFOUTΛ࡞Δͷ͕ਖ਼ͩͱࢥΘͳ͍͕ɺ ଞͷϥΠϒϥϦΛ༻͢ΔΑΓεϜʔζʹऔΓ͔͔ΕΔͱࢥ͏ɻ
օ͞Μ8FC$PNQPOFOUT࢝ΊͯΈ·ͤΜ͔ʁ
Fin.