1.
The Complementarity of
React.js and Web Components
React.js Conf 2015 | @AndrewRota

2.
I

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

4.
Custom Elements
Shadow DOM
HTML Imports
HTML Templates

5.
Custom Elements
<my-element>Hello World.</my-element>
var MyElement = document.registerElement('my-element',
prototype: Object.create(HTMLElement.prototype)
});

6.
Shadow DOM
// Create Shadow Root
var s = document.getElementById('my-element').createShadow
// Add Styles and Text
s.innerHTML += '<style>p { color: red; }</style>';

7.
<my-custom-elementcustomAttribute="foo"></my-custom-element>

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

9.
Web Components are portable, because
their API is the web platform itself.

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

11.
I

12.
Virtual DOM
One-Way Data Flow
Ultra-High Performance
Synthetic Event System
Cohesive, Loosely Coupled Components
Client + Server Rendering

13.
?

14.
“I definitely think it's the
wrong programming paradigm; I really hope
that [web components] do not succeed.”
— Pete Hunt

15.
React or Web Components: Pick One?

16.
Custom Elements
Shadow DOM
Encapsulation
Reusability
Portability
or
Virtual DOM
Synthetic Event System
One-Way Data Flow
Ultra-High Performance
Client + Server Rendering

17.
Custom Elements
Shadow DOM
Encapsulation
Reusability
Portability
+
Virtual DOM
Synthetic Event System
One-Way Data Flow
Ultra-High Performance
Client + Server Rendering

18.
<React/>
<React/> <React/> <React/>
<DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/>

19.
React.render(
<my-custom-element>Web Components!!</my-custom-elemen
document.getElementById('root')
);

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

21.
“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

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

23.
“The Web is continuously evolving.”
— WHATWG

24.
Goodbye, Whitelist
— Removed unknown tag warning/whitelist. #2830

25.
Goodbye, Warning
— Removed unknown tag warning/whitelist. #2830

26.
Hello, Custom Elements!
React.render(
<my-custom-element>Web Components!!</my-custom-element>,
document.getElementById('root')
);

27.
Hello, Custom Elements!
React.render(
React.createElement('my-custom-element', null, 'Web Compon
document.getElementById('root')
);

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

29.
Best Practices for Building
Web Components for React.js

30.
Best Practices for Building
Web Components for React.js Anything

31.
Web Components Should Be…
- Small
- Extremely Encapsulated
- As Stateless as Possible
- Performant

32.
Web Components Should Be…
- Small
- Extremely Encapsulated
- As Stateless as Possible
- Performant

33.
Good Idea
<my-button></my-button>

34.
Bad Idea
<my-application></my-application>

35.
Web Components Should Be…
- Extremely Encapsulated
- Small
- As Stateless as Possible
- Performant

36.
Component API
Attributes
Methods
Events
<paper-toasttext="Hello,world">
getDOMNode().toggle()
<paper-toastonClick={this.handleClick}>

37.
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)
}
});

38.
Not All Web Components
Are Created Equal

39.
<google-map></google-map>

40.
Web Components Should Be…
- As Stateless as Possible
- Small
- Extremely Encapsulated
- Performant

41.
“Try to keep as many of your components as
possible stateless.”
—
— Great advice for Web Components
React.js Documentation

42.
Web Components Should Be…
- Performant
- Small
- Extremely Encapsulated
- As Stateless as Possible

43.
Your application is only as fast as your
slowest component.

44.
Web Components Should Be…
- Small
- Extremely Encapsulated
- As Stateless as Possible
- Performant

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

46.
<React/>
<React/> <React/> <React/>
<DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/>
<React/>

47.
React within Web
Components?

48.
The Future (?)
Custom Attribute Support
Custom Event Support
( )Issue #2746

49.
Thanks!
@AndrewRota