React pioneered the component based frontend and revolutionized how we think about building a web application. Let’s leverage the patterns we learned from React with the latest web primitives and see if we can #UseThePlatform to build a better web. We’ll discuss how to simplify your application while we compare React to Web Components with Google Polymer. As mobile becomes the dominant experience, we'll see why now more than ever initialization time & overall performance matters. Lastly, you’ll get to hear how Comcast is building its next generation single page apps for millions of customers using the latest browser APIs, Redux and Web Components with Google Polymer. You’ll walk away from this talk feeling motivated and empowered to simplify your architecture. - Chris Lorenzo

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

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

30. What makes an app simple?

31. Simplicity Matters
-Rich Hickey

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

33. Components

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

37. React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

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

40. State => View (DOM)

41. import React, { Component } from 'react';
export default class HiMessage extends Component {
render() {
return <h1>Hi {this.props.name}!</h1>;
}
}
<HiMessage 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">

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

44. 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" />

45. 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" />

46. 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" />

47. with

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

49. Vanilla Component
Custom Elements V1

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

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

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

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

56. 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" />

57. 12kb50kb
VS

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

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

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

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

63. 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/

68. Over 15s!

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

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

72. Google Polymer Project

73. #UseThePlatform

74. Google Polymer Project

75. Your JS
Code +
Framework

76. Your JS
Code
Browser

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

78. Web Components
#UseThePlatform

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

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

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

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

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

84. Source: http://webcomponents.org/

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

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

87. Closer to the metal

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

89. What about Virtual Dom?

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

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

92. Are you Facebook?

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

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

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

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

97. 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';
}

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

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

100. What about building an App?

102. Unidirectional
Data Flow

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

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

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

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

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

108. 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
+

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

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

111. Decouple
State UI

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

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

114. Store {}

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

116. Kevin Schaaf:
End to End Apps
with Polymer

117. In Conclusion

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

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

120. 12kb50kb
VS VS
6kb

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

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

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

124. Simplicity Matters
-Rich Hickey

125. Simple !== Easy
-Rich Hickey

126. My
Journey
It’s
Hard

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

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

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