Mithril vs Riot

Most other frameworks either offer a huge API to deal with model and view synchronization, or defer to other libraries & plugins to cater for relatively simple use cases. Mithril's API is tiny but complete. The natural reaction is to assume something is missing, but as you build you realise you incredibly fast, powerful and rich applications can be built using nothing but Mithril.

Mithril's loading times are very fast. This is because it's templates are compiled first and then served to the browser and because it uses a virtual DOM. The virtual DOM is a virtual tree containing all the nodes of the real DOM, every time anything changes in the virtual DOM, Mithril does not re-render the entire (real) DOM, instead it just searches and applies the differences.

Most MVC frameworks use HTML templates to render their views. They are good and useful because they are easy to read and understand. But they add more complication to an app because it's practically a new language and syntax that needs to be learned.

Mithril argues that separating markup from logic is just a separation of technologies and not concerns, so you can write Mithril views in JavaScript. Writing them in JavaScript also makes it easier to debug them (HTML templates can't be debugged).

Doesn't lock you into any complicated conventions or structures, only one function is required to create either a Controller or a View. You're free to implement your architecture exactly as you want, so you can focus on the purpose of MVC, making connections between computer data and stuff in the end user's head.

Weights just 8Kb gzipped and has no dependencies. A reactive stream module can be added for one extra Kb.

Mithril has a large and expansive documentation despite it's relatively small API. Mithril's GitHub repo has more documentation than actual source code. None of that documentation is auto-generated

One thing you need to start using Mithril is just a DOM node. With Mithril a developer is able to introduce the library step by step.

Mithril gives to the developer the flexibility to chose the best JavaScript library to use for a specific task.
A huge framework like Angular instead forces you to use their API, which does not necessarily evolve as fast as the JavaScript ecosystem. Therefore you may end up in case when you are stuck using an API which is just not the best in terms of performance

It's plain old JavaScript, can be used without webpack, gulp or grunt, just include it into your HTML and start writing your app.

Mithril's API is pretty small compared to other frameworks. It forces developers to solve problems in JavaScript rather than in Mithril. Other frameworks with massive APIs force you to think in a way that suits the framework. Mithril doesn't do that.

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.