Elm Logo

Elm is a pure functional programming language that compiles to JavaScript.

Elm is a a fully functional language.

Unlike Javascript, Elm is strongly typed (immutable data), requires less testing, is a unified language.

The good news is it compiles to Javascript. No runtime errors.

Inspired by Haskell.

It has all the good things from Python including its strict indentation.

Suitable for reactive programming.

Elm Architecture

You get started by writing a function called init. Its job is to generate the application initial Model.

Model is not a single entity in database (as it is used in other contexts: MVC, Ruby etc) but a complete model of the current state of UI. You write then the View which take the Model and renders it in Html.

View. Everytime there is a change it rerenders a complete change of a user interface into a Virtual DOM which later compares to the actual DOM and only reproduce the changes were made. Similar to React.

It listen to the events and whenever this event occurs it sends the program a message Msg

You write a function called Update that receive those messages. Then regenerate an updated Model. Which later renders a renewed DOM.

Union types

A natural way to shape data.

type Shape
    = Circle Float
    | Square Float
    -- Polygons have Int sides and Float length
    | Poly Int Float

Now we write the function to render

render : Shape -> String
render shape =
    case shape of
        Circle radius ->
          "circle"
         Square length ->
          "a square"
         Poly sides length
          "A poly"

First is declared the function render having its signature: It inputs a shape type (which is a custom type) and outputs a string. There is no way to cheat it, it will always output a string. The compiler will penalize.

Create a module

module myFileLoader exposing (load)

load : String -> String
load filename =
...

We use it via import

import myFileLoader as L

process = L.load "data.csv"

If you want to directly access the function load

import MyFileLoader exposing (load)

process = load "data.csv"

Drupal with Elm frontent?

Decoupled frontend using Elm (a React killer?). It is a compiled, strong typed language (which means no errors in the console ?!) similar to PureScript.

A succesful team heavily using elm as frontend for decoupling Drupal. Gizra is using this stack solution for at least 4 years: Drupal. Elm and Yesod (Framework on Elm).

So, What is the Advantage?

Forget about that big pile of things: react, jsx, transpiler for jsx, webpack, grunt or whatever module bundler, elm-reactor has one way to create/test components easily.

Elm is one unified, language that compile to Javascript. It is asynchronously and strongly typed.

Elm has a library called elm-html that a programmer can use to write HTML and CSS within Elm. React replacement. It is a unified HTML JS CSS all withing the same context. All are function. Functions are easily testable.

You can try it online.