Using Riot.js + ES6 in viewer extensions

By Philippe Leefsma

That's my first post of 2016, so a Happy New Year! is in order. During the break, I've been playing with a less popular, however rising, JS front-end framework called Riot.js. Advertised on its own website as "a React-like user interface micro-library", Riot lets you define "custom tags" (AKA web components) which can be inserted inside your html as elements with self-contained JavaScript logic.

To me, the most seducing feature of Riot is its tininess and simplicity of use. Here is a picture that worths thousand words:

 

 

 

You can write Riot custom tags inside .tag files which are then referenced by your html the same way you reference a plain .js script. Here is an example extracted from the API documentation, for more details I invite to check the page directly:

1 <my-tag>
2   <h3>
3     {opts.title}
4   </h3>
5 
6   var title = opts.title
7   
8 </my-tag>

That's nice but another cool feature is the possibility to write the component as plain JavaScript using a template string. For a simple tag like this one the template would fit in a single line, however as your components become more complex, you would need to fit the html template on multiple lines to accommodate readability. That's were ES6 multiline strings come into the game. The previous tag would look as follow in plain ES6 js:

 1 riot.tag('my-tag',
 2 
 3   `<h3>
 4     {title}
 5   </h3>
 6   `,
 7 
 8   function(opts) {
 9 
10     this.title = opts.title
11   }
12 );

From there, we can write more complex riot components fitting in a single viewer extension plain js file which can be loaded/unloaded dynamically. Here is a picture of the demo panel I created and a link where you can test it live:


The full implementation of the riot panel extension is here, as you can see zero jQuery in the code: