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

Vue Fes Japan

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
November 03, 2018

Vue Fes Japan

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

November 03, 2018
Tweet

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 4IBEPX3PPU഑Լʹ4IBEPX5SFFͱ
 ݺ͹ΕΔ/PEF5SFF͕ੜ੒͞ΕΔ 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 #VJME5BSHFUTͰ΋͜ΕΛ࢖༻͍ͯ͠Δ 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. 5IFZEPOUEJSFDUMZ SFQMBDFCFDBVTF XIBUUIFZXBOUUPSFBMJ[F JTEJ⒎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)