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
3. None

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

    ཁૉʯͷ͜ͱΛʮΧελϜཁૉʯͱݺͿ
11. None
12. None

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

14. None
15. None

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

    ֦ு΋ٞ࿦͕ਐΜͰ͍Δ
17. None

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?

22. None
23. None

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ͱͯ͠ಈ࡞͢Δ
26. None
27. None

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

29. None

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?

51. None

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)