LibertyJS - November 16, 2017
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll
Web Components:
The Future of Web Development is Here

© Comcast

© Comcast

© Comcast

© Comcast

© Comcast

© Comcast

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

React

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

© Comcast

© Comcast

Web Components: The Future of Web Development is Here13

Web Components: The Future of Web Development is Here14

How do we create a
component without
the framework?

#UseThePlatform
- Polymer Motto

Web Components
#UseThePlatform

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll18
4 Specs

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll19
Custom Elements

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll20
Custom Elements
class HiMessage extends HTMLElement { }
customElements.define('hi-message', HiMessage);
<hi-message></hi-message>

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll21
HTML Imports

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll22
HTML Imports
• Means to import custom elements
- <link rel="import" href="../xc-tab/xc-tab.html">
• Built-in deduplication
• Componetize the HTML, CSS & JavaScript
• Will be replaced by ES6 Modules
- import "../xc-tab/xc-tab.js"

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll23
Templates

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll24
• 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

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll25
Shadow DOM

What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll26
•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

Can we even use
these things?

Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll28
Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html

Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll29
Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll31
Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll32
Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

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

Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201740-201745-bar
81.2%

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

"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

How do we use a
component with
a framework?

© Comcast

© Comcast
Source:
https://www.github.com/Comcast/polaris

© Comcast

© Comcast

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

Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)

Rob Dodson:
Custom Elements
Everywhere
https://custom-elements-everywhere.com

How do I use
Web Components?

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

“Assemblers First, Craftspeople
Second”
- Ben Issa, 2016 Polymer Summit
Using Web Components
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll47
"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

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

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

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 Here - @JohnRiv & @chiefcll51

Google Polymer Project

Using Web Components
Polymer is NOT
• Material Design
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll55

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

Using Web Components
Polymer is NOT
• Material Design
•Required to use Web Components
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll57

Using Web Components
Polymer is NOT
• Material Design
•Required to use Web Components
• A framework
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll58

Using Web Components
Polymer is NOT
• Material Design
•Required to use Web Components
• A framework
• Heavy
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll59

Using Web Components
Framework/Library Sizes (with GZIP compression)
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll60
Source: http://minime.stephan-brumme.com
React’s size is react + react-dom from https://reactjs.org/blog/2017/09/26/react-v16.0.html
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
117.9kb 56.9kb 34.6kb 30.1kb 11.3kb -
17.7kb
34.8kb
v2.16.2 v1.6.6 v3.2.1 v2.5.3 v2.0.0-rc4v16.0.0

Why should I use
Polymer?

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

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);

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>

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

FYI - Other Libraries
Skate JS
X-Tag
< >XX-Tag

Source: https://github.com/webcomponents/gold-standard/wiki

How do I build a
Polymer Component?

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

$ 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

$ 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

$ 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

$ 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

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

<!--
Material design:
[Tabs](https://www.google.com/design/s
pec/components/tabs.html)
`paper-tabs` makes it easy to explore
and switch between different views or
functional aspects of
an app, or to browse categorized data
sets.
Use `selected` property to get or set
the selected tab.
Example:
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>

<!--
### Styling
The following custom properties and
mixins are available for styling:
Custom property | Description |
Default
----------------|-------------|-------
---
`--paper-tabs-selection-bar-color` |
Color for the selection bar | `--
paper-yellow-a100`
`--paper-tabs-selection-bar` | Mixin
applied to the selection bar | `{}`
`--paper-tabs` | Mixin applied to the
tabs | `{}`
`--paper-tabs-content` | Mixin applied
to the content container of tabs |
`{}`
`--paper-tabs-container` | Mixin
applied to the layout container of

/**
* If true, the tabs are aligned
to bottom (the selection bar
appears at the top).
*/
alignBottom: {
type: Boolean,
value: false
},
/**
* If true, tabs are
automatically selected when
focused using the
* keyboard.
*/
autoselect: {
type: Boolean,
value: false
},

Documenting Your Polymer Code
• Document with JSDoc syntax - usejsdoc.org
• Create a page that imports & includes iron-component-page
• Generate the docs and load your page:
$ npm i -g polymer-cli bower
$ polymer analyze > analysis.json
$ polymer serve --open
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll84
Additional Details: https://github.com/PolymerElements/iron-component-page

<test-fixture id="NoLabel">

a11ySuite('NoLabel');

How do I build a
Polymer Web App?

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

$ 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

$ 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

Demo Time!!!

What are some
Best Practices?

Sharable ComponentsSharable Components

You Need a TeamYou Need a Team

© Comcast

TDD?

DDD!

D
D
D

Demo
Driven
Development

© Comcast

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

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

Why?
1.Decouple State / UI
2.Unidirectional Flow
3.Loadable State
4.Community Tools

<xc-app>
index.html
LogicStore {}

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

component-name-event-name
<xc-app>
index.html
Logic
xc-people-unpause-all-devices
Native Event
Store {} What’s
That?

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

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

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

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

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

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

Important Concepts to Understand
• Encapsulation
• Composition
• Separation of
Concerns
• Functional
Decomposition
"separated" by hansol is licensed under CC BY 2.0

Simplicity
Matters
-Rich Hickey
https://youtu.be/rI8tNMsozo0

"Rocky" by Stefan Ogrisek is licensed under CC BY 2.0 / Color adjusted from original
Simplicity
Creates
Opportunity

Useful Links
•WebComponents.org - webcomponents.org
•Polymer Website - polymer-project.org
•Polymer Slack - polymer-slack.herokuapp.com
•Polymer 2.x Cheat Sheet - https://meowni.ca/posts/polymer-2-cheatsheet/
•How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/
•Hands-on with the Polymer 3.0 preview - https://www.polymer-project.org/blog/2017-08-23-
hands-on-30-preview
•Custom Elements Everywhere - https://custom-elements-everywhere.com/
•Polycasts on YouTube -
https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
•2017 Polymer Summit videos on YouTube -
https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi
•End-to-End Polymer Apps - 2017 Chrome Dev Summit video - https://youtu.be/Wu2GCRkDecI
•2017 Google I/O Polymer videos on YouTube -
https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll120

Thank You!

Thank you!
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll