The document provides an overview of web components and their advantages, emphasizing the need for easier UI creation with less code and confusion. It details different aspects of web components such as custom elements, templates, and shadow DOM, along with examples of their usage. Additionally, it highlights the Polymer framework and various tools to develop and manage web components effectively.

1. George Town, November 2014

2. +Vin Lim
@vinlim
#itshackademic@polymer

3. Agenda
Overview
Components
Join the revolution

4. Web Components: Overview

5. What problems are we solving?

6. @polymer #itshackademic

7. http://drbl.in/esYL
Building UI tabs
should be easy!

8. @polymer #itshackademic

9. @polymer #itshackademic

10. @polymer #itshackademic

11. @polymer #itshackademic

12. @polymer #itshackademic

13. <paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper-tab>FOOD</paper-tab>
</paper-tabs>
Less Code. Less confusion.
Web Components

14. What are Web Components?

15. Custom Elements
define new HTML/DOM elements

17. <paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
declarative, readable
meaningful HTML
common way to extend → reusable
Custom Elements
define new
HTML
@polymer #itshackademic

18. declarative, readable
meaningful HTML
common way to extend → reusable
Custom Elements
define new
HTML
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-activate', function() {
console.log(this.selected);
});
@polymer #itshackademic

19. Templates
native client-side templating

20. <template>
<div class=“comment”>
<img src=“image.png”>
</div>
<script>...</script>
</template>
use DOM to scaffold DOM → no XSS
content is inert until cloned/used
doc fragment → not part of the page
HTML Templates
native client-side templates
parsed, not rendered
@polymer #itshackademic

21. Shadow DOM
DOM/CSS scoping

22. <video src=“foo.webm” controls></video>
@polymer #itshackademic

23. <video src=“foo.webm” controls></video>
Actually Shadow DOM
@polymer #itshackademic

24. <video src=“foo.webm” controls></video>

25. HTML Imports
loading web components

26. @polymer #itshackademic

27. @polymer #itshackademic

28. Vulcanize
$ vulcanize -o build.html index.html
--csp --strip
npm install -g vulcanize

29. grunt-vulcanize

30. gulp-vulcanize

31. Custom Elements
Create new HTML elements and extend existing ones
Templates
Native templating in the browser
Shadow DOM
Scoped CSS!!! + encapsulated markup
HTML Imports
Load custom element definitions and resources

32. @polymer #itshackademic

33. @polymer #itshackademic

34. @polymer #itshackademic

35. @polymer #itshackademic

36. Browser support
Summer 2014

38. Polyfills Web Components
with platform.js*
* soon to be called webcomponents.js

39. Adds syntactic “sugar”
with polymer.js

40. Browser support
Summer 2014 (without Polymer)

41. Browser support
Summer 2014 (with Polymer)

42. Sugaring: Custom Elements

43. vanilla
polymer
<polymer-element name=“paper-tabs”>
…
</polymer-element>
usag
e
<paper-tabs>…</paper-tabs>
// document.createElement(‘paper-tabs’);
document.registerElement(‘paper-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
@polymer #itshackademic

44. document.registerElement(‘paper-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
vanilla
polymer
<polymer-element name=“paper-tabs”>
…
</polymer-element>
usag
e
<paper-tabs>…</paper-tabs>
// document.createElement(‘paper-tabs’);
@polymer #itshackademic

45. vanilla
polymer
<polymer-element name=“paper-tabs”>
…
</polymer-element>
usag
e
<paper-tabs>…</paper-tabs>
// document.createElement(‘paper-tabs’);
document.registerElement(‘paper-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
@polymer #itshackademic

46. vanilla
polymer
<polymer-element name=“paper-tabs”>
…
</polymer-element>
usag
e
<paper-tabs>…</paper-tabs>
// document.createElement(‘paper-tabs’);
document.registerElement(‘paper-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
@polymer #itshackademic

47. vanilla
polymer
<polymer-element name=“super-button” extends=“button”>
…
</polymer-element>
usag
e
<button is=“super-button”>…</button>
// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, {
prototype: Object.create(HTMLButtonElement.prototype),
extends: ‘button’
});
@polymer #itshackademic

48. vanilla
polymer
<polymer-element name=“super-button” extends=“button”>
…
</polymer-element>
usag
e
<button is=“super-button”>…</button>
// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, {
prototype: Object.create(HTMLButtonElement.prototype),
extends: ‘button’
});
@polymer #itshackademic

49. vanilla
polymer
<polymer-element name=“super-button” extends=“button”>
…
</polymer-element>
usag
e
<button is=“super-button”>…</button>
// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, {
prototype: Object.create(HTMLButtonElement.prototype),
extends: ‘button’
});
@polymer #itshackademic

50. vanilla
polymer
<polymer-element name=“super-button” extends=“button”>
…
</polymer-element>
usag
e
<button is=“super-button”>…</button>
// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, {
prototype: Object.create(HTMLButtonElement.prototype),
extends: ‘button’
});
@polymer #itshackademic

51. Sugaring: Templates

52. vanilla
polymer
<polymer-element name=“user-list” noscript>
<template>
<ul>
<template repeat=“{{user, i in users}}”>
<li>{{user.name}}</li>
</template>
</ul>
</template>
</polymer-element>
<template>
…
</template>
@polymer #itshackademic

53. vanilla
polymer
<polymer-element name=“user-list” noscript>
<template>
<ul>
<template repeat=“{{user, i in users}}”>
<li>{{user.name}}</li>
</template>
</ul>
</template>
</polymer-element>
<template>
…
</template>
@polymer #itshackademic

54. vanilla
polymer
<polymer-element name=“user-list” noscript>
<template>
<ul>
<template repeat=“{{user, i in users}}”>
<li>{{user.name}}</li>
</template>
</ul>
</template>
</polymer-element>
<template>
…
</template>
@polymer #itshackademic

55. Sugaring: Shadow DOM

56. var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” +
“<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
polymer
@polymer #itshackademic

57. var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” +
“<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
polymer
@polymer #itshackademic

58. var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” +
“<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
polymer
@polymer #itshackademic

59. Components

60. <ul>
<p>
<h1>

61. <menu-button>
<page-scaffold>
<animated-pages>

62. What if we designed HTML
for the mobile web?

63. <core-icon>
<paper-fab>
<core-drawer-panel>
<core-field>

64. http://bit.ly/1jkTo5c
core-
elements
Image: http://bit.ly/1mZjnTu

65. <core-
toolbar>
A basic container for controls
like tabs or buttons
MY APP
@polymer #itshackademic

66. <link rel=“import”
href=“core-toolbar.html”>
<core-
toolbar>
A basic container for controls
like tabs or buttons
MY APP
@polymer #itshackademic

67. <core-toolbar>
<div>MY APP</div>
</core-toolbar>
<link rel=“import”
href=“core-toolbar.html”>
<core-
toolbar>
A basic container for controls
like tabs or buttons
MY APP
@polymer #itshackademic

68. <core-toolbar>
<core-icon-button icon=“menu”>
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<link rel=“import”
href=“core-toolbar.html”>
<core-
toolbar>
A basic container for controls
like tabs or buttons
MY APP
@polymer #itshackademic

69. A simple container with a header
section and a content section
<core-header-
panel>
MY APP
<core-header-panel flex>
<core-toolbar>
<core-icon-button icon=“menu">
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<div class=“content”>…</div>
</core-header-panel>

70. A simple container with a header
section and a content section
<core-header-
panel>
MY APP
<core-header-panel flex>
<core-toolbar>
<core-icon-button icon=“menu">
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<div class=“content”>…</div>
</core-header-panel>

71. A simple container with a header
section and a content section
<core-header-
panel>
MY APP
<core-header-panel flex>
<core-toolbar>
<core-icon-button icon=“menu">
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<div class=“content”>…</div>
</core-header-panel>

72. A simple container with a header
section and a content section
<core-header-
panel>
<core-header-panel flex>
<core-toolbar>
<core-icon-button icon=“menu">
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<div class=“content”>…</div>
</core-header-panel>
MY APP

73. <core-header-panel mode=“scroll" flex>
<core-toolbar>
<core-icon-button icon=“menu">
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<div class=“content”>…</div>
</core-header-panel>
<core-header-
panel>
Toolbar will scroll with the page

74. A responsive container that
combines a left- or right-side
drawer
panel and a main content area.
<core-drawer-
panel>
<core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</core-drawer-panel>

75. <core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</core-drawer-panel>
A responsive container that
combines a left- or right-side
drawer
panel and a main content area.
<core-drawer-
panel>

76. <core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</core-drawer-panel>
A responsive container that
combines a left- or right-side
drawer
panel and a main content area.
<core-drawer-
panel>

78. paper-
elements

79. <paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>
@polymer #itshackademic

80. <paper-checkbox></paper-checkbox>

81. <div class=“card”>
<img src=“science.svg”>
<paper-ripple fit></paper-ripple>
</div>
A reactive ink effect for indicating touch
and mouse actions
<paper-
ripple>

82. <div class=“card”>
<paper-shadow z=“5” animated>
</paper-shadow>
</div>
A dynamic shadow for conveying
z-depth and spatial relationships
<paper-
shadow>
@polymer #itshackademic

83. Styling

84. <paper-slider min=“0” max=“100”>
</paper-slider>
allows you to style nodes
internal to an element’s
shadow dom
::shadow
@polymer #itshackademic

85. allows you to style nodes
internal to an element’s
shadow dom
::shadow
paper-slider::shadow #sliderKnobInner {
background-color: #f4b400;
}
<paper-slider min=“0” max=“100”>
</paper-slider>
@polymer #itshackademic

86. html /deep/ paper-ripple {
background-color: #E91E63;
}
styles will pierce all
shadow boundaries
/deep/
@polymer #itshackademic

87. With ::shadow and /deep/ you
can apply sitewide themes
source: ebidel.github.io/material-playground

88. polymer-project.org/apps/topeka/

90. polymer-project.org

91. We’re not alone

92. Mozilla Brick

93. <brick-appbar>
<brick-deck>
<brick-tabbar>

94. <core-icon>
<x-instagram>
(not shown)

95. Web Components
can work together

96. Not just browser makers

97. <app-router>
github.com/erikringsmuth/app-router
my-site.com/order/:id
<app-router>
<!-- matches an exact path -->
<app-route path="/home" import="/pages/home-page.html"></app-route>
<!-- matches using a path variable -->
<app-route path="/order/:id" import=“/pages/order-page.html"></app-route>
</app-router>

98. <page-er>
github.com/addyosmani/page-er
<page-er perpage="5" previous=“<< Previous" next=“Next >>"></page-er>
var pager = document.querySelector("page-er");
document.addEventListener("polymer-ready", function() {
pager.data = model.items;
});

99. <ajax-
form>github.com/garstasio/ajax-form
Full Name
Country City
Join newsletter
<form is="ajax-form" action="my/form/handler">
<label>Full Name
<input type="text" name=“full_name">
</label>
…
</form>
√

100. Apps

101. polymer-project.org

102. chromestatus.com

103. polymer-project.org/tools/designer/

105. github.com/ForceDotComLabs/mobile-ui-elements
github.com/ForceDotComLabs

106. APIs

107. APIs (as elements)

108. I want to add a marker
to a Google map.
@polymer #itshackademic

109. height: 400px;
}
</style>
<div id="map"></div>
<script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady">
</script>
<script>
var marker = null;
function getCurrentLocation(callback) {
navigator.geolocation.watchPosition(callback);
}
function addMarker(opts, info) {
var marker = new google.maps.Marker(opts);
var infoWindow = new google.maps.InfoWindow({content: info});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(opts.map, marker);
});
return marker;
}
function mapReady() {
var container = document.querySelector('#map');
var map = new google.maps.Map(container, {
zoom: 14, disableDefaultUI: true
});
getCurrentLocation(function(pos) {
var current = new google.maps.LatLng(pos.coords.latitude,
pos.coords.longitude);
map.setCenter(current);
// Re-position marker or create new one.
if (marker) {
marker.setPosition(map.getCenter());
} else {
marker = addMarker({
position: current, map: map, title: 'Your location'
}, '<b>Your location</b>');
}
});
So much code for
one map marker!
@polymer #itshackademic

110. @polymer #itshackademic

116. googlewebcomponents.github.io
github.com/GoogleWebComponents

117. youtube.com/watch?v=eORqFaf_QzM

118. Join the revolution

119. Learn

121. polymer-project.org

122. goo.gl/Ji3WdW

123. Build

124. YO POLYMERnpm install -g generator-polymer

125. Start with <seed-element>
github.com/PolymerLabs/seed-element

127. youtube.com/watch?v=2toYLLcoY14

128. Share!

129. customelements.io

130. {
"name": "my-element",
"version": "0.0.0",
"description": "My awesome Custom Element",
"license": "MIT",
"keywords": [
"web-components"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components"
]
}
bower.json
@polymer #itshackademic

131. EXPLORE

132. <thank-you>
+Vin Lim
@vinlim