Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Complementarity of React and Web Components

30,797 views

Published on

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.

Published in: Software

The Complementarity of React and Web Components

  1. 1. The Complementarity of React.js and Web Components React.js Conf 2015 | @AndrewRota
  2. 2. I
  3. 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. 4. Custom Elements Shadow DOM HTML Imports HTML Templates
  5. 5. Custom Elements <my-element>Hello World.</my-element> var MyElement = document.registerElement('my-element', prototype: Object.create(HTMLElement.prototype) });
  6. 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. 7. <my-custom-elementcustomAttribute="foo"></my-custom-element>
  8. 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. 9. Web Components are portable, because their API is the web platform itself.
  10. 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. 11. I
  12. 12. Virtual DOM One-Way Data Flow Ultra-High Performance Synthetic Event System Cohesive, Loosely Coupled Components Client + Server Rendering
  13. 13. ?
  14. 14. “I definitely think it's the wrong programming paradigm; I really hope that [web components] do not succeed.” — Pete Hunt
  15. 15. React or Web Components: Pick One?
  16. 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. 17. Custom Elements Shadow DOM Encapsulation Reusability Portability + Virtual DOM Synthetic Event System One-Way Data Flow Ultra-High Performance Client + Server Rendering
  18. 18. <React/> <React/> <React/> <React/> <DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/>
  19. 19. React.render( <my-custom-element>Web Components!!</my-custom-elemen document.getElementById('root') );
  20. 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. 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. 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. 23. “The Web is continuously evolving.” — WHATWG
  24. 24. Goodbye, Whitelist — Removed unknown tag warning/whitelist. #2830
  25. 25. Goodbye, Warning — Removed unknown tag warning/whitelist. #2830
  26. 26. Hello, Custom Elements! React.render( <my-custom-element>Web Components!!</my-custom-element>, document.getElementById('root') );
  27. 27. Hello, Custom Elements! React.render( React.createElement('my-custom-element', null, 'Web Compon document.getElementById('root') );
  28. 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. 29. Best Practices for Building Web Components for React.js
  30. 30. Best Practices for Building Web Components for React.js Anything
  31. 31. Web Components Should Be… - Small - Extremely Encapsulated - As Stateless as Possible - Performant
  32. 32. Web Components Should Be… - Small - Extremely Encapsulated - As Stateless as Possible - Performant
  33. 33. Good Idea <my-button></my-button>
  34. 34. Bad Idea <my-application></my-application>
  35. 35. Web Components Should Be… - Extremely Encapsulated - Small - As Stateless as Possible - Performant
  36. 36. Component API Attributes Methods Events <paper-toasttext="Hello,world"> getDOMNode().toggle() <paper-toastonClick={this.handleClick}>
  37. 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. 38. Not All Web Components Are Created Equal
  39. 39. <google-map></google-map>
  40. 40. Web Components Should Be… - As Stateless as Possible - Small - Extremely Encapsulated - Performant
  41. 41. “Try to keep as many of your components as possible stateless.” — — Great advice for Web Components React.js Documentation
  42. 42. Web Components Should Be… - Performant - Small - Extremely Encapsulated - As Stateless as Possible
  43. 43. Your application is only as fast as your slowest component.
  44. 44. Web Components Should Be… - Small - Extremely Encapsulated - As Stateless as Possible - Performant
  45. 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. 46. <React/> <React/> <React/> <React/> <DOM/> <DOM/> <DOM/> <WC/> <WC/> <DOM/> <React/>
  47. 47. React within Web Components?
  48. 48. The Future (?) Custom Attribute Support Custom Event Support ( )Issue #2746
  49. 49. Thanks! @AndrewRota

×