1.
Web Components:
A simpler and faster React
#UseThePlatform to build a better web
Chris Lorenzo / @chiefcll
Senior Principal Engineer

2.
Web Components:
A simpler and faster ...
#UseThePlatform to build a better web
Chris Lorenzo / @chiefcll
Senior Principal Engineer

3.
Questions...

4.
Workshop:
Introduction to Web Components & Polymer
Little Rock Tech Fest - October 5, 2017
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll
http://tinyurl.com/lrtf-polymer

5.
Google PolymerWeb Components

6.
● Largest Cable TV & Internet
Service Provider in US
● Fortune 50 company
● 30+ million customers
● Owns NBCUniversal
● 500+ Components
Comcast
© Comcast

7.
ABOUT ME
● Married 6 years
● 10 Years @ Comcast
● FE dev 16 years
● Son and daughter

8.
Theo & Josie

9.
New York City
Philadelphia

10.
© Comcast

11.
© Comcast

12.
© Comcast

13.
© Comcast

14.
© Comcast

15.
© Comcast

16.
My
Coding
Journey

17.
Programming Fu (Mastery)
Time
Fulevel
2012

18.
2012
© Comcast

19.
© Comcast
2017

20.
Programming Fu Level
Time
Fulevel
20172013

21.
How do I build an app?

22.
How do I maintain an app?

23.
Which
Way?

24.
My
Journey
It’s
Hard

25.
That’s why we love
Frameworks (+Libraries)

26.
Follow the Path

27.
No one knows how to structure a Front End
application. I've worked in this industry for years,
and "best practices" are never taught. Instead,
"libraries" are taught. jQuery? Angular? Backbone?
Source: http://blog.andrewray.me/flux-for-stupid-people/
-@andrewray

28.
"Paris - September | October 2012" by Nan Palmero is licensed under CC BY 2.0

29.
What makes an app simple?

30.
Simplicity Matters
-Rich Hickey

31.
source: https://upload.wikimedia.org/wikipedia/commons/a/ac/IndianElephant.jpg

32.
Components

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

34.
React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

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

36.
State => View (DOM)

37.
import React, { Component } from 'react';
export default class HiMessage extends Component {
render() {
return <h1>Hi {this.props.name}!</h1>;
}
}
<HiMessage name="Chris">

38.
import React, { Component } from 'react';
export default class HiMessage extends Component {
render() {
return <h1>Hi {this.props.name}!</h1>;
}
}
<HiMessage name="Chris">

39.
We can be creating the exact same
programs out of significantly simpler
components
Source: https://www.youtube.com/watch?v=rI8tNMsozo0&t=805s
-Rich Hickey

40.
import { Element } from 'polymer/polymer-element.js';
class HiMessage extends Element {
static get template() {
return `<h1>Hi [[name]]!</h1>`;
}
}
customElements.define('hi-message', HiMessage);
<hi-message name="Chris" />

41.
import { Element } from 'polymer/polymer-element.js';
class HiMessage extends Element {
static get template() {
return `<h1>Hi [[name]]!</h1>`;
}
}
customElements.define('hi-message', HiMessage);
<hi-message name="Chris" />

42.
import React, { Component } from 'react';
export default class HiMessage extends Component
{
render() {
return <h1>Hi {this.props.name}!</h1>;
}
}
<HiMessage name="Chris">
import { Element } from 'polymer/polymer-element.js';
class HiMessage extends Element {
static get template() {
return `<h1>Hi [[name]]!</h1>`;
}
}
customElements.define('hi-message', HiMessage);
<hi-message name="Chris" />

43.
with

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

45.
Vanilla Component
Custom Elements V1

46.
source: https://upload.wikimedia.org/wikipedia/commons/a/ac/IndianElephant.jpg

47.
<script src="https://polaris.xfinity.com/polaris.js" async></script>
<xc-header
is-authed="[[isAuthed]]"
login-url="/login"
tab="myxfinity"
sign-out-url="/logout">
</xc-header>

48.
<script src="https://polaris.xfinity.com/polaris.js" async></script>
<xc-footer></xc-footer>

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

50.
import React, { Component } from 'react';
export default class HiMessage extends Component
{
render() {
return <h1>Hi {this.props.name}!</h1>;
}
}
<HiMessage name="Chris">
import { Element } from 'polymer/polymer-element.js';
class HiMessage extends Element {
static get template() {
return `<h1>Hi [[name]]!</h1>`;
}
}
customElements.define('hi-message', HiMessage);
<hi-message name="Chris" />

51.
12kb50kb
VS

52.
Performance
Matters
Performance
Matters
"stopwatch" by Julian Lim is licensed under CC BY 2.0 / Color adjusted from original

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

54.
Alex Russell:
Adapting to the
Mobile Web F̶u̶t̶u̶r̶e̶
Present

55.
53% of users abandon a site that takes
longer than 3 seconds to load.
Source: https://www.soasta.com/blog/google-mobile-web-performance-study/
-Google

56.
Mobile pages that are 1 second faster
experience up to 27% increase in
conversion rate.
Source: https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

57.
Over 15s!

58.
"Paris - September | October 2012" by Nan Palmero is licensed under CC BY 2.0

59.
Using Web Components
Framework/Library Sizes (with GZIP compression)
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

60.
Google Polymer Project

61.
#UseThePlatform

62.
Google Polymer Project

63.
Your JS
Code +
Framework

64.
Your JS
Code
Browser

65.
Alex Russell:
Web Components:
Just in the Nick of
Time

66.
Web Components
#UseThePlatform

67.
CUSTOM ELEMENTS HTML IMPORTS
SHADOW DOMTEMPLATES
Source: http://webcomponents.org/

68.
customElements.define('hi-message', HiMessage);

69.
<template id="t">
<li>{item}</li>
</template>

70.
<link rel="import" href="myc.html">

71.
let shadowRoot = elm.attachShadow({mode: 'open'});
shadowRoot.innerHTML = 'Hi There!';

72.
Source: http://webcomponents.org/

73.
Edge Browser
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=sort%3AVotes

74.
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=sort%3AVotes

75.
Closer to the metal

76.
"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

77.
What about Virtual Dom?

78.
Programmers know the benefits of
everything and the tradeoffs of nothing.
Source: https://www.youtube.com/watch?v=rI8tNMsozo0
-Rich Hickey

79.
Source: https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

80.
Are you Facebook?

81.
source: https://commons.wikimedia.org/wiki/File:Internet_Explorer_10_logo.svg
Is IE #1?

82.
Justin Fagnani:
Efficient,
Expressive, and
Extensible HTML
Templates

83.
`
<h1>${name}</h1>
<p>${content}</p>
`

84.
html`
<h1>${name}</h1>
<p>${content}</p>
`

85.
html`
<h1>${name}</h1>
<p>${content}</p>
`
var name = 'Chris';
var content = 'Loves Web Components!';
function html(strings, name, content) {
// strings[0] === <h1>
// strings[1] === </h1>
// name === Chris
return 'Whatever string you want';
}

86.
Source: https://twitter.com/mathias/status/912223187005509632

87.
Source: https://arewefastyet.com/#machine=29&view=single&suite=six-speed&subtest=templatestringtag-es6

88.
What about building an App?

89.
Unidirectional
Data Flow

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

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

92.
What’s
That?<xc-app>
index.html
LogicStore {}

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

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

95.
component-name-event-name
<xc-app>
index.html
Store {} Logic
xc-people-unpause-all-devices
Native Event
Smart Parent
88 MPH + 1.21 gigawatts
= Time travel
+

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

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

98.
Decouple
State UI

99.
I’ve been married and divorced to so many
frontend frameworks that I want to stay a
bachelor for the rest of my life.
-Paul Palladino

100.
Can you move it?
-Rich Hickey
Source: https://www.youtube.com/watch?v=rI8tNMsozo0

101.
Store {}

102.
"Software, testing, service" by testbytes is licensed under CC BY 2.0

103.
Kevin Schaaf:
End to End Apps
with Polymer

104.
In Conclusion

105.
We can be creating the exact same
programs out of significantly simpler
components
Source: https://www.youtube.com/watch?v=rI8tNMsozo0&t=805s
-Rich Hickey

106.
class HelloMessage extends HyperHTMLElement {
created() {
this.state.name = 'Chris';
this.render();
}
render() {
this.html`<h1>${this.state.name}</h1>`;
}
}
HelloMessage.define('hello-message');

107.
12kb50kb
VS VS
6kb

108.
React v16
49.8kb -> 34.8kb
Source: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

109.
React v16
MIT licensed
Source: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

110.
Hacker News PWA
Source: https://hnpwa.com/

111.
Simplicity Matters
-Rich Hickey

112.
Simple !== Easy
-Rich Hickey

113.
My
Journey
It’s
Hard

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

115.
Polymer Overview - Check out my other talks!
Polymer in Practice @ Comcast Polymer Changes Everything!
See all my talks - http://bit.ly/2kYFOyj

116.
Thanks! / Questions?
Chris Lorenzo / @chiefcll
Senior Principal Engineer
Talks: http://bit.ly/2kYFOyj