35: React & Reactive Elements

React’s Virtual DOM (Document Object Model) & the browser DOM  are very different in their approach. Virtual DOM prefers to keep it’s logic and changes in JavaScript and eventually optimizes output to the browser DOM at the most critical moment that provides performance boosts while the browser DOM utilizes the traditional way of working with the document, accessing HTML directly, working with browser events, and manipulating state. The performance gains from a Virtual DOM approach are outstanding despite the fact that events, css, markup, and ‘all-of-the-things’ are stubbed, recreated, or handled in some way inside the JavaScript. Browser DOM, on the other hand, handles everything in the global document and leverages JavaScript, CSS, and other resources directly. Surely these approaches are not good to use together.

Wrong!

Andrew Rota (@AndrewRota) & Denis Radin (@PixelsCommander) talk about the ways you can leverage both Web Components & React.js together in a symbiotic fashion. Denis, creator of Reactive Elements, starts us off explaining how his library came to be and why he chose to marry these two technologies in his work. Andrew, who spoke at ReactConf 2015 talks about his experiences with Web Components & React.

Resources

• Reactive Elements - https://github.com/PixelsCommander/ReactiveElements

• Component Interop With React And Custom Elements - http://addyosmani.com/blog/component-interop-with-react-and-custom-elements/

• Pros/Cons of React vs. Web Components - http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer

• Combining React, Flux & Web Components - http://futurice.com/blog/combining-react-flux-and-web-components

• Complementarity of React and Web Components - http://webcomponents.org/presentations/complementarity-of-react-and-web-components-at-reactjs-conf/

• React vs. Polymer - https://news.ycombinator.com/item?id=8050649

• React Demystified - http://blog.reverberate.org/2014/02/react-demystified.html

• Rob Dodson’s experiments with React & Web Components - https://github.com/robdodson/react-polymer

• Front End Tower of Babylon - http://www.slideshare.net/DenisRadin/frontend-tower-of-babylon

• React vs. Web Components article - https://www.pandastrike.com/posts/20150311-react-bad-idea

Panelists

• Erik Isaksen - UX Engineer at3Pillar Global

• Nick Niemeir - JavaScript Agent Engineer at New Relic