[DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam
2 likes547 views
The document provides an overview of web components and the Polymer library, which facilitates the creation of reusable UI components using open web technology. It details the main features of web components, such as shadow DOM, custom elements, templates, and HTML imports, and explains their benefits, including encapsulation and reusability. Additionally, it includes guidance on creating and reusing custom elements and provides resources for further practice.
![[DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam](https://image.slidesharecdn.com/dev-day-polymer-160414042021/85/DevDay-2016-Web-Components-is-it-the-future-of-Web-Development-Speaker-Vinh-Nguyen-Developer-at-Axon-Active-Vietnam-1-320.jpg)
[DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam
- 2. Web Components and Polymer
- 3. www.axon.vnfb.com/AxonActiveVietNam Agenda What are Web Components? What is Polymer? How to use Polymer? Q & A
- 8. www.axon.vnfb.com/AxonActiveVietNam What are Web Components
- 9. www.axon.vnfb.com/AxonActiveVietNam You can think of Web Components as reusable user interface widgets that are created using open Web technology. What are Web Components?
- 10. www.axon.vnfb.com/AxonActiveVietNam What are Web Components? 1. Shadow DOM 2. Custom Elements 3. Templates 4. HTML Imports
- 12. www.axon.vnfb.com/AxonActiveVietNam Shadow DOM Shadow DOM is a new part of the HTML spec which allows developers to encapsulate their HTML markup, CSS styles and JavaScript.
- 17. www.axon.vnfb.com/AxonActiveVietNam Custom Elements Custom Elements, which let authors define their own elements, including new presentation and API, that can be used in HTML documents
- 20. www.axon.vnfb.com/AxonActiveVietNam Templates Templates are where we define reusable HTML code that can be cloned and inserted in the page by Javascript
- 22. www.axon.vnfb.com/AxonActiveVietNam HTML Import HTML Imports provide a way to include and reuse HTML documents in other HTML documents. <link rel=“import” href=“my-element.html”>
- 26. www.axon.vnfb.com/AxonActiveVietNam • Encapsulate markup and styles • Package HTML/CSS/JS as single resource • Reusable components Web Components
- 28. www.axon.vnfb.com/AxonActiveVietNam The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web. What is Polymer?
- 29. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
- 30. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
- 31. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
- 32. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
- 33. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
- 34. www.axon.vnfb.com/AxonActiveVietNam How to reuse component?
- 35. www.axon.vnfb.com/AxonActiveVietNam How to reuse component?
- 41. www.axon.vnfb.com/AxonActiveVietNam How to use Polymer
Editor's Notes
- #4: + Show todo-apps
- #10: An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page.
- #14: Ever wonder how the player controls are built and styled?
- #32: Import html
- #33: Import html
- #35: Import html
- #36: Import html A polyfill is a browser fallback, made in javascript, that allows functionality you expect to work in modern browsers to work in older browsers. Ie to support canvas (an html5 feature) in older browsers.