Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

A look into Web Components - Riot.js, Polymer and React.js

Riot is a lightweight library for building user interfaces. It springs out of the Muut project which is similar to Disqus, for example. This is why the library is needs to be lightweight and work with a lot of other technologies.

Riot.js has been around for a number of years and focuses around the official Web Components specification. Instead of reinventing the wheel like some think React.js does, Riot.js uses the web components specification as a base.

It is likely that he web component standard is the ultimate winner in UI wars. It's sane to acknowledge that this will take years and there will be intermediate layers in working with web components for a number of years. One of these is React.js tself, which can interop with native Web Components:

This example demonstrates WebComponent/ReactComponent interoperability by rendering a ReactComponent, which renders a WebComponent, which renders another ReactComponent in the WebComponent's shadow DOM.
Example with WebComponents and React

In addition it is impossible not to include polyfill technologies as a practical way forward for adopting Web Components. During 2015 and 2016 the polyfill approach with Polymer and X-Tags has been largely ignored by the general public while React.js has become synonymous with building web applications from components.

With Angular 2 also touting it's own approach on components, it seems that polyfills are likely to gain traction going through 2016. It's also somewhat curious that both Angular and Polymer come from Google and are somewhat competing technologies.

In a recent article the Riot.js development team states their views on how Riot.js differs from React and Polymer and how they plan to reach their goal as being "jQuery for Web Components". It's a recommended read and can be found on the official Riot.js site: Riot vs React & Polymer

Written by Jorgé on Monday June 20, 2016

Permalink -

« Dgraph is a next generation Graph Database with GraphQL as the query language - Why is Google working on Angular 2 and Polymer? »