Vue Fes Japan

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