On Github: http://andrewrota.github.io/complementarity-of-react-and-web-components-presentation/index.html The component driven, performance focused approach of React is a perfect complement to the modularity and portability of native HTML Web Components. At first glance, React and Web Components might seem like two radically different solutions to the same problem. But when combined properly they complement each other to create an extremely powerful, expressive framework for developing complex web applications.

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