Polymer Polytechnic Speaker Deck for more insight about Web components and Material Design

1. GDG UI Devfest, November 2014

2. +Ibrahim
Oluwadamilare
@IODamilare
#itshackademic@polyme

3. Agenda
Overview
Components
Join the revolution

4. Web Components: Overview

5. What problems are we solving?

6. @polyme #itshackademic

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

8. @polyme #itshackademic

9. @polyme #itshackademic

10. @polyme #itshackademic

11. @polyme #itshackademic

12. @polyme #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
@polyme #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);
});
@polyme #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
@polyme #itshackademic

21. Shadow DOM
DOM/CSS scoping

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

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

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

25. HTML Imports
loading web components

26. @polyme #itshackademic

27. @polyme #itshackademic

28. 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

29. @polyme #itshackademic

30. @polyme #itshackademic

31. @polyme #itshackademic

32. @polyme #itshackademic

33. Browser support
Summer 2014

35. Polyfills Web Components
with platform.js

36. Adds syntactic “sugar”
with polymer.js

37. Browser support
Summer 2014 (with Polymer)

38. Browser support
Summer 2014 (with Polymer)

39. Sugaring: Custom Elements

40. vanill
a
polym
er
<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)
});
@polyme #itshackademic

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

42. vanill
a
polym
er
<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)
});
@polyme #itshackademic

43. vanill
a
polym
er
<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)
});
@polyme #itshackademic

44. vanill
a
polym
er
<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’
});
@polyme #itshackademic

45. vanill
a
polym
er
<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’
});
@polyme #itshackademic

46. vanill
a
polym
er
<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’
});
@polyme #itshackademic

47. vanill
a
polym
er
<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’
});
@polyme #itshackademic

48. Sugaring: Templates

49. vanill
a
polym
er
<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>
@polyme #itshackademic

50. vanill
a
polym
er
<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>
@polyme #itshackademic

51. vanill
a
polym
er
<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>
@polyme #itshackademic

52. Sugaring: Shadow DOM

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

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

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

56. Components

57. <ul
><p
>
<h1>

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

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

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

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

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

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

64. <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
@polyme #itshackademic

65. <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
@polyme #itshackademic

66. 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>

67. 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>

68. 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>

69. 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

70. <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

71. 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>

72. <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>

73. <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>

75. paper-
elements

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

77. <paper-checkbox></paper-
checkbox>

78. <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>

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

80. Styling

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

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

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

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

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

87. polymer-
project.org

88. We’re not
alone

89. Mozilla Brick

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

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

92. Web Components
can work together

93. Not just browser makers

94. <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>

95. <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;
});

96. <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>
√

97. Apps

98. polymer-project.org

99. chromestatus.com

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

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

103. APIs

104. APIs (as elements)

105. I want to add a marker
to a Google map.
@polyme #itshackademic

106. 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!
@polyme #itshackademic

107. @polyme #itshackademic

113. googlewebcomponents.github.io
github.com/GoogleWebComponents

114. youtube.com/watch?v=eORqFaf_QzM

115. Join the revolution

116. Learn

118. polymer-project.org

119. Build

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

122. youtube.com/watch?v=2toYLLcoY
14

123. http://goo.gl/UjLvb
2
Chrome Dev
Editor

124. Share!

125. customelements.i
o

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

127. EXPLO
RE

128. <thank-you>
+Ibrahim
Oluwadamilare
@IODamilare