Proactivity

RiotJS, A Brief Description

Veröffentlicht am

What is RiotJS ?

Small Answer

Another front-end framework for building your view layer (just like React and Polymer)

More Comprehensive Answer

So, if you are a web developer working on front-end - In all probabilty - there are way too many frameworks you would’ve seen (or even worked upon)
There are MVVM/MVC frameworks like BackboneJS, Knockout, spine, Angular, VueJS and many others.

Most of these manage the entire part of the front-end stack - The Javascript logic as well as the templating and routing (Angular does a bit more, in fact a little too much for certain pro’s likings)

However, there are a second type of frameworks (those that focus only on view layer management)
Off late have appeared a components based views building ideology with web components and frameworks like Polymer endorsed that concept beautifully.

Then came the revolution with Facebook taking an aggressive open-source rout starting with React. Why this is termed as a revolution is because of the community & adoption rates it has built in such a short period. The philosophy with React too has been modular view building. However the approach has differed with the DOM manipulations always going through Virtual-DOM.

So, Riot is again a view managing framework that builds on concepts popularised by both Polymer and React.
It takes a midway between the Polymer and React paths.
It follows a more polymer component like syntax (which is music to eyes full of JSX experience).
But for DOM manipulations it goes a Virtual DOM route(like React) with a different diffing engine(open-sourced) and much smaller than React’s.

How it’s different from others (pros/cons)

Why it’s a good bet ?

  • It’s the simplest to start with. Small learning curve(compared to React, Polymer)
  • It brings no baggage. It is pure HTML and JS and you can use whatever you wish (just like basic HTML/JS code)
  • Has a good and active community support https://gitter.im/riot/riot
  • Virtual DOM makes Absolutely the smallest possible amount of DOM updates and reflows
    supports Server-side rendering of custom tags for universal (isomorphic) applications
  • No proprietary event system
  • Create tags with ES6, Typescript, CoffeeScript, Jade, LiveScript or any pre-processor you want

What’s not so good ?

  • The diffing leaves much desired in terms of performance (when compared to React). This affects overall performances in some specific scenarios.(like listing and an item changing)
    Having said that - v3.0 is having plenty of focus on optimizations and needs to be examined for changes in that.

Can’t follow. What is RiotJS specifically ?

Simply put, it’s a framework that makes it possible to build your view layer in a block by block fashion, where you can build different reusable components and build views composed of them.
(just like html markup has header, body, footer - riot extends that to any level of developer’s desire). Look at the github repo code (below) for a better visualization.

RiotJS as explained by community

A starter course on Youtube

The Code I use to explain the setup

The code I’m using is at github
Feel free to extend the chain

What does a Riot component look like ?

It can be described in a tag file. Webpack does the magic of reading the tag file material and compiling as a riot component. You can now use this component in any HTML file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
'use strict';
// use any library or custom code
const g = require('../lib/gravatar')
<gravatar>
  <!-- use events binding just like normal HTML markup	-->
  <!-- use style classes just like normal HTML markup	-->
  <a onclick="{handleClick}" target="_blank" class="meet">
    <img src={url}
         width="{this.opts.size || 200}"
         height="{this.opts.size || 200}">
  </a>
  <pre>
  	<!-- binding data from script in markup	-->
    {this.opts.email || this.email}
  </pre>
  <style>
    .meet {
      display: inline-block;
      padding: 1em;
      text-align: center;
    }
    .meet img {
      background-color: rgb(211, 211, 211);
      border: 5px solid rgb(255, 255, 255);
      border-radius: 100%;
      box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 7px;
      margin: auto;
    }
  </style>
  <script>
    this.handleClick = (e) => {
      alert('handled a click event')
    }
    this.on('mount', () => {
      this.email = this.opts.email || 'saurshaz@gmail.com'
      const options =  {size: this.opts.size ||  200, rating: "pg", backup: "retro", secure: true}
      this.url = g.gravatar(this.email, options)
      this.update()
    })
  </script>
</gravatar>

Presented here is a gravatar component built using RiotJS
Superpowers covered in this small snippet above (if you look carefully) are :-

use any library or custom code (using a custom code gravatar.js here by simply importing)
use events binding just like normal HTML markup (onclick in markup and this.<function_name> in script section)
use style classes just like normal HTML markup (good old class=<classname> syntax)
binding data from script in markup (look at this.url and this.email in script part)
scoped style (good old