SlideShare a Scribd company logo
The Complementarity of
React.js and Web Components
React.js Conf 2015 | @AndrewRota
I
Web Components
Web Components usher in a new era of web
development based on encapsulated and
interoperable custom elements that extend
HTML itself. — Polymer Project
Custom Elements
Shadow DOM
HTML Imports
HTML Templates
Custom Elements
<my-element>Hello World.</my-element>
var MyElement = document.registerElement('my-element',
prototype: Object.create(HTMLElement.prototype)
});
Shadow DOM
// Create Shadow Root
var s = document.getElementById('my-element').createShadow
// Add Styles and Text
s.innerHTML += '<style>p { color: red; }</style>';
The Complementarity of React and Web Components
<my-custom-elementcustomAttribute="foo"></my-custom-element>
<my-custom-elementcustomAttribute="foo">
<!--SHADOWDOM-->
<style>p{color:red;}</style>
<div>
<buttonname="button"><content></content></button>
<p>LoremIpsum</p>
</div>
<script>doSomething();</script>
<!--/SHADOWDOM-->
</my-custom-element>
Web Components are portable, because
their API is the web platform itself.
<inputtype="text"/>
<ahref="http://conf.reactjs.com/">Link!</a>
<videosrc="video.ogg"autoplaycontrols></video>
<x-calendarview="2015-01-29"></x-calendar>
<chart-pievalues="[10,20,5,50]"></chart-pie>
<my-custom-elementcustomAttribute="foo"></my-custom-element>
I
Virtual DOM
One-Way Data Flow
Ultra-High Performance
Synthetic Event System
Cohesive, Loosely Coupled Components
Client + Server Rendering
?
“I definitely think it's the
wrong programming paradigm; I really hope
that [web components] do not succeed.”
— Pete Hunt
The Complementarity of React and Web Components
React or Web Components: Pick One?
Custom Elements
Shadow DOM
Encapsulation
Reusability
Portability
or
Virtual DOM
Synthetic Event System
One-Way Data Flow
Ultra-High Performance
Client + Server Rendering
Custom Elements
Shadow DOM
Encapsulation
Reusability
Portability
+
Virtual DOM
Synthetic Event System
One-Way Data Flow
Ultra-High Performance
Client + Server Rendering
<React/>
<React/> <React/> <React/>
<DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/>
React.render(
<my-custom-element>Web Components!!</my-custom-elemen
document.getElementById('root')
);
ERROR in ./src/js/init.js
Module build failed:Error: Lower case component
names (my-custom-element) are no longer
supported in JSX: See
http://fb.me/react-jsx-lower-case
“The Whitelist Problem”
“Every time there's a new HTML/SVG tag, you can't
use it until we add it to the whitelist. You can't add
it to the whitelist until you update your existing
codebase.”
— (Oct. 5, 2014)Sebastian Markbåge
v0.12-rc1
“To address this, we decided on a convention:
All JSX tags that start with a lower-case letter
or contain a dash are treated as HTML.
…This also introduces the possibility to consume
custom elements (Web Components)”
— (Oct. 16, 2014)Sebastian Markbåge
“The Web is continuously evolving.”
— WHATWG
Goodbye, Whitelist
— Removed unknown tag warning/whitelist. #2830
Goodbye, Warning
— Removed unknown tag warning/whitelist. #2830
Hello, Custom Elements!
React.render(
<my-custom-element>Web Components!!</my-custom-element>,
document.getElementById('root')
);
Hello, Custom Elements!
React.render(
React.createElement('my-custom-element', null, 'Web Compon
document.getElementById('root')
);
<x-switch>
<x-accordion>
<x-flipbox>
<x-panel>
<x-toggle>
<x-modal>
<x-spinner>
<x-toggle>
<google-signin>
<google-youtube>
<google-map>
<google-drive>
<google-calendar>
<google-chart>
<google-sheets>
<google-url-shortener>
<paper-button>
<paper-progress>
<paper-radio-button>
<paper-slider>
<paper-spinner>
<paper-tabs>
<paper-toast>
<paper-dropdown>
<x-gif>
<time-elements>
<qr-code>
<github-card>
<mark-down>
<lazyload-image>
<sortable-table>
<ajax-form>
Best Practices for Building
Web Components for React.js
Best Practices for Building
Web Components for React.js Anything
Web Components Should Be…
- Small
- Extremely Encapsulated
- As Stateless as Possible
- Performant
Web Components Should Be…
- Small
- Extremely Encapsulated
- As Stateless as Possible
- Performant
Good Idea
<my-button></my-button>
Bad Idea
<my-application></my-application>
Web Components Should Be…
- Extremely Encapsulated
- Small
- As Stateless as Possible
- Performant
Component API
Attributes
Methods
Events
<paper-toasttext="Hello,world">
getDOMNode().toggle()
<paper-toastonClick={this.handleClick}>
Custom Events
React.createClass({
render:function(){
return(
<paper-toastref="myCustomElement"text="Hello,World"></paper-toa
);
},
componentDidMount:function(){
this.refs.myCustomElement.getDOMNode()
.addEventListener('core-overlay-close-completed',doSomething);
},
componentWillUnmount:function(){
this.refs.myCustomElement.getDOMNode()
.removeEventListener('core-overlay-close-completed',doSomething)
}
});
Not All Web Components
Are Created Equal
<google-map></google-map>
The Complementarity of React and Web Components
The Complementarity of React and Web Components
Web Components Should Be…
- As Stateless as Possible
- Small
- Extremely Encapsulated
- Performant
“Try to keep as many of your components as
possible stateless.”
—
— Great advice for Web Components
React.js Documentation
Web Components Should Be…
- Performant
- Small
- Extremely Encapsulated
- As Stateless as Possible
Your application is only as fast as your
slowest component.
Web Components Should Be…
- Small
- Extremely Encapsulated
- As Stateless as Possible
- Performant
tl;dr Web Components should seem no
different than native DOM elements.
corollary: Use Web Components in React.js
as if they were native DOM elements.
<React/>
<React/> <React/> <React/>
<DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/>
<React/>
React within Web
Components?
The Future (?)
Custom Attribute Support
Custom Event Support
( )Issue #2746
Thanks!
@AndrewRota

More Related Content

What's hot

Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook react
Keyup
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
David Ličen
 
Modern frontend development with VueJs
Modern frontend development with VueJsModern frontend development with VueJs
Modern frontend development with VueJs
Tudor Barbu
 
React js
React jsReact js
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
Jennifer Estrada
 
Learn react-js
Learn react-jsLearn react-js
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
 
Google Polymer Introduction
Google Polymer IntroductionGoogle Polymer Introduction
Google Polymer Introduction
David Price
 
Intro to ReactJS
Intro to ReactJSIntro to ReactJS
Intro to ReactJS
Harvard Web Working Group
 
Introduction to ReactJs & fundamentals
Introduction to ReactJs & fundamentalsIntroduction to ReactJs & fundamentals
Introduction to ReactJs & fundamentals
websyndicate
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
Manvendra Singh
 
Web components
Web componentsWeb components
Web components
Tudor Barbu
 
React JS .NET
React JS .NETReact JS .NET
React JS .NET
Jennifer Estrada
 
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Hendrik Ebbers
 
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBDynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Apaichon Punopas
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
FITC
 
A Brief Introduction to React.js
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.js
Doug Neiner
 
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
Zachary Klein
 
React
React React
React
중운 박
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 

What's hot (20)

Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook react
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
Modern frontend development with VueJs
Modern frontend development with VueJsModern frontend development with VueJs
Modern frontend development with VueJs
 
React js
React jsReact js
React js
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
 
Google Polymer Introduction
Google Polymer IntroductionGoogle Polymer Introduction
Google Polymer Introduction
 
Intro to ReactJS
Intro to ReactJSIntro to ReactJS
Intro to ReactJS
 
Introduction to ReactJs & fundamentals
Introduction to ReactJs & fundamentalsIntroduction to ReactJs & fundamentals
Introduction to ReactJs & fundamentals
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
 
Web components
Web componentsWeb components
Web components
 
React JS .NET
React JS .NETReact JS .NET
React JS .NET
 
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
 
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBDynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
 
A Brief Introduction to React.js
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.js
 
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
 
React
React React
React
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 

Viewers also liked

Κωνσταντίνος Καβάφης
Κωνσταντίνος  Καβάφης  Κωνσταντίνος  Καβάφης
Κωνσταντίνος Καβάφης
nicolaidoumarina
 
Κωνσταντίνος Καβάφης
Κωνσταντίνος ΚαβάφηςΚωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης
nicolaidoumarina
 
ΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗ
ΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗ
ΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗ
nicolaidoumarina
 
ΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣ
ΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣ
ΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣ
nicolaidoumarina
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
nicolaidoumarina
 
Κωνσταντίνος Καβάφης
Κωνσταντίνος ΚαβάφηςΚωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης
nicolaidoumarina
 
Sample ppt new niche interior by mulavira interior systems
Sample ppt new niche interior   by mulavira interior systemsSample ppt new niche interior   by mulavira interior systems
Sample ppt new niche interior by mulavira interior systems
Mulavira Interior Systems
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
nicolaidoumarina
 
Big data on AWS
Big data on AWSBig data on AWS
Big data on AWS
Stylight
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
nicolaidoumarina
 
Alejandra la paradoja de james hunter
Alejandra la paradoja de james hunterAlejandra la paradoja de james hunter
Alejandra la paradoja de james hunter
Alejandra Asuaje Mayor
 
Article
ArticleArticle
Warehousing Nagpur
Warehousing NagpurWarehousing Nagpur
Warehousing Nagpur
plusgrow
 
ΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥ
ΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥ
ΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥ
nicolaidoumarina
 
RENNIE COWAN - GRAPHIC DESIGN
RENNIE COWAN - GRAPHIC DESIGN RENNIE COWAN - GRAPHIC DESIGN
RENNIE COWAN - GRAPHIC DESIGN
Rennie_Cowan_Films_Art
 
Μασάι Ελευθέριος
Μασάι   ΕλευθέριοςΜασάι   Ελευθέριος
Μασάι Ελευθέριος
nicolaidoumarina
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
nicolaidoumarina
 
Το καστρο της λεμεσου
Το καστρο της λεμεσου Το καστρο της λεμεσου
Το καστρο της λεμεσου
nicolaidoumarina
 
Οι διδυμοι πυργοι της Λεμεσου
Οι διδυμοι πυργοι της ΛεμεσουΟι διδυμοι πυργοι της Λεμεσου
Οι διδυμοι πυργοι της Λεμεσου
nicolaidoumarina
 
Κωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης Κωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης
nicolaidoumarina
 

Viewers also liked (20)

Κωνσταντίνος Καβάφης
Κωνσταντίνος  Καβάφης  Κωνσταντίνος  Καβάφης
Κωνσταντίνος Καβάφης
 
Κωνσταντίνος Καβάφης
Κωνσταντίνος ΚαβάφηςΚωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης
 
ΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗ
ΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗ
ΟΔΟΣ ΔΗΜΟΣΘΕΝΗ ΜΙΤΣΗ
 
ΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣ
ΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣ
ΟΔΟΣ Δ. ΜΙΤΣΗ ΛΕΜΕΣΟΣ
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
 
Κωνσταντίνος Καβάφης
Κωνσταντίνος ΚαβάφηςΚωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης
 
Sample ppt new niche interior by mulavira interior systems
Sample ppt new niche interior   by mulavira interior systemsSample ppt new niche interior   by mulavira interior systems
Sample ppt new niche interior by mulavira interior systems
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
 
Big data on AWS
Big data on AWSBig data on AWS
Big data on AWS
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
 
Alejandra la paradoja de james hunter
Alejandra la paradoja de james hunterAlejandra la paradoja de james hunter
Alejandra la paradoja de james hunter
 
Article
ArticleArticle
Article
 
Warehousing Nagpur
Warehousing NagpurWarehousing Nagpur
Warehousing Nagpur
 
ΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥ
ΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥ
ΟΔΟΣ ΣΙΜΟΥ ΜΕΝΑΡΔΟΥ
 
RENNIE COWAN - GRAPHIC DESIGN
RENNIE COWAN - GRAPHIC DESIGN RENNIE COWAN - GRAPHIC DESIGN
RENNIE COWAN - GRAPHIC DESIGN
 
Μασάι Ελευθέριος
Μασάι   ΕλευθέριοςΜασάι   Ελευθέριος
Μασάι Ελευθέριος
 
Καβάφης Κωνσταντίνος
Καβάφης ΚωνσταντίνοςΚαβάφης Κωνσταντίνος
Καβάφης Κωνσταντίνος
 
Το καστρο της λεμεσου
Το καστρο της λεμεσου Το καστρο της λεμεσου
Το καστρο της λεμεσου
 
Οι διδυμοι πυργοι της Λεμεσου
Οι διδυμοι πυργοι της ΛεμεσουΟι διδυμοι πυργοι της Λεμεσου
Οι διδυμοι πυργοι της Λεμεσου
 
Κωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης Κωνσταντίνος Καβάφης
Κωνσταντίνος Καβάφης
 

Similar to The Complementarity of React and Web Components

Web Components and Modular CSS
Web Components and Modular CSSWeb Components and Modular CSS
Web Components and Modular CSS
Andrew Rota
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
cherukumilli2
 
Web Components for Java Developers
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java Developers
Joonas Lehtinen
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
Rachael L Moore
 
Polymer - Lego for the web!
Polymer - Lego for the web!Polymer - Lego for the web!
Polymer - Lego for the web!
Codemotion
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
James Pearce
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
Vivek Rajan
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
Kaloyan Kosev
 
Web Components: The future of Web Application Development
Web Components: The future of Web Application DevelopmentWeb Components: The future of Web Application Development
Web Components: The future of Web Application Development
Jermaine Oppong
 
Creating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-htmlCreating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-html
Ilia Idakiev
 
Introduction to Polymer
Introduction to PolymerIntroduction to Polymer
Introduction to Polymer
Egor Miasnikov
 
Polymer
Polymer Polymer
Polymer
jskvara
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
Polymer 1.0
Polymer 1.0Polymer 1.0
Polymer 1.0
Cyril Balit
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Phil Leggetter
 
Devoxx 2014-webComponents
Devoxx 2014-webComponentsDevoxx 2014-webComponents
Devoxx 2014-webComponents
Cyril Balit
 
Orchard Harvest 2014 - The Future of Widgets?
Orchard Harvest 2014 - The Future of Widgets?Orchard Harvest 2014 - The Future of Widgets?
Orchard Harvest 2014 - The Future of Widgets?
Steve Taylor
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
Makoto Mori
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
Timothy Fisher
 

Similar to The Complementarity of React and Web Components (20)

Web Components and Modular CSS
Web Components and Modular CSSWeb Components and Modular CSS
Web Components and Modular CSS
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
Web Components for Java Developers
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java Developers
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
 
Polymer - Lego for the web!
Polymer - Lego for the web!Polymer - Lego for the web!
Polymer - Lego for the web!
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Web Components: The future of Web Application Development
Web Components: The future of Web Application DevelopmentWeb Components: The future of Web Application Development
Web Components: The future of Web Application Development
 
Creating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-htmlCreating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-html
 
Introduction to Polymer
Introduction to PolymerIntroduction to Polymer
Introduction to Polymer
 
Polymer
Polymer Polymer
Polymer
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Polymer 1.0
Polymer 1.0Polymer 1.0
Polymer 1.0
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
 
Devoxx 2014-webComponents
Devoxx 2014-webComponentsDevoxx 2014-webComponents
Devoxx 2014-webComponents
 
Orchard Harvest 2014 - The Future of Widgets?
Orchard Harvest 2014 - The Future of Widgets?Orchard Harvest 2014 - The Future of Widgets?
Orchard Harvest 2014 - The Future of Widgets?
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 

More from Andrew Rota

Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
 
Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Andrew Rota
 
Getting Started with GraphQL && PHP
Getting Started with GraphQL && PHPGetting Started with GraphQL && PHP
Getting Started with GraphQL && PHP
Andrew Rota
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
Andrew Rota
 
Building a GraphQL API in PHP
Building a GraphQL API in PHPBuilding a GraphQL API in PHP
Building a GraphQL API in PHP
Andrew Rota
 
Ten practical ways to improve front-end performance
Ten practical ways to improve front-end performanceTen practical ways to improve front-end performance
Ten practical ways to improve front-end performance
Andrew Rota
 
Component Based UI Architectures for the Web
Component Based UI Architectures for the WebComponent Based UI Architectures for the Web
Component Based UI Architectures for the Web
Andrew Rota
 
Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)
Andrew Rota
 
Effectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side PerformanceEffectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side Performance
Andrew Rota
 
UI Rendering at Wayfair
UI Rendering at WayfairUI Rendering at Wayfair
UI Rendering at Wayfair
Andrew Rota
 
Better PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.jsBetter PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.js
Andrew Rota
 
Tungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular FrameworkTungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular Framework
Andrew Rota
 
Why Static Type Checking is Better
Why Static Type Checking is BetterWhy Static Type Checking is Better
Why Static Type Checking is Better
Andrew Rota
 
An Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our OwnAn Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our Own
Andrew Rota
 
Bem methodology
Bem methodologyBem methodology
Bem methodology
Andrew Rota
 

More from Andrew Rota (15)

Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019
 
Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)
 
Getting Started with GraphQL && PHP
Getting Started with GraphQL && PHPGetting Started with GraphQL && PHP
Getting Started with GraphQL && PHP
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
 
Building a GraphQL API in PHP
Building a GraphQL API in PHPBuilding a GraphQL API in PHP
Building a GraphQL API in PHP
 
Ten practical ways to improve front-end performance
Ten practical ways to improve front-end performanceTen practical ways to improve front-end performance
Ten practical ways to improve front-end performance
 
Component Based UI Architectures for the Web
Component Based UI Architectures for the WebComponent Based UI Architectures for the Web
Component Based UI Architectures for the Web
 
Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)
 
Effectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side PerformanceEffectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side Performance
 
UI Rendering at Wayfair
UI Rendering at WayfairUI Rendering at Wayfair
UI Rendering at Wayfair
 
Better PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.jsBetter PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.js
 
Tungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular FrameworkTungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular Framework
 
Why Static Type Checking is Better
Why Static Type Checking is BetterWhy Static Type Checking is Better
Why Static Type Checking is Better
 
An Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our OwnAn Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our Own
 
Bem methodology
Bem methodologyBem methodology
Bem methodology
 

Recently uploaded

Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
jhkdigitalmarketing
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
norina2645
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
TaskSprint | Employee Efficiency Software
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
Daniel Zivkovic
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
902basic
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
confluent
 
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction InnovationNYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS Construction ERP Software
 
Introduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of ThingsIntroduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of Things
NachuSubramanian1
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
akshesh doshi
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
Task Tracker
 
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdfIoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
mohitd6
 
Artificial intelligence in customer services or chatbots
Artificial intelligence  in customer services or chatbotsArtificial intelligence  in customer services or chatbots
Artificial intelligence in customer services or chatbots
kayash1656
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
OnePlan Solutions
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
jealousviolet
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
simran hot girls
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
ThousandEyes
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
shanihomely
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
dream girl
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 

Recently uploaded (20)

Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
 
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction InnovationNYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction Innovation
 
Introduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of ThingsIntroduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of Things
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
 
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdfIoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
 
Artificial intelligence in customer services or chatbots
Artificial intelligence  in customer services or chatbotsArtificial intelligence  in customer services or chatbots
Artificial intelligence in customer services or chatbots
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 

The Complementarity of React and Web Components