Web Components with Vue.js 2018

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 !
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
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
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
24. THANK YOU ! ( Font : Vegur)