Save 37% off PRO during our Black Friday Sale! »

Web Components with Vue.js 2018

Web Components with Vue.js 2018

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

July 30, 2018
Tweet

Transcript

  1. Web Components with Vue.js 2018 Takanori OKi @Vue.js Night Nagoya

  2. Self Introduction • Takanori Oki ( @takanorip ) • SmartDrive

    Inc.
 Frontend Developer based in Tokyo • Nuxt.js, React, Polymer, etc… • Polymer Japan Translation team • I have published a book recently !
  3. None
  4. None
  5. What are Web Components?

  6. What are Web Components? Web components are a set of

    web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. by webcomponents.org
  7. Feature of Web Components • Based on existing web standards

    • Can make components that is encapsulated styling • Can Use with any JavaScript Frameworks
  8. What are Web Components? • Custom Elements • Shadow DOM

    • HTML Imports (deprecated)
 → Under Discussion 
 (ES Modules / HTML Modules?) • HTML Templates
  9. Browser support Chrome Safari Firefox Edge HTML Templates STABLE STABLE

    STABLE STABLE Custom Elements STABLE STABLE DEVELOPING CONSIDERING Shadow DOM STABLE STABLE DEVELOPING CONSIDERING ES Modules STABLE STABLE STABLE STABLE HTML Imports STABLE POLYFILL POLYFILL POLYFILL
  10. Web Components with Vue.js

  11. We want to use same custom components between different JavaScript

    Frameworks !!! (React, Vue, Angular…)
  12. How use Web Components?

  13. lit-html https://github.com/Polymer/lit-html

  14. What is lit-html? • JavaScript template literals + HTML templates

    • Extremely fast • Give you the full power of JavaScript and functional programming patterns • Extremely customizable and extensible
  15. None
  16. None
  17. None
  18. lit-extended • lit-html is a library for handling HTML •

    So it can pass values to component as String only • lit-extended is a solution of this demerit
  19. Create Web Components with Vue CLI 3

  20. vue-web-component-wrapper • Wrap and register a Vue component as a

    custom element • Use Vue Components in Other JS Frameworks (React, Angular…) as a Web Components • Not affected by external CSS
  21. None
  22. Building • Use “vue-cli-service build” command • Produce a production-ready

    bundle with minification for JS/CSS/HTML • Also Use “—target wc” option • Create a bundle for building a web component
  23. None
  24. THANK YOU ! ( Font : Vegur)