Elm Programming Language

Last weekend I found myself on a fun ride to explore a Elm, relatively new functional programming language. New kid on the block, eh! Before jumping in, make sure you understand a little bit about functional programming and front-end web development such as JavaScript and DOM. A super little bit of React might help.

Hello, Elm

Elm is a functional programming language which compiles into HTML and JavaScript. As a front-end developer myself, I've had my fair share dealing with JavaScript and HTML (not so much now though, JSX FTW!). With Elm, we can write HTML and JavaScript with functional style and make use of functional programming concepts such as immutability and composability. Elm was created by Evan Czaplicki on 2012 and get strong support from NoRedInk (they use Elm in production!).

Since I'm a new fan of functional programming, trying out functional programming that best suited for front-end development is my priority. Oh, and Redux (React's state management library) is the one that introduces me to Elm, since Redux borrows Elm's architecture in managing application state.

The first time I touch the code to write front-end codes, I had a mixed feeling about this. As someone who get used to JavaScript and HTML (plus JSX) style to write code, writing Elm code is a bit, well, awkward. But that's just me cause I rarely code functional programming languages. If you get used to write Haskell or Scala, writing Elm would feel so natural. But after writing few hundreds of Elm code, I realized the beauty of functional programming code. Lot at those beautifully arranged spaces and arrows!

Below are the code in Elm to show a "Hello World" on an HTML page:

import Html exposing (text)
main =
 text “Halo Dunia”

Looks simple, right? Here, we pick the text element from Html module by importing them. We can use various HTML elements to arrange layouts.

Below are a short comparison on a HTML snippet and Elm one to create a simple layout.


Basic To-do list UI with HTML


<div id="container">
  <h1>Todo List Sederhana dengan HTML</h1>
  <ul class="todo-list">
    <li>Belajar Elm</li>
    <li>Meeting dengan Budi</li>
    <li>Renovasi Rumah</li>
    <li>Service Mobil</li>
  </ul>
</div>

Basic To-do list UI with Elm

module Main exposing (..)

import Html exposing (Html, div, li, text, h1, ul)
import Html.Attributes exposing (class, id)


main : Html msg
main =
    div [ id "container" ]
        [ h1 [] [ text "Todo List Sederhana dengan Elm" ]
        , ul [ class "todo-list" ]
            [ li [] [ text "Belajar Elm" ]
            , li [] [ text "Meeting dengan Budi" ]
            , li [] [ text "Renovasi Rumah" ]
            , li [] [ text "Service Mobil" ]
            ]
        ]

To have a better understanding on writing simple app with Elm, we can obviously visit their nicely written documentation. The best way to learn is to dive head-first to our text editor and start our first line of Elm code!

Did I mention their beautiful error messages?

Elm Architecture

I mention before that Redux inspired and borrows the concept of Elm architecture. Elm architecture is a pattern which shows how the App written and constructed in Elm. The architecture encourages code modularity and reusability with the power of functional programming concept. Elm architecture consist of three components, which are:

  • Model: the one that stores application state,

  • Update: functions where state changes occurs,

  • View: functions to render app in a form of HTML.

Those three components in the architecture works as follows:

  • When a change of a state is going to be triggered, the Update will do the calculation or logic to modify the state. Since we're talking functional programming, there are no actual "state change". All state are immutable, and any changes means a new version of the state. So what Update does here is to returns a new version of the state to be passed on to Model.

  • Model then will store the latest state of the app

  • then the View will render the HTML with the latest representation of the application state to the UI.

The user of our application who interacts with the View can do actions that will trigger or invoke the Update. For example, when a user types on a text field, an Update will be triggered in a form of action with message and will occur a state change to the model. Once the model has been updated, the UI in the View that corresponds to the new state will be rerendered.

So that's all about Elm, if you'd like to start, jump over to their documentation, try Elm's own neat package manager to import and make use of various open-source library from the Elm community. Elm is a programming language with functional programming paradigm which I personally think is really interesting and will have great impact on front-end development. It is a small community, but I do believe Elm has a good potential.

So let's start learning Elm!