The Complementarity of

React.js and Web Components

React.js Conf 2015 | @AndrewRota

I ❤

Web Components

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').createShadowRoot();

// Add Styles and Text
s.innerHTML += '<style>p { color: red; }</style>';

<my-custom-element customAttribute="foo"></my-custom-element>

<my-custom-element customAttribute="foo">
  <!-- SHADOW DOM -->
  <style>p { color: red; }</style>
  <div>
    <button name="button"><content></content></button>
    <p>Lorem Ipsum</p>
  </div>
  <script>doSomething();</script>
  <!-- /SHADOW DOM -->
</my-custom-element>

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

I ❤

?

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

React or Web Components: Pick One?

<React/>

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

ERROR in ./src/js/init.js
Module build failed:Error: Lower case componentnames (my-custom-element) are no longersupported in JSX: Seehttp://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.”

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)”

“The Web is continuously evolving.”

Goodbye, Whitelist

Goodbye, Warning

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 Components!!'),
  document.getElementById('root')
);

Best Practices for BuildingWeb Components for React.js

Best Practices for BuildingWeb Components for    React.js    Anything

Web Components Should Be…

Web Components Should Be…

Good Idea

<my-button></my-button>

Bad Idea

<my-application></my-application>

Web Components Should Be…

Component API

<paper-toast text="Hello, world">

   getDOMNode().toggle()

      <paper-toast onClick={this.handleClick}>

Custom Events

React.createClass({
  render: function() {
    return (
      <paper-toast ref="myCustomElement" text="Hello, World"></paper-toast>
    );
  },
  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

Web Components Should Be…

“Try to keep as many of your components as possible stateless.”

Web Components Should Be…

Your application is only as fast as your slowest component.

Web Components Should Be…

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 within Web Components?

The Future (?)