Riot vs React

Riot takes the expressions from a DOM tree and stores them in an array. Each of these expressions points to a DOM node. On each cycle these expressions are compared to the values in the DOM. So when a value has changed, Riot automatically updates the corresponding node. This way the operations are kept to a minimal amount and since the expressions can be cached, going through 1000 of them takes less than 1ms.

Riot is made to be used with websites of any kind, so it's built to be easy and lightweight, but still maintaining all the needed features for a UI library. It's only 2.5 KB in size when minified. So it can also be used for mobile web apps without requiring much bandwidth to download.

Riot components use custom tags which are nothing more than familiar HTML tags coupled with JavaScript. This eliminates the need to learn another templating language or syntax. For example:

<todo>
    <h3>TODO</h3>

    <ul>
        <li each={ item, i in items }>{ item }</li>
    </ul>
    <form onsubmit={ handleSubmit }>
        <input>
        <button>Add #{ items.length + 1 }</button>
    </form>

    this.items = []

    handleSubmit(e) {
        var input = e.target[0]
        this.items.push(input.value)
        input.value = ''
    }
</todo>

Riot tries to separate HTML and JavaScript, while still keeping them inside the component. This way, the HTML can also be neatly mixed with JavaScript expressions.

Riot has support for server side rendering. The views and data are rendered on the server, then those views are sent as HTML to the browser when a user requests them.

This helps with initial loading time and is very useful for SEO purposes because the web app is indexed by search engines same as other static websites that have their HTML on the server.

It is very easy to use your favorite preprocessors with the Riot compiler. Riot comes with CoffeeScript, ES6 (Babel), TypeScript, LiveScript and Jade support. You can also add your own parsers.

It makes React look confusing as hell. Nothing against React - It's just that easy to implement!

Riot supports scoped CSS inside components for every browser by rewriting stylesheet rules.

Since it's not opinionated, even the scripting can be in anything that can be transpired to JavaScript.

RiotControl is inspired by Facebook's Flux Architecture Pattern and it's a simple Central Event Controller/Dispatcher for Riot. It's extremely lightweight (like Riot itself) but unfortunately passes up on some features in favor of performance and simplicity.

RiotControl helps with storing the stater of the application, by passing events from views to stores and vice-versa. Stores can communicate with many views and views can do the same with many stores, this enables to clearly separate concerns and inter-component communication.

Since every single UI component is created independently in JavaScript, it becomes very easy to reuse them throughout your app without having to re-write them.

React is built by Facebook engineers initially to be used only for their inner projects especially to solve the problem of building large complex applications with constantly changing data.

React can render it's components and data server side, then it sends those components as HTML to the browser.

This ensures faster initial loading time and SEO friendliness out of the box, since it's indexed as any other static website by search engines.

Instead of relying on the DOM, React implements a virtual DOM from scratch, allowing it to calculate precisely what needs to be patched during the next screen refresh. This is orders of magnitude faster than fiddling with the DOM itself.

React's one-way data binding (or one-way data flow) means that it's easy to see where and how your UI is updated and where you need to make changes. It's also very easy to keep everything modular, fast and well-organized.

ReactJS can be used independently as the only library for building the front-end, or it can be used alongside JavaScript libraries such as jQuery, or even Angular.

React provides a template engine (JSX) which is easy to use. But it's not mandatory.

The framework is widely used in the industry.

Since React's virtual DOM system is implemented completely in JavaScript, it's very easy to write UI test cases.

React has an official Chrome Extension which is used as a developing and debugging tool. It can be used to quickly and painlessly debug your application or view the whole application structure as it's rendered.

Flux is a platform agnostic pattern which can technically be used with any application or programming language.

One of Flux' main features is that it enforces uni-directional data flow which means that views do not change the data directly.

With React this is useful because this way it's easier to understand an application as it starts getting more complicated. By having two-way data binding, lead to unpredictable changes, where changing one model's data would end up updating another model. By using the Flux architecture, this can be avoided.

Since React v0.15, SVG is fully supported. React supports all SVG attributes that are recognized by today's browsers.

React is just a view library, so you still have (almost) full control over how your app behaves.

Reagent, Om, Rum, etc.

React is used on one of the most visited websites on the planet, Facebook. With stellar results and with millions of people experiencing it every day.