Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Components and Polymer
www.axon.vnfb.com/AxonActiveVietNam
Agenda
What are Web Components?
What is Polymer?
How to use Polymer?
Q & A
www.axon.vnfb.com/AxonActiveVietNam
TODO-NAV-BAR
www.axon.vnfb.com/AxonActiveVietNam
TODO-SIDE-BAR
www.axon.vnfb.com/AxonActiveVietNam
TODO-CONTENT
www.axon.vnfb.com/AxonActiveVietNam
TODO-LIST
www.axon.vnfb.com/AxonActiveVietNam
What are Web Components
www.axon.vnfb.com/AxonActiveVietNam
You can think of Web Components as reusable
user interface widgets that are created us...
www.axon.vnfb.com/AxonActiveVietNam
What are Web Components?
1. Shadow DOM
2. Custom Elements
3. Templates
4. HTML Imports
www.axon.vnfb.com/AxonActiveVietNam
Shadow DOM
www.axon.vnfb.com/AxonActiveVietNam
Shadow DOM
Shadow DOM is a new part of the HTML spec
which allows developers to encaps...
www.axon.vnfb.com/AxonActiveVietNam
Shadow DOM
www.axon.vnfb.com/AxonActiveVietNam
Shadow DOM
www.axon.vnfb.com/AxonActiveVietNam
Shadow DOM
www.axon.vnfb.com/AxonActiveVietNam
Custom Elements
www.axon.vnfb.com/AxonActiveVietNam
Custom Elements
Custom Elements, which let authors define their
own elements, includin...
www.axon.vnfb.com/AxonActiveVietNam
<todo-list> </todo-list>
www.axon.vnfb.com/AxonActiveVietNam
Templates
www.axon.vnfb.com/AxonActiveVietNam
Templates
Templates are where we define reusable HTML
code that can be cloned and inse...
www.axon.vnfb.com/AxonActiveVietNam
HTML Imports
www.axon.vnfb.com/AxonActiveVietNam
HTML Import
HTML Imports provide a way to include and reuse
HTML documents in other HT...
www.axon.vnfb.com/AxonActiveVietNam
Why Web Components?
www.axon.vnfb.com/AxonActiveVietNam
www.axon.vnfb.com/AxonActiveVietNam
Why Web Components?
www.axon.vnfb.com/AxonActiveVietNam
• Encapsulate markup and styles
• Package HTML/CSS/JS as single resource
• Reusable co...
www.axon.vnfb.com/AxonActiveVietNam
What is Polymer?
www.axon.vnfb.com/AxonActiveVietNam
The Polymer library is designed to make it easier
and faster for developers to create ...
www.axon.vnfb.com/AxonActiveVietNam
How to create custom elements?
www.axon.vnfb.com/AxonActiveVietNam
How to create custom elements?
www.axon.vnfb.com/AxonActiveVietNam
How to create custom elements?
www.axon.vnfb.com/AxonActiveVietNam
How to create custom elements?
www.axon.vnfb.com/AxonActiveVietNam
How to create custom elements?
www.axon.vnfb.com/AxonActiveVietNam
How to reuse component?
www.axon.vnfb.com/AxonActiveVietNam
How to reuse component?
www.axon.vnfb.com/AxonActiveVietNam
Github
https://github.com/ndqvinh2109/Polymer.git
Email: ndqvinh2109@gmail.com
www.axon.vnfb.com/AxonActiveVietNam
www.axon.vnfb.com/AxonActiveVietNam
www.axon.vnfb.com/AxonActiveVietNam
Practice
• https://codelabs.developers.google.com/polymer-summit
www.axon.vnfb.com/AxonActiveVietNam
Polymer Starter Kit
www.axon.vnfb.com/AxonActiveVietNam
How to use Polymer
www.axon.vnfb.com/AxonActiveVietNam
Q & A
[DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam
Upcoming SlideShare
Loading in …5
×

[DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam

343 views

Published on

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

Published in: Software
  • Be the first to comment

[DevDay 2016] Web Components, is it the future of Web Development? Speaker: Vinh Nguyen – Developer at Axon Active Vietnam

  1. 1. Web Components and Polymer
  2. 2. www.axon.vnfb.com/AxonActiveVietNam Agenda What are Web Components? What is Polymer? How to use Polymer? Q & A
  3. 3. www.axon.vnfb.com/AxonActiveVietNam TODO-NAV-BAR
  4. 4. www.axon.vnfb.com/AxonActiveVietNam TODO-SIDE-BAR
  5. 5. www.axon.vnfb.com/AxonActiveVietNam TODO-CONTENT
  6. 6. www.axon.vnfb.com/AxonActiveVietNam TODO-LIST
  7. 7. www.axon.vnfb.com/AxonActiveVietNam What are Web Components
  8. 8. 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?
  9. 9. www.axon.vnfb.com/AxonActiveVietNam What are Web Components? 1. Shadow DOM 2. Custom Elements 3. Templates 4. HTML Imports
  10. 10. www.axon.vnfb.com/AxonActiveVietNam Shadow DOM
  11. 11. 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.
  12. 12. www.axon.vnfb.com/AxonActiveVietNam Shadow DOM
  13. 13. www.axon.vnfb.com/AxonActiveVietNam Shadow DOM
  14. 14. www.axon.vnfb.com/AxonActiveVietNam Shadow DOM
  15. 15. www.axon.vnfb.com/AxonActiveVietNam Custom Elements
  16. 16. 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
  17. 17. www.axon.vnfb.com/AxonActiveVietNam <todo-list> </todo-list>
  18. 18. www.axon.vnfb.com/AxonActiveVietNam Templates
  19. 19. 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
  20. 20. www.axon.vnfb.com/AxonActiveVietNam HTML Imports
  21. 21. 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”>
  22. 22. www.axon.vnfb.com/AxonActiveVietNam Why Web Components?
  23. 23. www.axon.vnfb.com/AxonActiveVietNam
  24. 24. www.axon.vnfb.com/AxonActiveVietNam Why Web Components?
  25. 25. www.axon.vnfb.com/AxonActiveVietNam • Encapsulate markup and styles • Package HTML/CSS/JS as single resource • Reusable components Web Components
  26. 26. www.axon.vnfb.com/AxonActiveVietNam What is Polymer?
  27. 27. 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?
  28. 28. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
  29. 29. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
  30. 30. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
  31. 31. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
  32. 32. www.axon.vnfb.com/AxonActiveVietNam How to create custom elements?
  33. 33. www.axon.vnfb.com/AxonActiveVietNam How to reuse component?
  34. 34. www.axon.vnfb.com/AxonActiveVietNam How to reuse component?
  35. 35. www.axon.vnfb.com/AxonActiveVietNam Github https://github.com/ndqvinh2109/Polymer.git Email: ndqvinh2109@gmail.com
  36. 36. www.axon.vnfb.com/AxonActiveVietNam
  37. 37. www.axon.vnfb.com/AxonActiveVietNam
  38. 38. www.axon.vnfb.com/AxonActiveVietNam Practice • https://codelabs.developers.google.com/polymer-summit
  39. 39. www.axon.vnfb.com/AxonActiveVietNam Polymer Starter Kit
  40. 40. www.axon.vnfb.com/AxonActiveVietNam How to use Polymer
  41. 41. www.axon.vnfb.com/AxonActiveVietNam Q & A

×