Vue Fes Japan

Transcript

1. The Good relation between Vue.js and Web Components To the future Takanori Oki @Vue Fes Japan
2. 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
4. What are Web Components?
5. Web Components w 8FCඪ४ٕज़ͰɺΧϓηϧԽ͞Εͨ
 ίϯϙʔωϯτʢ෦඼ʣͷ࠶ར༻ΛՄೳʹ
 ͢Δ֓೦
   w 8FCඪ४ٕज़ͳͷͰɺಛఆͷπʔϧ΍
 ϥΠϒϥϦʹґଘ͠ͳ͍
   w ͦͷ··ϒϥ΢βͰಈ࡞͢Δ
6. Browser Support
7. production-ready!
8. We don't need to use polyfill library!!!! (except for IE and Edge)
9. Specifications • Custom Elements • Shadow DOM • HTML Template • ES ModulesʢHTML Importsʣ
 HTML Modules
10. Custom Elements w ಠࣗͷػೳ΍ݟͨ໨Λ࣋ͬͨ)5.-ཁૉΛ
 ఆٛͰ͖ΔΑ͏ʹ͢ΔͨΊͷ࢓༷
    w ఆٛͨ͠)5.-ཁૉͷλάΛ)5.-தʹ
 هड़ͯ͠࢖༻͢Δ
    w ͜ΕҎ߱ʮಠࣗͷػೳ΍ݟͨ໨Λ࣋ͬͨ)5.- ཁૉʯͷ͜ͱΛʮΧελϜཁૉʯͱݺͿ
13. Shadow DOM w %0.ͷΧϓηϧԽΛ࣮ݱ͢ΔͨΊͷ࢓༷
    w 4IBEPX
    3PPU഑Լʹ4IBEPX
    5SFFͱ
 ݺ͹ΕΔ/PEF
    5SFF͕ੜ੒͞ΕΔ
    w άϩʔόϧͷ$44΍+BWB4DSJQU͸
 4IBEPX
    %0.಺෦ʹӨڹ͠ͳ͍
16. HTML Template w <templates>ཁૉΛ࢖༻͠)5.-υΩϡϝϯτ Ͱ)5.-ͷ਽ܗΛѻ͏ͨΊͷ࢓༷
    w ͜Ε͸8)"58(
    %0.
    4UBOEBSEͷҰ෦ʹ औΓࠐ·Ε͍ͯΔ
    w +BWB4DSJQU͔Β΋ѻ͍΍͘͢͢ΔͨΊͷػೳ ֦ு΋ٞ࿦͕ਐΜͰ͍Δ
18. ES Modules w &4Ͱಋೖ͞Εͨ&4
    .PEVMFTͷػೳΛ
 ར༻ͯ͠ɺ֎෦Ͱఆٛ͞ΕͨΧελϜཁૉΛ
 ಡΈࠐΉ
    w ͦͷલʹ)5.-
    *NQPSUTͱ͍͏࢓༷͕
 ଘࡏ͍͕ͯͨ͠ɺഇࢭ͞Εͨ
    w HTML Modulesͱ͍͏࢓༷͕ٞ࿦͞Ε͍ͯΔ
19. HTML Imports w )5.-Λ)5.-ͰಡΈࠐΉͨΊͷ࢓༷
    w ࣅͨػೳΛ࣋ͭ&4
    .PEVMFTͷ࢓༷͕҆ఆ͠ ϒϥ΢β࣮૷͕ग़ଗͬͨ͜ͱͰɺ
 ඇਪ঑ʹͳͬͨ
    w ݱࡏ།Ұ࣮૷͞Ε͍ͯΔ(PPHMF
    $ISPNF
 ͔Β΋೥य़ʹ࡟আ͞ΕΔ༧ఆ
20. HTML Modules w )5.-Λ+BWB4DSJQUͷதʹ௚઀*NQPSUՄೳ
 ʹ͢Δ࢓༷
    w 8FCQBDLͷIUNMMPBEFSʹࣅͨػೳΛ
 ϒϥ΢βͰαϙʔτ͠Α͏ͱ͍͏΋ͷ
    w ·ͩ(JU)VCͷ*TTVFͰٞ࿦͞Ε͍ͯΔஈ֊
 ʢ$44
    .PEVMFT΋ಉ࣌ʹٞ࿦͞Ε͍ͯΔʣ
21. How to use Web Components with Vue.js?
24. How to build Web Components with Vue.js?
25. Vue CLI 3 Build Targets w 7VF
    $-*
    ͰCVJME͢Δͱ͖ɺ--target wc
    ͱ ͍͏ΦϓγϣϯΛ͚ͭΔͱɺ7VFKTͷ
 ίϯϙʔωϯτΛ8FC
    $PNQPOFOUTʹ
 ม׵ͯ͠CVJME͢Δ͜ͱ͕Ͱ͖Δ
    w ͜ΕͰੜ੒͞ΕͨϑΝΠϧ͸ɺ୯ମͰ
 8FC
    $PNQPOFOUTͱͯ͠ಈ࡞͢Δ
28. @vue/web-component-wrapper w 7VFίϯϙʔωϯτΛϥοϓͯ͠
 ΧελϜཁૉͱͯ͠ొ࿥͢Δ
    w #VJME
    5BSHFUTͰ΋͜ΕΛ࢖༻͍ͯ͠Δ
    w 7VFKTΛϥοϓ͍ͯ͠ΔͷͰɺ
 ௨ৗͷ8FC
    $PNQPOFOUTͱൺ΂ͯ
 ϑΝΠϧαΠζ͕େ͖͍
30. ͜ͷػೳΛ࢖͏͜ͱͰ
    Vue.jsͷίϯϙʔωϯτΛ Web Components΁
    εϜʔζʹҠߦͰ͖Δ
31. ·ͨɺWeb Componentsͷ ෦෼తͳಋೖʹ΋໾ཱͭ
32. Why we use Web Components?
33. 1. We can use the same component with any JavaScript Libraries
34. For example... w 6*ϑϨʔϜϫʔΫΛ౷Ұ͍ͨ͠
 +BWB4DSJQUϑϨʔϜϫʔΫ͝ͱʹ6*ϑϨʔϜ ϫʔΫ࢖͍෼͚Δͷɺޮ཰ѱ͍
    w ϑϨʔϜϫʔΫΛมߋ͠ͳͯ͘͸ͳΒͳ͘ͳͬ ͨͱ͖ɺ6*෦෼Λ࢖͍ճ͢͜ͱ͕Ͱ͖Δ
    w ֎෦ެ։͠΍͍͢
35. 2. Fully Scoped
36. For example... w େ͖͍ϓϩδΣΫτͰ$44ͷґଘؔ܎͕
 Α͘Θ͔Βͳ͍ͷͰɺHMPCBMͳ$44ʹӨڹ
 ͞Εͳ͍࣮૷͕͍ͨ͠
    w ֎෦ެ։͍ͨ͠
37. Demerit w ଐੑ஋ʹ4USJOHܕ͔͠౉ͤͳ͍
    w ֎෦͔Β౉͞ΕΔΠϕϯτͷϋϯυϦϯά͕ ೉͍͠
    w %0.ཁૉͷऔΓճ͕͠໘౗
    w $44ͷઃܭΛେ෯ʹݟ௚͢ඞཁ͕͋Δ
38. ਖ਼௚ɺ7VFKTͷػೳΛ࢖ͬͯίϯϙʔωϯτ ࡞ͬͨ΄͏͕ॊೈͰػೳతͰ؆ܿ
39. 3. Micro Frontends
40. Micro Frontends? • Be Technology Agnostic • Isolate Team Code • Establish Team Prefixes • Favor Native Browser Features over 
 Custom APIs • Build a Resilient Site
41. Think about a web app as a composition of features
42. Functions Normal Frontend
43. Function1 Micro Frontend Function2 Function4 Function3
44. Build a Resilient Site
45. w CSSͷมߋ
    w ࢖༻͢ΔϥΠϒϥϦͷมߋ
    w JavaScriptͷมߋ
    w DOMߏ଄ͷมߋ
    • etc...
46. Web ComponentsͳΒ
    ScopedͳͷͰ
    มߋ͕༰қ
47. The biggest change that can be assumed = Framework migration
48. When Vue.js die, we should think about this
49. Why didn't we use Web Components earlier...?
50. ʁ A B A? B?
52. Replacing UI implementation with Web Components, we can respond flexibly to changing frameworks
53. ͦΕ͕Webඪ४ͷڧΈ
54. What will become of us?
55. Vue.js is replaced by Web Components?
56. /P
57. Vue.js (and other frameworks) will be coexistent with Web Components
58. Web Components Vue.js (and other frameworks) Web Components Web Components
59. Web Components is
 "to encapsulate HTML elements"
60. Vue.js is
 "To make
 Web Applications"
61. 5IFZ
    EPOU
    EJSFDUMZ
    SFQMBDF
    CFDBVTF
    XIBU
    UIFZ
    XBOU
    UP
    SFBMJ[F
    JT
    EJ⒎FSFOU
62. Summary
63. Summary w 8FC
    $PNQPOFOUT͸QSPEVDUJPOSFBEZ
 ͚ͩͲɺ՝୊΋ଟ͍
    w 7VFKTͱ8FC
    $PNQPOFOUT͸ڞଘͰ͖Δ
    w 6*Λ8FC
    $PNQPOFOUTʹ·͔ͤΔ͜ͱͰɺ ෛ࠴ΛݮΒ͢͜ͱ͕Ͱ͖Δ
64. Let's use Web Components!
65. THANK YOU! (font: Futura, ৽ΰ1SP)