Vue Fes Japan - Speaker Deck

Vue Fes Japan

by takanorip

Slide 1

Slide 1 text

The Good relation between Vue.js and Web Components To the future Takanori Oki @Vue Fes Japan

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What are Web Components?

Slide 5

Slide 5 text

Web Components w 8FCඪ४ٕज़ͰɺΧϓηϧԽ͞Εͨ  ίϯϙʔωϯτʢ෦඼ʣͷ࠶ར༻ΛՄೳʹ  ͢Δ֓೦ w 8FCඪ४ٕज़ͳͷͰɺಛఆͷπʔϧ΍  ϥΠϒϥϦʹґଘ͠ͳ͍ w ͦͷ··ϒϥ΢βͰಈ࡞͢Δ

Slide 6

Slide 6 text

Browser Support

Slide 7

Slide 7 text

production-ready!

Slide 8

Slide 8 text

We don't need to use polyﬁll library!!!! (except for IE and Edge)

Slide 9

Slide 9 text

Speciﬁcations • Custom Elements • Shadow DOM • HTML Template • ES ModulesʢHTML Importsʣ  HTML Modules

Slide 10

Slide 10 text

Custom Elements w ಠࣗͷػೳ΍ݟͨ໨Λ࣋ͬͨ)5.-ཁૉΛ  ఆٛͰ͖ΔΑ͏ʹ͢ΔͨΊͷ࢓༷ w ఆٛͨ͠)5.-ཁૉͷλάΛ)5.-தʹ  هड़ͯ͠࢖༻͢Δ w ͜ΕҎ߱ʮಠࣗͷػೳ΍ݟͨ໨Λ࣋ͬͨ)5.- ཁૉʯͷ͜ͱΛʮΧελϜཁૉʯͱݺͿ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Shadow DOM w %0.ͷΧϓηϧԽΛ࣮ݱ͢ΔͨΊͷ࢓༷ w 4IBEPX3PPU഑Լʹ4IBEPX5SFFͱ  ݺ͹ΕΔ/PEF5SFF͕ੜ੒͞ΕΔ w άϩʔόϧͷ$44΍+BWB4DSJQU͸  4IBEPX%0.಺෦ʹӨڹ͠ͳ͍

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

HTML Template w ཁૉΛ࢖༻͠)5.-υΩϡϝϯτ Ͱ)5.-ͷ਽ܗΛѻ͏ͨΊͷ࢓༷ w ͜Ε͸8)"58(%0.4UBOEBSEͷҰ෦ʹ औΓࠐ·Ε͍ͯΔ w +BWB4DSJQU͔Β΋ѻ͍΍͘͢͢ΔͨΊͷػೳ ֦ு΋ٞ࿦͕ਐΜͰ͍Δ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

ES Modules w &4Ͱಋೖ͞Εͨ&4.PEVMFTͷػೳΛ  ར༻ͯ͠ɺ֎෦Ͱఆٛ͞ΕͨΧελϜཁૉΛ  ಡΈࠐΉ w ͦͷલʹ)5.-*NQPSUTͱ͍͏࢓༷͕  ଘࡏ͍͕ͯͨ͠ɺഇࢭ͞Εͨ w HTML Modulesͱ͍͏࢓༷͕ٞ࿦͞Ε͍ͯΔ

Slide 19

Slide 19 text

HTML Imports w )5.-Λ)5.-ͰಡΈࠐΉͨΊͷ࢓༷ w ࣅͨػೳΛ࣋ͭ&4.PEVMFTͷ࢓༷͕҆ఆ͠ ϒϥ΢β࣮૷͕ग़ଗͬͨ͜ͱͰɺ  ඇਪ঑ʹͳͬͨ w ݱࡏ།Ұ࣮૷͞Ε͍ͯΔ(PPHMF$ISPNF  ͔Β΋೥य़ʹ࡟আ͞ΕΔ༧ఆ

Slide 20

Slide 20 text

HTML Modules w )5.-Λ+BWB4DSJQUͷதʹ௚઀*NQPSUՄೳ  ʹ͢Δ࢓༷ w 8FCQBDLͷIUNMMPBEFSʹࣅͨػೳΛ  ϒϥ΢βͰαϙʔτ͠Α͏ͱ͍͏΋ͷ w ·ͩ(JU)VCͷ*TTVFͰٞ࿦͞Ε͍ͯΔஈ֊  ʢ$44.PEVMFT΋ಉ࣌ʹٞ࿦͞Ε͍ͯΔʣ

Slide 21

Slide 21 text

How to use Web Components with Vue.js?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

How to build Web Components with Vue.js?

Slide 25

Slide 25 text

Vue CLI 3 Build Targets w 7VF$-*ͰCVJME͢Δͱ͖ɺ--target wcͱ ͍͏ΦϓγϣϯΛ͚ͭΔͱɺ7VFKTͷ  ίϯϙʔωϯτΛ8FC$PNQPOFOUTʹ  ม׵ͯ͠CVJME͢Δ͜ͱ͕Ͱ͖Δ w ͜ΕͰੜ੒͞ΕͨϑΝΠϧ͸ɺ୯ମͰ  8FC$PNQPOFOUTͱͯ͠ಈ࡞͢Δ

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

@vue/web-component-wrapper w 7VFίϯϙʔωϯτΛϥοϓͯ͠  ΧελϜཁૉͱͯ͠ొ࿥͢Δ w #VJME5BSHFUTͰ΋͜ΕΛ࢖༻͍ͯ͠Δ w 7VFKTΛϥοϓ͍ͯ͠ΔͷͰɺ  ௨ৗͷ8FC$PNQPOFOUTͱൺ΂ͯ  ϑΝΠϧαΠζ͕େ͖͍

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

͜ͷػೳΛ࢖͏͜ͱͰ Vue.jsͷίϯϙʔωϯτΛ Web Components΁ εϜʔζʹҠߦͰ͖Δ

Slide 31

Slide 31 text

·ͨɺWeb Componentsͷ ෦෼తͳಋೖʹ΋໾ཱͭ

Slide 32

Slide 32 text

Why we use Web Components?

Slide 33

Slide 33 text

1. We can use the same component with any JavaScript Libraries

Slide 34

Slide 34 text

For example... w 6*ϑϨʔϜϫʔΫΛ౷Ұ͍ͨ͠  +BWB4DSJQUϑϨʔϜϫʔΫ͝ͱʹ6*ϑϨʔϜ ϫʔΫ࢖͍෼͚Δͷɺޮ཰ѱ͍ w ϑϨʔϜϫʔΫΛมߋ͠ͳͯ͘͸ͳΒͳ͘ͳͬ ͨͱ͖ɺ6*෦෼Λ࢖͍ճ͢͜ͱ͕Ͱ͖Δ w ֎෦ެ։͠΍͍͢

Slide 35

Slide 35 text

2. Fully Scoped

Slide 36

Slide 36 text

For example... w େ͖͍ϓϩδΣΫτͰ$44ͷґଘؔ܎͕  Α͘Θ͔Βͳ͍ͷͰɺHMPCBMͳ$44ʹӨڹ  ͞Εͳ͍࣮૷͕͍ͨ͠ w ֎෦ެ։͍ͨ͠

Slide 37

Slide 37 text

Demerit w ଐੑ஋ʹ4USJOHܕ͔͠౉ͤͳ͍ w ֎෦͔Β౉͞ΕΔΠϕϯτͷϋϯυϦϯά͕ ೉͍͠ w %0.ཁૉͷऔΓճ͕͠໘౗ w $44ͷઃܭΛେ෯ʹݟ௚͢ඞཁ͕͋Δ

Slide 38

Slide 38 text

ਖ਼௚ɺ7VFKTͷػೳΛ࢖ͬͯίϯϙʔωϯτ ࡞ͬͨ΄͏͕ॊೈͰػೳతͰ؆ܿ

Slide 39

Slide 39 text

3. Micro Frontends

Slide 40

Slide 40 text

Micro Frontends? • Be Technology Agnostic • Isolate Team Code • Establish Team Preﬁxes • Favor Native Browser Features over   Custom APIs • Build a Resilient Site

Slide 41

Slide 41 text

Think about a web app as a composition of features

Slide 42

Slide 42 text

Functions Normal Frontend

Slide 43

Slide 43 text

Function1 Micro Frontend Function2 Function4 Function3

Slide 44

Slide 44 text

Build a Resilient Site

Slide 45

Slide 45 text

w CSSͷมߋ w ࢖༻͢ΔϥΠϒϥϦͷมߋ w JavaScriptͷมߋ w DOMߏ଄ͷมߋ • etc...

Slide 46

Slide 46 text

Web ComponentsͳΒ ScopedͳͷͰ มߋ͕༰қ

Slide 47

Slide 47 text

The biggest change that can be assumed = Framework migration

Slide 48

Slide 48 text

When Vue.js die, we should think about this

Slide 49

Slide 49 text

Why didn't we use Web Components earlier...?

Slide 50

Slide 50 text

ʁ A B A? B?

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Replacing UI implementation with Web Components, we can respond ﬂexibly to changing frameworks

Slide 53

Slide 53 text

ͦΕ͕Webඪ४ͷڧΈ

Slide 54

Slide 54 text

What will become of us?

Slide 55

Slide 55 text

Vue.js is replaced by Web Components?

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Vue.js (and other frameworks) will be coexistent with Web Components

Slide 58

Slide 58 text

Web Components Vue.js (and other frameworks) Web Components Web Components

Slide 59

Slide 59 text

Web Components is  "to encapsulate HTML elements"

Slide 60

Slide 60 text

Vue.js is  "To make  Web Applications"

Slide 61

Slide 61 text

5IFZEPOUEJSFDUMZ SFQMBDFCFDBVTF XIBUUIFZXBOUUPSFBMJ[F JTEJ⒎FSFOU

Slide 62

Slide 62 text

Summary

Slide 63

Slide 63 text

Summary w 8FC$PNQPOFOUT͸QSPEVDUJPOSFBEZ  ͚ͩͲɺ՝୊΋ଟ͍ w 7VFKTͱ8FC$PNQPOFOUT͸ڞଘͰ͖Δ w 6*Λ8FC$PNQPOFOUTʹ·͔ͤΔ͜ͱͰɺ ෛ࠴ΛݮΒ͢͜ͱ͕Ͱ͖Δ