Elm vs Riot

Lack of run-time exceptions makes it easy to produce large swathes of reliable front-end code without drowning in tests.

ML static typing is great because it's always there, you just choose how explicit you want to be and how much you want the compiler to do.

In no other language you can refactor so easy without any worries, since the compiler will guide you through. It is like TDD but than compiler-error driven.

As Elm was designed as a front-end langauge, it has out of the box support for things like DOM-element creation, letting programmers focus on their application logic, rather than implementation details specific to the web.

You can try to apply some functional programming ideas in other languages that have an imperative basis, but you haven't seen the real power unless you tried it in the environment of purely functional programming. Elm is a simple language with great learning resources and easy graphical output, which makes it easy to explore the power of functional programming. Plus programming in Elm is very readable.

All major editors have great support. With Atom for example, Elm plugins are available for linting, formatting, make/compiler support and Elmjutsu will simply overflow you with super useful functions, like navigate to referenced definition and show expression type.

The Elm Architecture means you don't need to spend valuable time and effort choosing the right frameworks, state management libraries, or build tooling. It's all built in.

Elm uses easy to use modules.

Use:

import List
import List as L
import List exposing (..)
import List exposing ( map, foldl )
import Maybe exposing ( Maybe )
import Maybe exposing ( Maybe(..) )
import Maybe exposing ( Maybe(Just) )

Creation:

module MyModule exposing (foo, bar)

Easy to learn, most functions have only one way, not 5 alternatives where you must study where to best use what.

Support for hot swapping and interactive programming is included.

The lack of side-effects and simple, consistent language semantics make it easy to quickly review incoming changes.

Pure functions, immutable data structures, amazing compiler, clean and homologous syntax used for HTML, logic, and optionally to replace CSS, elimination of entire classes of bugs so you don't even need most unit tests. These factors lead to better code, better programs, higher confidence, and ultimately, more satisfaction.

Luckily you do not have to learn Haskell to be able to do any Elm. It is meant to be a language that compiles to Javascript, so for Javascript programmers (Front end) not for CS students who want to learn as many different algorithms as possible.

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.