Forest header image

Symfony Finland
Random things on PHP, Symfony and web development

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:

  • RiotJS - A React-like user interface micro-library
  • RiotControl - Event Controller / Dispatcher For RiotJS, Inspired By Flux
  • RiotGear - An open source component library for RiotJS

With this set of tools you can build reusable tags with complex functionality, ready for production use today.

Riot.js

Riot.js is a library that allows you to build custom tags, compatible with all browsers starting from IE8. It is an effort by a Finnish company, Muut, and is guided by the following priciples:

  1. Riot has enjoyable syntax
  2. Riot has small learning curve
  3. Riot is tiny in size
  4. Riot is small, but complete

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.

Learn more about Riot.js

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.

Learn more about RiotControl

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.

Learn more about RiotGear

Written by Jani Tarvainen on Wednesday August 5, 2015
Permalink - Tags: javascript, webdev, riot-js, riotcontrol, riotgear

« New 2015 Debug Toolbar Design in Symfony - Spotlight: Puli, Deployer, Async execution of the Slim Framework »