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.

1. Intro to Web Components
with

2. About
Yanuar Waskito
Front End Developer at Qiscus
@jeguwaskito
waskito

3. Web Components

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

21. References
●
http://www.w3.org/TR/components-intro/
●
http://www.polymer-project.org/
●
http://webcomponents.org/
Demo Code:
https://github.com/waskito/techtalk-polymer-demo