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>';

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

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

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

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

12. I

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

14. ?

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

17. React or Web Components: Pick One?

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

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

20. <React/>
<React/> <React/> <React/>
<DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

40. Not All Web Components
Are Created Equal

41. <google-map></google-map>

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

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

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

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

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

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

50. <React/>
<React/> <React/> <React/>
<DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/>
<React/>

51. React within Web
Components?

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

53. Thanks!
@AndrewRota