Slaying UI Anti-patterns with Elm

About me

Martin McKeaveney

- Software Engineer @Rapid7

- https://github.com/mmckeaveney

Agenda

• The modern Front End Stack

• What is Elm?

• Mutable, Global State

• Imperative Logic

• Runtime errors and Unsafe APIs

• Elm and the DOM

• Tooling and architecture

• Demo

Javascript Today

• Huge numbers of tools, frameworks and libraries
• Ubiquitous
• Popular across the full stack
• Moving at a ridiculous pace

• Javascript Fatigue?
• Different paradigms
• Applications getting bigger
• More logic moving to the client

• No runtime errors in practice. No null. No undefined is not a function.

• Friendly error messages that help you add features more quickly.

• Well-architected code that stays well-architected as your app grows.

• Automatically enforced semantic versioning for all Elm packages.

bill = { name = "Bill", age = 1 }

birthday person = { person | age = person.age + 1 }

birthday bill 
-- { name = "Bill", age = 2 } : { name : String, age : number }
birthday bill 
-- { name = "Bill", age = 2 } : { name : String, age : number }
birthday bill 
-- { name = "Bill", age = 2 } : { name : String, age : number }
birthday bill 
-- { name = "Bill", age = 2 } : { name : String, age : number }
birthday bill 
-- { name = "Bill", age = 2 } : { name : String, age : number }

getProfile username =
  let
    url =
      "https://api.github.com/users/" ++ username

    request =
      Http.get url userDecoder
  in
    Http.send LoadUser request

const getProfile = (username) => 
    fetch(`https://api.github.com/users/${username}`)
      .then(res => res.json())
      .then(console.log);

const request = require("request")

const comicsSeriesWithHero = (heroId) => 
    request(`${MARVEL_BASE_URL}/characters/${heroId}`,
        (error, response, body) => {
        try {
            if (!error && body) {
                JSON.parse(body).data.results.forEach(({ id, title, description }) => 
                    allComicStories.push({ id, title, description }));
                    numberOfHeroRequests++;
                    if (numberOfHeroRequests == numHeroes) {
                        findIntersection();
                    }
            } else {
                console.error(error);
            }
        } catch (e) {
            console.error(e);
        }
    }); 

Currying

TLDR; - Don't evaluate a function until all arguments are passed

const address = (number, street, city) => {
 
  console.log(`Your address is ${number} ${street}, ${city}`);
}

address("4", "sesame street");

// Your address is 4 sesame street, undefined

address number street city = 
    "Your address is " ++ number ++ " " ++ street ++ "," ++ city

address "6" "sesame street"

-- returns a Function that takes a city

address "6" "sesame street" "Belfast"

-- Your address is 6 sesame street, Belfast

Currying

findUser dbUrl userId = 
    Decode.list (userDecoder)
        |> Http.get dbUrl ++ userId
        |> Http.send UpdateUser


findUserMongo = findUser "http://urltomongodb"
-- Returns a function that takes a userId

findUserMongo 1 
-- Returns the user from mongoDB with the id of 1


add x y = x + y

addOneTo = add 1

-- Returns a function that takes another int

addOneTo 10 -- All arguments now passed, evaluates to 11

Piping / Forward Function Application

-- These are equivalent

viewNames names =
  String.join ", " (List.sort names)


betterViewNames names =
  names
    |> List.sort
    |> String.join ", "


-- These are also equivalent

squareNumbersUnder10 nums = map ((^) 2) (filter (\n -> n < 10) nums)

squareNumbersUnder10 [90, 100, 4, 2] -- [16,4]


squareNumbersUnder10 nums =
    nums
    |> filter (\n -> n < 10)
    |> map ((^) 2)

squareNumbersUnder10 [90, 100, 4, 2] -- [16,4]

Safety & Strong Static Typing

Elms Type System

Records and Type Aliases

Union Types

Elm and the DOM

The Virtual DOM

• Faster Virtual DOM benchmarks than React
• Immutability and Purity allow this

Elm App Example

-- Read more about this program in the official Elm guide:
-- https://guide.elm-lang.org/architecture/user_input/buttons.html

import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)


main =
  beginnerProgram { model = 0, view = view, update = update }


view model =
  div [ class "app-container" ]
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]


type Msg = Increment | Decrement


update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

Tooling and TEA (The Elm Architecture)

Tooling

Compiler/Bundler

REPL

Dev server

Package Manager

The Elm Architecture

 The logic of every Elm program will break up into three cleanly separated sections

• Model — the state of your application
• Update — a way to update your state
• View — a way to view your state as HTML

Thanks for listening!

Questions?

• https://www.elm-tutorial.org/en/
• https://ellie-app.com/
• http://elm-lang.org/blog/blazing-fast-html
• http://elm-lang.org/docs
• https://guide.elm-lang.org/