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.

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

350 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

×