Introducing Riot.js, RiotControl and RiotGear

There is plenty of buzz around the web development community about web components. There are standards polyfill implementations and custom approaches such as Facebook's React and Flux combo. While there is no shortage of options, this post will introduce yet another one useful family of technologies.

Earlier on I wrote a simple tutorial on how to create a map component with Riot, but there are more interesting pieces to the ecosystem. Here are some of the core ones to learn today:

The library is used with their commenting platform. As Riot is designed to be embedded into websites of all sorts, so it is lightweight and high performance out of necessity.

Riot allows you to create custom tags, with functionality embedded in a single file that looks like regular HTML. This is immediately familiar to web developers, opposed to the (initially) overwhelming syntax of React. See comparison of React and Riot syntax.

Despite being small, weighing in at just 7 KB, Riot offers a lot of features like Scoped CSS, Server Side Rendering Support and a lot more. Riot tries not to enforce strict rules, but rather provide basic tools for you to use creatively. This flexible approach leaves the bigger architectural decisions up to the developer.

RiotControl

RiotControl is a simplistic Central Event Controller / Dispatcher For RiotJS. It is inspired by Facebook's Flux Architecture Pattern, but it is extremely lightweight and passes up on features in favour of simplicity and performance.

RiotControl passes events from views to stores, and back, relying on Riot's observable API. Stores can talk to many views, and views can talk to many stores. In essence RiotControl allows you to store the state of your application, enabling clear separation of concerns and inter-component communication with ease.

RiotGear

RiotGear is an open source component library for Riot. It has multiple ready made components built with Riot.js for you to mix and match in your application. Many of the common needs of web developers such as Date Pickers, Auto Complete, Tag Selector and more are at your disposal.