Web Components with Polymer
Saket Kumar / @saket_kmr / saki007ster.github.io
Vinay Raghu
What we are going to see?
- A quick intro to web components
- Creating our own web component with Polymer
Best new web technology
https://thenetawards.com/
Declarative and Compose-able
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
Declarative and Compose-able
<select name='options'>
<option value='option-1' disabled>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
Declarative and Compose-able
<select name='options' multiple>
<option value='option-1' disabled>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select> Web Components
- Shadow DOM
- HTML imports
- Templates
- Custom elements
Shadow DOM
Think of Shadow DOM as a better way to do iframes
Technology that browsers use
Encapsulate styles and scripts
HTML imports
There is no good way to package HTML documents
<script src="../platform/platform.js"></script>
<link rel="stylesheet" href="style.css"><link rel="import" href="new-widget.html">Using Bootstrap Tabs
-
Copy markup
- Include script
- Include CSS
- Instantiate tabs
Componentize the web
<twbs-tabs title="tab-one">Tab content</twbs-tabs>-
Less boilerplate
-
More app-specific code
Templates
Inert pieces of DOM that can be reused
<template>
<h3>Inert Template</h3>
<img src="http://i.imgur.com/w2RByDr.jpg">
<script>
alert("Shots fired"); // Does not execute
</script>
</template>Templates
-
No network calls until activated
-
No resources loaded
-
No scripts executed
Custom elements
Templates + Shadow DOM
- Must contain a hyphen
- <chart-doughnut></chart-doughnut>
- <chart-pie></chart-pie>
Web Components
-
Combination of the before mentioned technologies
-
Experimental web features
-
Not production ready
Resources
http://webcomponents.org/
-
Elements
-
Presentations
-
Articles
-
Best practices
Projects
- Polymer project by Google
- Brick by Mozilla
- X-tags
Polymer Project
Why Web Components / Polymer?
-
Interoperability between react and angular
The real reasons
Code Sample
Arguments
- Its XML all over again
- View source is a great way to learn
- Best practices
- Repeated efforts
Questions?
Web Components with Polymer
By Saket Kumar
