Tech talk polymer
1 like832 views
Web components allow developers to build applications in a declarative and composable way using templates, custom elements, shadow DOM, and imports. Polymer is a library that uses these web component technologies to let developers create reusable custom HTML elements and take advantage of material design with core and paper elements. While browser compatibility and beginner friendliness present challenges, web components and Polymer provide benefits like modularity, consistent user experience, and easy customization.
Tech talk polymer
- 1. Intro to Web Components with
- 2. About Yanuar Waskito Front End Developer at Qiscus @jeguwaskito waskito
- 4. is New set of web platform features that enable developers to build applications in a declarative, composable way
- 5. W3C ● Web components are about: – Templates – Custom Elements – Shadow DOM – Imports
- 6. Templates Method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents
- 7. Custom Elements Method for enabling the author to define and use new types of DOM elements in a document
- 8. Shadow DOM This specification describes a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.
- 9. HTML Imports HTML Imports are a way to include and reuse HTML documents in other HTML documents.
- 11. What we are talking about ● Is not a Framework ● Polymer is a library – uses the latest web technologies – lets you create custom HTML elements – polyfill of web components
- 12. Polymer is a library Polymer is a way of bolting together web components to make robust web applications.
- 13. Core Elements Set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps
- 14. Paper Elements Set of highly visual, highly interactive elements that include things like controls, layouts, hero transitions, and scrolling effects.
- 15. Designer
- 16. Pros ● Modular Components ● Consistent UX (Browser/Mobile) ● Easy to Customize (via Designer)
- 17. Cons ● Browser Compatibility :red ● Not Beginner Friendly (JavaScript) ● Still Experimental
- 18. What we are talking about ● Is not a Framework ● Polymer is a library – uses the latest web technologies – lets you create custom HTML elements – polyfill of web components
- 19. Demo
- 20. Install Polymer ● bower install --save Polymer/polymer ● bower install --save Polymer/core-elements ● bower install --save Polymer/paper-elements