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
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
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.
29. "Paris - September | October 2012" by Nan Palmero is licensed under CC BY 2.0
35. Important Concepts to Understand
• Encapsulation
• Composition
• Separation of
Concerns
• Functional
Decomposition "separated" by hansol is licensed under CC BY 2.0
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
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" />
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/
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
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';
}
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