1.
Web Components:
The Future of Web Development is Here
MinneWebCon - May 1, 2017
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll

2.
Comcast
• Largest Cable TV &
Internet Service Provider
in United States
• Fortune 50 company
• 30+ million customers
• Owns NBCUniversal
• 500+ Web Components
Web Components: The Future of Web Development is Here2
© Comcast

3.
© Comcast

4.
© Comcast

5.
© Comcast

6.
© Comcast

7.
© Comcast

8.
Don’t all of today’s web
frameworks/libraries
provide “components”?

9.
React is all about building reusable components.
In fact, with React the only thing you do is build
components. Since they're so encapsulated,
components make code reuse, testing, and
separation of concerns easy.
Source: https://facebook.github.io/react/docs/why-react.html

10.
© Comcast

11.
© Comcast

12.
Web Components: The Future of Web Development is Here12

13.
Web Components: The Future of Web Development is Here13

14.
#UseThePlatform
- Polymer Motto

15.
© Comcast

16.
© Comcast

17.
© Comcast

18.
<script href="https://polaris.xfinity.com/polaris.js"></script>
<xc-header
tab="myaccount"
is-authed="[[isAuthed]]"
login-url="/login"
sign-out-url="/logout"
first-name="[[openidData.given_name]]"
user-name="[[openidData.preferred_username]]">
</xc-header>
<xc-footer></xc-footer>

19.
What Are
Web Components?

20.
What Are Web Components?
Web Components: The Future of Web Development is Here20
4 Specs

21.
What Are Web Components?
Web Components: The Future of Web Development is Here21
Custom Elements

22.
What Are Web Components?
Web Components: The Future of Web Development is Here22
Custom Elements
•Provides a way for authors to build their own
fully-featured DOM elements.
- <xc-tab>Your Wifi</xc-tab>
•Can extend existing HTML elements
- class FancyButton extends HTMLButtonElement

23.
What Are Web Components?
Web Components: The Future of Web Development is Here23
HTML Imports

24.
What Are Web Components?
Web Components: The Future of Web Development is Here24
HTML Imports
• Means to import custom elements
- <link rel="import" href="../xc-tab/xc-tab.html">
•Can link to external resources
- <link rel="import"
href="http://polygit.org/components/paper-toast/
paper-toast.html">

25.
What Are Web Components?
Web Components: The Future of Web Development is Here25
Templates

26.
What Are Web Components?
Web Components: The Future of Web Development is Here26
•Used to declare fragments of HTML
- <template id="tab">
<div class="tab-content"></div>
</template>
•The element itself renders nothing
•Can be cloned and inserted in the document via
JavaScript, which will render the content
Templates

27.
What Are Web Components?
Web Components: The Future of Web Development is Here27
Shadow DOM

28.
What Are Web Components?
Web Components: The Future of Web Development is Here28
•Allows you to take a DOM subtree and
hide it from the document scope
•Hides CSS styles as well
•Common examples from HTML5 include:
<select>, <video>, & <input type="date">
Shadow DOM

29.
Can we even use
these things?

30.
Web Components: The Future of Web Development is Here30
Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html

31.
Web Components: The Future of Web Development is Here31
Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

32.
Web Components: The Future of Web Development is Here32
Source: https://www.webcomponents.org/

33.
Web Components: The Future of Web Development is Here33
Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

34.
Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201710-201715-bar

35.
Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201710-201715-bar
81.9%

36.
"Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0
Mobile Safari 10.1Chrome for
Android 54

37.
"Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0
Mobile Safari 10.1Chrome for
Android 54
= nearly
100%
of mobile

38.
How do I use
Web Components?

39.
“The Way of the Web” - Ben Issa, ING
Web Components: The Future of Web Development is Here39
Source: https://youtu.be/8ZTFEhPBJEE?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ

40.
“Assemblers First, Craftspeople Second”
- Ben Issa, 2016 Polymer Summit
Using Web Components
Web Components: The Future of Web Development is Here40
"Puzzle Pieces Jigsaw Piece Concept" is licensed under CC0 1.0 / Color adjusted from original
"Blacksmith Forging Smith Forger" is licensed under CC0 1.0 / Color adjusted from original

41.
$ bower install ELEMENT_NAME --save
$ bower install iron-pages --save

42.
$ bower install ELEMENT_NAME --save
$ bower install iron-pages --saveCOMING SOON!

43.
Using Web Components
• Import the component
- <link rel="import" href="../iron-pages/iron-pages.html">
• Use your custom element as a normal HTML tag
- <iron-pages>
<div>Page 1 content</div>
<div>Page 2 content</div>
</iron-pages>
Web Components: The Future of Web Development is Here44

44.
What’s
Google Polymer?

45.
Google Polymer Project

46.
Using Web Components
Polymer is NOT
• Material Design
Web Components: The Future of Web Development is Here49

47.
Source: https://ebidel.github.io/material-playground/

48.
Using Web Components
Polymer is NOT
• Material Design
• Required to use Web Components
Web Components: The Future of Web Development is Here51

49.
Using Web Components
Polymer is NOT
• Material Design
• Required to use Web Components
• A framework
Web Components: The Future of Web Development is Here52

50.
Using Web Components
Polymer is NOT
• Material Design
• Required to use Web Components
• A framework
• Heavy
Web Components: The Future of Web Development is Here53

51.
Using Web Components
Framework/Library Sizes (with GZIP compression)
Web Components: The Future of Web Development is Here54
Source: http://minime.stephan-brumme.com
React’s size is react.min.js + react-dom.min.js from https://cdnjs.com/libraries/react
jQuery’s size is from https://code.jquery.com/jquery-3.2.1.min.js
Polymer’s size computed locally based on v2.0.0-rc.4 with just polymer-element.html, and also with the non-legacy imports from polymer.html
123.7kb 57.4kb 34.6kb 26.2kb 11.3kb -
17.7kb
46.0kb
v2.12.1 v1.6.4 v3.2.1 v2.2.6 v2.0.0-rc4v15.5.4

52.
Why should I use
Polymer?

53.
Primitives are
designed so we can
build libraries on
top of them.

54.
Vanilla JS
class MyButton extends HTMLElement {
connectedCallback() {
if (super.connectedCallback)
super.connectedCallback();
this.addEventListener('click', this._click);
}
_click() {
alert('Hello');
}
}
customElements.define('my-button', MyButton);
Polymer
class MyButton extends Polymer.Element {
static get is() { return 'my-button'; }
ready() {
super.ready();
this.addEventListener('click', e => {this._click(e)});
}
_click() {
alert('Hello');
}
}
customElements.define(MyButton.is, MyButton);

55.
Vanilla JS
connectedCallback() {
this.innerHTML = `
<button id='kickMe'>
Kick Me
</button>
`;
this.querySelector('#kickMe')
.addEventListener('click', this.handleClick.bind(this));
}
Polymer
<dom-module id="my-button">
<template>
<button on-click="handleClick">
Kick Me
</button>
</template>
</dom-module>

56.
Vanilla JS
- Only a few components
Polymer
- Lots of components or a site

57.
How do I build a
Polymer Component?

58.
Source: https://www.polymer-project.org/2.0/docs/tools/polymer-cli

59.
$ polymer help
Available Commands
analyze Writes analysis metadata in JSON format to standard out
build Builds an application-style project
help Shows this help message, or help for a specific command
init Initializes a Polymer project
install installs Bower dependencies,
optionally installing "variants"
lint Identifies potential errors in your code.
serve Runs the polyserve development server
test Runs web-component-tester

60.
$ polymer help
Available Commands
analyze Writes analysis metadata in JSON format to standard out
build Builds an application-style project
help Shows this help message, or help for a specific command
init Initializes a Polymer project
install installs Bower dependencies,
optionally installing "variants"
lint Identifies potential errors in your code.
serve Runs the polyserve development server
test Runs web-component-tester

61.
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
❯ polymer-1-element - A simple Polymer 1.0 element template
polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo

62.
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
polymer-1-element - A simple Polymer 1.0 element template
❯ polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo

63.
$ polymer init
? Which starter template would you like to use? polymer-2-element
info: Running template polymer-2-element...
? Element name my-element
? Brief description of the element My sample element
create bower.json
create demo/index.html
create index.html
create polymer.json
create README.md
create my-element.html
create test/my-element_test.html
Project generated!
Installing dependencies...

64.
<iron-component-page></iron-component-page>

65.
<test-fixture id="NoLabel">

66.
a11ySuite('NoLabel');

67.
How do I build a
Polymer Web App?

68.
Source: https://www.polymer-project.org/2.0/docs/tools/polymer-cli

69.
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
❯ polymer-1-element - A simple Polymer 1.0 element template
polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo

70.
$ polymer init
? Which starter template would you like to use? (Use arrow keys)
polymer-1-element - A simple Polymer 1.0 element template
polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
❯ polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo

71.
Demo Time!!!

72.
What are some
Best Practices?

73.
Sharable ComponentsSharable Components

74.
Use CORS
(Cross-Origin Resource Sharing)
Link: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

75.
Separate Your
Data from Your UI
Link: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

76.
<xc-app>
index.html
LogicStore {}

77.
component-name-event-name
<xc-app>
index.html
Logic
xc-people-unpause-all-devices
Native Event
Store {}

78.
component-name-event-name
<xc-app>
index.html
Logic
xc-people-unpause-all-devices
Native Event
Store {}

79.
component-name-event-name
<xc-app>
index.html
Store {} Logic
xc-people-unpause-all-devices
Native Event

80.
<xc-app>
index.html
LogicStore {}
component-name-event-name
xc-people-unpause-all-devices
Native Event

81.
<xc-app>
index.html
LogicStore {}
component-name-event-name
xc-people-unpause-all-devices
Native Event

82.
“How to use Redux in Polymer -- Polycasts #61” - Rob Dodson
Web Components: The Future of Web Development is Here97
Source: https://youtu.be/PahsgJn0sgU?list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo

83.
What about testing
your components?

84.
© Comcast

85.
TDD?

86.
DDD!

87.
D
D
D
?

88.
Demo
D
D

89.
Demo
Driven
D

90.
Demo
Driven
Development

91.
© Comcast

92.
How About
Building a Team
How About
Building a Team?

93.
Important Concepts to Understand
• Encapsulation
• Composition
• Separation of
Concerns
Web Components: The Future of Web Development is Here108
"separated" by hansol is licensed under CC BY 2.0

94.
"Rocky" by Stefan Ogrisek is licensed under CC BY 2.0 / Color adjusted from original

95.
Useful Links
• WebComponents.org - webcomponents.org
• Polymer Website - polymer-project.org
• Polycasts on YouTube -
https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
- Top recommended Polycast to watch: Data Binding 101 -
https://youtu.be/1sx6YNn58OQ?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
• Web Components and Polymer video from 2016 Chrome Dev Summit -
https://youtu.be/Ihdp63FaRKA
• 2016 Polymer Summit videos on YouTube -
https://www.youtube.com/playlist?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
- How I learned to stop worrying and love the Polymer toolbox -
https://youtu.be/6t2JRKTCYbI?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
- Data Flow in Polymer Elements and Apps -
https://youtu.be/pAW4YDLtPVs?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
• 2016 Google I/O Polymer videos on YouTube -
https://www.youtube.com/playlist?list=PLNYkxOF6rcIDnSm7bZRJC36Ca1DYXSQ70
Web Components: The Future of Web Development is Here110

96.
Thank you!
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll