Polymer and web component
•Transferir como PPTX, PDF•
2 gostaram•1,429 visualizações
Polymer and web component presentation held under Google Developer Group Karachi @ 24th January 2015 at Nest IO
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Polymer and web component
Semelhante a Polymer and web component (20)
Último
Último (20)
Polymer and web component
- 1. web component and polymer Speaker: Imam Raza GDG Karachi Event 24th January
- 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. ● Custom Elements ● HTML templates ● Shadow DOM ● HTML imports Web component composition
- 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
- 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. <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> HTML templates example
- 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. 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. Shadow DOM
- 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. ● 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. <head> <link rel="import" href="/path/to/imports/stuff.html"> </head> <!-- Resources on other origins must be CORS-enabled. --> <link rel="import" href="http://example.com/elements.html"> HTML imports Examples
- 14. Browser Support
- 15. Custom Elements
- 16. Html Imports
- 17. Shadow DOMs
- 18. HTML templates
- 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. ● 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. ● bower install --save Polymer/polymer Installing Polymer
- 22. ● create index.html ● include platform.js <script src="bower_components/platform/platfo rm.js"></script> Installing polymer
- 23. Download and install custom element
- 25. Vulcanize inlines all your HTML imports, flattens their dependencies, and produces an output that generates far fewer network requests. Vulcanize