Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue Fes Japan

takanorip
November 03, 2018

Vue Fes Japan

takanorip

November 03, 2018
Tweet

More Decks by takanorip

Other Decks in Programming

Transcript

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

    View full-size slide

  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

    View full-size slide

  3. What are
    Web Components?

    View full-size slide

  4. Web Components
    w 8FCඪ४ٕज़ͰɺΧϓηϧԽ͞Εͨ

    ίϯϙʔωϯτʢ෦඼ʣͷ࠶ར༻ΛՄೳʹ

    ͢Δ֓೦
    w 8FCඪ४ٕज़ͳͷͰɺಛఆͷπʔϧ΍

    ϥΠϒϥϦʹґଘ͠ͳ͍
    w ͦͷ··ϒϥ΢βͰಈ࡞͢Δ

    View full-size slide

  5. Browser Support

    View full-size slide

  6. production-ready!

    View full-size slide

  7. We
    don't need to use
    polyfill library!!!!
    (except for IE and Edge)

    View full-size slide

  8. Specifications
    • Custom Elements
    • Shadow DOM
    • HTML Template
    • ES ModulesʢHTML Importsʣ

    HTML Modules

    View full-size slide

  9. Custom Elements
    w ಠࣗͷػೳ΍ݟͨ໨Λ࣋ͬͨ)5.-ཁૉΛ

    ఆٛͰ͖ΔΑ͏ʹ͢ΔͨΊͷ࢓༷
    w ఆٛͨ͠)5.-ཁૉͷλάΛ)5.-தʹ

    هड़ͯ͠࢖༻͢Δ
    w ͜ΕҎ߱ʮಠࣗͷػೳ΍ݟͨ໨Λ࣋ͬͨ)5.-
    ཁૉʯͷ͜ͱΛʮΧελϜཁૉʯͱݺͿ

    View full-size slide

  10. Shadow DOM
    w %0.ͷΧϓηϧԽΛ࣮ݱ͢ΔͨΊͷ࢓༷
    w 4IBEPX3PPU഑Լʹ4IBEPX5SFFͱ

    ݺ͹ΕΔ/PEF5SFF͕ੜ੒͞ΕΔ
    w άϩʔόϧͷ$44΍+BWB4DSJQU͸

    4IBEPX%0.಺෦ʹӨڹ͠ͳ͍

    View full-size slide

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

    View full-size slide

  12. ES Modules
    w &4Ͱಋೖ͞Εͨ&4.PEVMFTͷػೳΛ

    ར༻ͯ͠ɺ֎෦Ͱఆٛ͞ΕͨΧελϜཁૉΛ

    ಡΈࠐΉ
    w ͦͷલʹ)5.-*NQPSUTͱ͍͏࢓༷͕

    ଘࡏ͍͕ͯͨ͠ɺഇࢭ͞Εͨ
    w HTML Modulesͱ͍͏࢓༷͕ٞ࿦͞Ε͍ͯΔ

    View full-size slide

  13. HTML Imports
    w )5.-Λ)5.-ͰಡΈࠐΉͨΊͷ࢓༷
    w ࣅͨػೳΛ࣋ͭ&4.PEVMFTͷ࢓༷͕҆ఆ͠
    ϒϥ΢β࣮૷͕ग़ଗͬͨ͜ͱͰɺ

    ඇਪ঑ʹͳͬͨ
    w ݱࡏ།Ұ࣮૷͞Ε͍ͯΔ(PPHMF$ISPNF

    ͔Β΋೥य़ʹ࡟আ͞ΕΔ༧ఆ

    View full-size slide

  14. HTML Modules
    w )5.-Λ+BWB4DSJQUͷதʹ௚઀*NQPSUՄೳ

    ʹ͢Δ࢓༷
    w 8FCQBDLͷIUNMMPBEFSʹࣅͨػೳΛ

    ϒϥ΢βͰαϙʔτ͠Α͏ͱ͍͏΋ͷ
    w ·ͩ(JU)VCͷ*TTVFͰٞ࿦͞Ε͍ͯΔஈ֊

    ʢ$44.PEVMFT΋ಉ࣌ʹٞ࿦͞Ε͍ͯΔʣ

    View full-size slide

  15. How to use
    Web Components
    with Vue.js?

    View full-size slide

  16. How to build
    Web Components
    with Vue.js?

    View full-size slide

  17. Vue CLI 3 Build Targets
    w 7VF$-*ͰCVJME͢Δͱ͖ɺ--target wcͱ
    ͍͏ΦϓγϣϯΛ͚ͭΔͱɺ7VFKTͷ

    ίϯϙʔωϯτΛ8FC$PNQPOFOUTʹ

    ม׵ͯ͠CVJME͢Δ͜ͱ͕Ͱ͖Δ
    w ͜ΕͰੜ੒͞ΕͨϑΝΠϧ͸ɺ୯ମͰ

    8FC$PNQPOFOUTͱͯ͠ಈ࡞͢Δ

    View full-size slide

  18. @vue/web-component-wrapper
    w 7VFίϯϙʔωϯτΛϥοϓͯ͠

    ΧελϜཁૉͱͯ͠ొ࿥͢Δ
    w #VJME5BSHFUTͰ΋͜ΕΛ࢖༻͍ͯ͠Δ
    w 7VFKTΛϥοϓ͍ͯ͠ΔͷͰɺ

    ௨ৗͷ8FC$PNQPOFOUTͱൺ΂ͯ

    ϑΝΠϧαΠζ͕େ͖͍

    View full-size slide

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

    View full-size slide

  20. ·ͨɺWeb Componentsͷ
    ෦෼తͳಋೖʹ΋໾ཱͭ

    View full-size slide

  21. Why we use
    Web Components?

    View full-size slide

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

    View full-size slide

  23. For example...
    w 6*ϑϨʔϜϫʔΫΛ౷Ұ͍ͨ͠

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

    View full-size slide

  24. 2. Fully Scoped

    View full-size slide

  25. For example...
    w େ͖͍ϓϩδΣΫτͰ$44ͷґଘؔ܎͕

    Α͘Θ͔Βͳ͍ͷͰɺHMPCBMͳ$44ʹӨڹ

    ͞Εͳ͍࣮૷͕͍ͨ͠
    w ֎෦ެ։͍ͨ͠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 3. Micro Frontends

    View full-size slide

  29. Micro Frontends?
    • Be Technology Agnostic
    • Isolate Team Code
    • Establish Team Prefixes
    • Favor Native Browser Features over 

    Custom APIs
    • Build a Resilient Site

    View full-size slide

  30. Think about a web app
    as a composition of
    features

    View full-size slide

  31. Functions
    Normal Frontend

    View full-size slide

  32. Function1
    Micro Frontend
    Function2
    Function4
    Function3

    View full-size slide

  33. Build a Resilient Site

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. The biggest change that
    can be assumed
    = Framework migration

    View full-size slide

  37. When Vue.js die,
    we should think about
    this

    View full-size slide

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

    View full-size slide

  39. Replacing UI
    implementation with
    Web Components, we
    can respond flexibly to
    changing frameworks

    View full-size slide

  40. ͦΕ͕Webඪ४ͷڧΈ

    View full-size slide

  41. What will become of us?

    View full-size slide

  42. Vue.js is replaced
    by Web Components?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Web Components is

    "to encapsulate HTML
    elements"

    View full-size slide

  46. Vue.js is

    "To make

    Web Applications"

    View full-size slide

  47. 5IFZEPOUEJSFDUMZ
    SFQMBDFCFDBVTF
    XIBUUIFZXBOUUPSFBMJ[F
    JTEJ⒎FSFOU

    View full-size slide

  48. Summary
    w 8FC$PNQPOFOUT͸QSPEVDUJPOSFBEZ

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

    View full-size slide

  49. Let's use
    Web Components!

    View full-size slide

  50. THANK YOU!
    (font: Futura, ৽ΰ1SP)

    View full-size slide