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.

Polymer and web component


Published on

Polymer and web component presentation held under Google Developer Group Karachi @ 24th January 2015 at Nest IO

Published in: Technology
  • Be the first to comment

Polymer and web component

  1. 1. web component and polymer Speaker: Imam Raza GDG Karachi Event 24th January
  2. 2. Web components are a collection of specifications that enable developers to create their web applications as a set of reusable components. What are web component?
  3. 3. ● Custom Elements ● HTML templates ● Shadow DOM ● HTML imports Web component composition
  4. 4. Enable developers to create their own elements that are relevant to their design as part of the DOM structure with the ability to style/script them just like any other HTML tag. Custom Elements
  5. 5. Custom element Example
  6. 6. Let developer define fragments of markup that stay consistent across web pages with the ability to inject dynamic content using JavaScript. HTML Templates
  7. 7. <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> HTML templates example
  8. 8. var t = document.querySelector('#mytemplate'); // Populate the src at runtime. t.content.querySelector('img').src = 'logo.png'; var clone = document.importNode(t.content, true); document.body.appendChild(clone); HTML templates example
  9. 9. Abstract all the complexities from the markup by defining functional boundaries between the DOM tree and the subtrees hidden behind a shadow root. CSS styles defined inside a Shadow Root won't affect its parent document, CSS styles defined outside the Shadow Root Shadow DOM
  10. 10. Shadow DOM
  11. 11. <div id="host"></div> var host = document.querySelector('#host'); var root = host.createShadowRoot(); // Create a Shadow Root var div = document.createElement('div'); div.textContent = 'This is Shadow DOM'; root.appendChild(div); // Append elements to the Shadow Root Shadow DOM example
  12. 12. ● For CSS we have <link rel="stylesheet"> ● For JS we have <script src=””> ● For image its <image src=””> ● For HTML ? iFrame? AJAX? HTML Imports
  13. 13. <head> <link rel="import" href="/path/to/imports/stuff.html"> </head> <!-- Resources on other origins must be CORS-enabled. --> <link rel="import" href=""> HTML imports Examples
  14. 14. Browser Support
  15. 15. Custom Elements
  16. 16. Html Imports
  17. 17. Shadow DOMs
  18. 18. HTML templates
  19. 19. Polymer provides a set of polyfills that enables us to use web components in non- compliant browsers with an easy-to-use framework Here Comes Polymer
  20. 20. ● Allow us to create custom elements with user defined naming schemes. ● Allowing each custom element to have its own template ● Providing a suite of ready made UI How Polymer did this
  21. 21. ● bower install --save Polymer/polymer Installing Polymer
  22. 22. ● create index.html ● include platform.js <script src="bower_components/platform/platfo rm.js"></script> Installing polymer
  23. 23. Download and install custom element
  24. 24. Vulcanize inlines all your HTML imports, flattens their dependencies, and produces an output that generates far fewer network requests. Vulcanize