[DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam
You may have heard about Web Components but aren’t really sure what exactly it is and why you should care about it? If so, this session is for you. Web Components is a new technology that lets us build our own components for the web with the same tools the browser vendors use. By embracing Web Components developers can create reusable, shareable components that can be added to a web apps by anyone who has basic understanding of HTML, CSS and Javascript. In my speech, I’m going to help you understand the concept of Web Components – why Google believes that it will be the future of Web Development. I will also provide a guideline for using Polymer – the library is designed to make it easier and faster for developers to create great, reusable components for the web modern. This topic is dedicated to fresh graduates and students. ——— Speaker: Vinh Nguyen – Developer at Axon Active Vietnam
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (14)
Similaire à [DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam
Similaire à [DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam (20)
Plus de DevDay.org
Plus de DevDay.org (20)
Dernier
Dernier (20)
[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?
- 39. www.axon.vnfb.com/AxonActiveVietNam Practice • https://codelabs.developers.google.com/polymer-summit
- 41. www.axon.vnfb.com/AxonActiveVietNam How to use Polymer
Notes de l'éditeur
- + Show todo-apps
- An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page.
- Ever wonder how the player controls are built and styled?
- Import html
- Import html
- Import html
- 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.