Download as PDF, PPTX
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/85/Web-components-A-simpler-and-faster-react-44-320.jpg)
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/85/Web-components-A-simpler-and-faster-react-45-320.jpg)
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/85/Web-components-A-simpler-and-faster-react-46-320.jpg)
![<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>](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/85/Web-components-A-simpler-and-faster-react-53-320.jpg)
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/85/Web-components-A-simpler-and-faster-react-56-320.jpg)
![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';
}](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/85/Web-components-A-simpler-and-faster-react-97-320.jpg)
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/75/Web-components-A-simpler-and-faster-react-44-2048.jpg)
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/75/Web-components-A-simpler-and-faster-react-45-2048.jpg)
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/75/Web-components-A-simpler-and-faster-react-46-2048.jpg)
![<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>](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/75/Web-components-A-simpler-and-faster-react-53-2048.jpg)
![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" />](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/75/Web-components-A-simpler-and-faster-react-56-2048.jpg)
![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';
}](https://image.slidesharecdn.com/webcomponents-simplerandfasterreact-171005224745/75/Web-components-A-simpler-and-faster-react-97-2048.jpg)
More Related Content
![HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]](https://cdn.slidesharecdn.com/ss_thumbnails/html5smartmarkupforsmarterwebsitesfowdnyc2011-111107124157-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...](https://cdn.slidesharecdn.com/ss_thumbnails/thongnguyentrongbuibehavior-drivendevelopmentbddandautomationtestingwithcucumber-140717231054-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Web components: A simpler and faster react
Web components: A simpler and faster react
- 1. Web Components: A simplerand faster React #UseThePlatform to build a better web Chris Lorenzo / @chiefcll Senior Principal Engineer
- 2. Web Components: A simplerand faster ... #UseThePlatform to build a better web Chris Lorenzo / @chiefcll Senior Principal Engineer
- 3.
- 4. Workshop: Introduction to WebComponents & Polymer Little Rock Tech Fest - October 5, 2017 John Riviello @JohnRiv Chris Lorenzo @Chiefcll http://tinyurl.com/lrtf-polymer
- 5.
- 6. ● Largest CableTV & Internet Service Provider in US ● Fortune 50 company ● 30+ million customers ● Owns NBCUniversal ● 500+ Components Comcast © Comcast
- 7. ABOUT ME ● Married6 years ● 10 Years @ Comcast ● FE dev 16 years ● Son and daughter
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. How do Ibuild an app?
- 22. How do Imaintain an app?
- 23.
- 24.
- 25. That’s why welove Frameworks (+Libraries)
- 26.
- 27. No one knowshow 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 anapp simple?
- 31.
- 32.
- 33.
- 35. Important Concepts toUnderstand • Encapsulation • Composition • Separation of Concerns • Functional Decomposition "separated" by hansol is licensed under CC BY 2.0
- 37. React A JAVASCRIPT LIBRARYFOR BUILDING USER INTERFACES
- 38. React is allabout 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 becreating 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.
- 48. Existing Frameworks Applications Web Platform WebComponents built with Polymer (or not)
- 49.
- 51.
- 53.
- 54.
- 55.
- 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.
- 58. Performance Matters Performance Matters "stopwatch" by JulianLim 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 tothe Mobile Web F̶u̶t̶u̶r̶e̶ Present
- 62. 53% of usersabandon 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 thatare 1 second faster experience up to 27% increase in conversion rate. Source: https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
- 68.
- 70. "Paris - September| October 2012" by Nan Palmero is licensed under CC BY 2.0
- 71. Using Web Components Framework/LibrarySizes (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.
- 73.
- 74.
- 75.
- 76.
- 77. Alex Russell: Web Components: Justin the Nick of Time
- 78.
- 79. CUSTOM ELEMENTS HTMLIMPORTS SHADOW DOMTEMPLATES Source: http://webcomponents.org/
- 80.
- 81.
- 82.
- 83. let shadowRoot =elm.attachShadow({mode: 'open'}); shadowRoot.innerHTML = 'Hi There!';
- 84.
- 85.
- 86.
- 87. Closer to themetal
- 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.
- 90. Programmers know thebenefits of everything and the tradeoffs of nothing. Source: https://www.youtube.com/watch?v=rI8tNMsozo0 -Rich Hickey
- 91.
- 92.
- 93.
- 94. Justin Fagnani: Efficient, Expressive, and ExtensibleHTML Templates
- 95.
- 96.
- 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.
- 99.
- 100. What about buildingan App?
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108. component-name-event-name <xc-app> index.html Store {} Logic xc-people-unpause-all-devices NativeEvent Smart Parent 88 MPH + 1.21 gigawatts = Time travel +
- 109.
- 110.
- 111.
- 112. I’ve been marriedand divorced to so many frontend frameworks that I want to stay a bachelor for the rest of my life. -Paul Palladino
- 113. Can you moveit? -Rich Hickey Source: https://www.youtube.com/watch?v=rI8tNMsozo0
- 114.
- 115. "Software, testing, service"by testbytes is licensed under CC BY 2.0
- 116. Kevin Schaaf: End toEnd Apps with Polymer
- 117.
- 118. We can becreating the exact same programs out of significantly simpler components Source: https://www.youtube.com/watch?v=rI8tNMsozo0&t=805s -Rich Hickey
- 119. class HelloMessage extendsHyperHTMLElement { created() { this.state.name = 'Chris'; this.render(); } render() { this.html`<h1>${this.state.name}</h1>`; } } HelloMessage.define('hello-message');
- 120.
- 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.
- 125. Simple !== Easy -RichHickey
- 126.
- 128. "Rocky" by StefanOgrisek 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? ChrisLorenzo / @chiefcll Senior Principal Engineer Talks: http://bit.ly/2kYFOyj