Vin Lim presenting Polymer 0.5 & Web Components as part of Polymer Polytechnic in GDG DevFest George Town 2014

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