Elm or Suck-less front-end

4.2
(36)

Ok, so, I’m going to talk about Elm, but to understand what follows, there is
two things I might just tell you upfront:

Firstly, I really enjoy functional programming. When I’m not using Java for
school assessments (which I only use because I have to), I mostly use Haskell,
and I’m having a great time with it

Secondly, I’ve always be frustrated with Web front-end. HTML feels clumsy,
JavaScript allows so much in term of paradigms it does not even feel
consistent with itself, and CSS is such a pain for me to write that it does
not take long before I go back writing some terminal user interfaces.

Or at least it was like that until I stumbled upon Elm.

What is Elm

Elm is a functional language that compiles to JavaScript. It helps you make websites and web apps. It has a strong emphasis on simplicity and quality.

Elm Official Guide

And that’s pretty accurate, but I think we can go deeper.

How does it look

Like that:

module Main exposing (..)
-- This is a comment
-- Comments start with `--` and go the end of the line

-- Importing Web related stuff to be able to build something
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

-- Your basic elm program is a data model and 2 functions:
-- - A view function that takes your model in and sends back
--   some HTML and some messages the user can give back to the
--   program when they interract
-- - An update function that takes your model and some message
--   and updates the model accordingly
main =
    Browser.sandbox { init = 0, update = update, view = view }

-- This is the message type
type Msg = Increment | Decrement

-- The update function
update msg model =
    case msg of
    Increment ->
        model + 1
    Decrement ->
        model - 1

-- The view function
view model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , div [] [ text (String.fromInt model) ]
        , button [ onClick Increment ] [ text "+" ]
        ]

That is pretty legible to me, but there is a bit more to say about this:

  • This is only basic HTML and behavior, no styling, no responsiveness
  • Elm is statically typed, even if it is not obvious as most types are inferred by the compiler
  • The message type is something almost exclusive to statically typed functional programming languages: an algebraic type. One can understand it as a parametric Enum

The compiler

The elm compiler is a marvel when comes the time to debug your app.

Firstly, it produces the prettiest and the most helpful error messages
I’ve ever seen.

It can also detect typos, help you when you forgot to deal with optional types, forgot a field in a record, or mixed integers with floats, among others

In addition to that he compiler uses the properties of static types, immutable variables and pure functions to produce very efficient code that fits in the tiniest of space.

All that functional greatness also guarantees that if it compiles, it won’t crash, and most likely work.

elm-ui

All that compiler greatness is all well and good but that does not get rid of my frustration with HTML and CSS. This is when enters elm-ui.

elm-ui is a elm package (akin to NPM packages, but well, written in elm) that allows you to create your UI in plain elm using a functional and declarative style akin to the rest of your Elm application

So instead of messing with HTML and CSS to make a clean layout, you just throw in some elm-ui functions and you got yourself a clean interface with no headaches.

 module Main exposing (..)
 ​
 import Element exposing (Element, el, text, row, alignRight, fill, width, rgb255, spacing, centerY, padding)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 ​
 ​
 main = 
     Element.layout []
         myRowOfStuff
 ​
 myRowOfStuff : Element msg
 myRowOfStuff =
     row [ width fill, centerY, spacing 30 ]
         [ myElement
         , myElement
         , el [ alignRight ] myElement
         ]
 ​
 ​
 myElement : Element msg
 myElement =
     el
         [ Background.color (rgb255 240 0 245)
         , Font.color (rgb255 255 255 255)
         , Border.rounded 3
         , padding 30
         ]
         (text "stylish!")
 ​

Conclusion

That was a short overview of Elm. If you want to see more of it, I can’t recommend enough for you to checkout the Official Gide. There is also an online interpreter to make yourself an idea about it there.

Rate this post!

Average rating 4.2 / 5. Vote count: 36

No votes so far! Be the first to rate this post.