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 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 Slide

  3. View Slide

  4. What are
    Web Components?

    View Slide

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

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

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

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

    View Slide

  6. Browser Support

    View Slide

  7. production-ready!

    View Slide

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

    View Slide

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

    HTML Modules

    View Slide

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

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

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

    View Slide

  11. View Slide

  12. View Slide

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

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

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

    View Slide

  14. View Slide

  15. View Slide

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

    View Slide

  17. View Slide

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

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

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

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

    View Slide

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

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

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

    View Slide

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

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

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

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

    View Slide

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

    View Slide

  22. View Slide

  23. View Slide

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

    View Slide

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

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

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

    8FC$PNQPOFOUTͱͯ͠ಈ࡞͢Δ

    View Slide

  26. View Slide

  27. View Slide

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

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

    ௨ৗͷ8FC$PNQPOFOUTͱൺ΂ͯ

    ϑΝΠϧαΠζ͕େ͖͍

    View Slide

  29. View Slide

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

    View Slide

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

    View Slide

  32. Why we use
    Web Components?

    View Slide

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

    View Slide

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

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

    View Slide

  35. 2. Fully Scoped

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

  39. 3. Micro Frontends

    View Slide

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

    Custom APIs
    • Build a Resilient Site

    View Slide

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

    View Slide

  42. Functions
    Normal Frontend

    View Slide

  43. Function1
    Micro Frontend
    Function2
    Function4
    Function3

    View Slide

  44. Build a Resilient Site

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. ʁ
    A
    B
    A?
    B?

    View Slide

  51. View Slide

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

    View Slide

  53. ͦΕ͕Webඪ४ͷڧΈ

    View Slide

  54. What will become of us?

    View Slide

  55. Vue.js is replaced
    by Web Components?

    View Slide

  56. /P

    View Slide

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

    View Slide

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

    View Slide

  59. Web Components is

    "to encapsulate HTML
    elements"

    View Slide

  60. Vue.js is

    "To make

    Web Applications"

    View Slide

  61. 5IFZEPOUEJSFDUMZ
    SFQMBDFCFDBVTF
    XIBUUIFZXBOUUPSFBMJ[F
    JTEJ⒎FSFOU

    View Slide

  62. Summary

    View Slide

  63. Summary
    w 8FC$PNQPOFOUT͸QSPEVDUJPOSFBEZ

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

    View Slide

  64. Let's use
    Web Components!

    View Slide

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

    View Slide