Reliable web components with React.js and ReactiveElements
Better composition and code reusing are top important topics of modern front-end development. Great solution for this is web-components technology but it requires few polyfills in order to work properly in modern browsers. This impacts performance and reliability. ReactiveElements allows to use React.js for web-components definition, avoid including most of polyfills and build project with web-components right now.
UPD: You may use MVC Elements in order to create Web Components of Angular and Backbone views.
There are a lot of MVC framevorks and every of them have pros and cons. Common con is impossibility to share code between them correctly. But what if you already have a codebase built with some framework and for current project would like to use another one? What if part of your project needs another approach comparing to what your current framework proposes?
Standradized solution for this could be web-component platform which allows to reuse code and compose at HTML specification level.
Basis for web-components is custom element specification which enpowers front-end with the possibility to use HTML tags having developer defined behaviour and content. They could be <touch-galery> tag which speaks for itself or <broadcast-list> for displaying TV schedule.
Custom elements is the most important part of web-components however few more features needed to make technology complete. They are Shadow DOM needed to keep component`s structure as a black box without influencing the rest of page. And there is HTML import to include web-components and their templates to a project.
We see that web-components technology consists of three parts:
- HTML Templates;
- Custom elements;
- Shadow DOM;
- HTML import.
Most of browsers do not support all three specifications and need few polyfills in order to work properly. Ofcourse using such amount of polyfills impact reliability and performance. This is the reason why web-components are not being used widely even taking into accout great interest of front-end community.
This weakness could be minimized by using Facebook React library for web-components definition.
Cons of React:
- React is designed to be component development framework;
- No manual DOM changes, React components are black boxes from DOM perspective;
- Virtual DOM tree and optimized rendering;
- Include via ordinary JS files linking.
This means that React allows to avoid using three of four polyfills. It allows to import components in well known manner and also makes using Shadow DOM useless because it manages DOM without a risk for other components be affected.
ReactiveElements is a tiny wrapper for React widgets which allows to use them as web-components. It uses only Custom Elements part of specification which could be easily achieved by using Mozilla X-Tag or Google Polymer and modern browsers have Custom Elements out of the box.
At the moment X-Tag and Polymer use same Custom Elements polyfill which could be used separately from this libraries. You can find standalone polyfill here https://github.com/Polymer/CustomElements
Creating reactive element is as easy as one line of code:
document.registerReact('tag-name', reactClass);
This example displays basic reactive elememnt and allows to manipulate it in few possible ways:
- Set properties via attribute of node;
- Set properties via HTML node object “prop” property;
- Executing React component methods via node object.
A bit more advanced is a component which represents TV schedule data. It requests server for a TV schedule data based on tag attributes. So setting for example “category” attribute to “action” will display broadcasts from corresponding category in the list. There are also “start”, “end” properties to filter broadcasts by start / end time and region to specify country. Resulting application is tiny due to great ability for code reusing of web-components and power of ReactiveElements.
<body>
<h1>Choose category</h1>
<select onchange="changeCategory(value)">
<option value="sport">Sport</option>
<option value="documentary">Documentary</option>
<option value="kids">Kids</option>
</select>
<broadcasts-list id="myBroadcastList" category="sport" region="IE"></broadcasts-list>
<script>
function changeCategory(value) {
var myBroadcastList = document.getElementById('myBroadcastList');
myBroadcastList.setAttribute('category', value);
myBroadcastList.refreshData();
}
</script>
</body>
UPD: You may convert Angular directives and Backbone views as well using BackboneElements and AngularElements MVC Elements project.