Advanced Web Front-ends: Elm

Functional state management of web front-ends through Elm

Introduction
Front-ends and state management

Functional programming with Elm

Examples, Setup & Installation
Data types
Basics
Functions
Modules
Elm Architecture
Fetching data

Advanced Web Front-ends

COMP.CS.520, Spring 2023

Topic: An introduction to functional state management of web front-ends through Elm

Timo Nummenmaa

Prosper Evergreen, Janne Miilunpalo, Pia Niemelä, Jaakko Rajala

Front-end state management?

With modern web applications, it is common for the application state to be held by the front-end application.
However, handling the state is a complex matter and one of the major problems when developing the front-end. More on this viewpoint.

Front-end state management? continued

Many libraries and frameworks have rudimentary state management features with somewhat limited capabilities in handling global state.
These state management features are often enhanced through the use of libraries: e.g. Redux for React and VueX/Pinia for Vue.

Why? What is the issue?

The issue stems from complexity, inconsistency, unpredictability and issues with state placement.

Redux and VueX

These are popular solutions to the problem and try to help in the creation of consistently performing applications with centralized and transparent state management features.

It happens that these libraries take inspiration from Elm, so we will start from there before moving to more popular approaches. It is also recommended by the Redux site to check Elm out!

What is Elm?

Elm is a functional programming language designed by Evan Czaplicki in 2012. Elm focuses on building reactive frontend applications as it compiles to JavaScript. However, Elm can also be used for games, embedded applications etc. Elm is a strong and static typed language that takes advantages of both functional and reactive programming. Learn more.

Elm core features

Pure functions
Immutability
Static and strong types
Type inference
Module system
Interoperability with HTML, CSS, and JavaScript

Why use Elm?

No Runtime Exceptions
Developer Friendly Error Messages
Easy to Test
Automatic Semantic Versioning
No side effects
Time-traveling debugger
Reusable Code
Super fast rendering
"I used Elm in production and it cost me my job"

The Elm Architecture

Model-View-Update

Model = store the state
View = turn state to HTML
Update = update the state based on messages
Unidirectional dataflow (data flows in one direction)

Purely Functional programming

Declarative
Construct programs by applying and composing pure functions

Return identical values for identical inputs
No side effects

Functional language

There are benefits of the functional style of programming; as a pure functional language elm can (according to elm) provide:

No runtime errors.
Friendly error messages.
Reliable refactoring.
Automatically enforced semantic versioning for all Elm packages.

Side effects in Elm

Ask the elm runtime to do something (e.g., send data to a remote server).
Get notified when something happens (e.g., listen to a socket)

Examples, Setup & Installation

### Compile Elm Project

```bash [1-4|6-7|9-10|12-18|20-22|24-25|27-29]
                    # Mac and Linux
                    $ cd ~/Desktop
                    # Windows (but with <username> filled in with your user name)
                    $ cd C:\Users\<username>\Desktop

# start an Elm project
                    $ elm init

# build Elm projects
                    $ elm reactor

# elm Make: compile Elm code to HTML or JavaScript
                    # Create an index.html file that you can open in your browser.
                    $ elm make src/Main.elm

# Create an optimized JS file 
                    # to embed in a custom HTML document.
                    $ elm make src/Main.elm --optimize --output=elm.js

# install elm packages from package.elm-lang.org. Example:
                    $ elm install elm/http
                    $ elm install elm/json

# elm interactive CLI console
                    $ elm repl

# Get help with a full outline
                    $ elm --help
                    $ elm make --help
                    ```

### Embedding Elm

```html []
                    <!DOCTYPE html>
                    <html>
                        <head>
                            <title>Elm</title>
                        </head>

### Tutorial

- It is highly recommended to check out the official guide.
                    - It acts also like a tutorial https://guide.elm-lang.org

### Book

You may get additional help from the book https://elmprogramming.com

### Examples for reference
                - We will go through some basics of the language itself

### Basic Data Types

![Basic data format](./img/elm-constant.jpg)

- Bool
                - Number : Int & Float
                - Char
                - String

### Basic types : Booleans

```elm[]
                > 5 > 3
                True : Bool
                > 10 == 1
                False : Bool
                > 5 /= 5
                False : Bool
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/Basics#Bool" target="elm-bool" rel="noopener noreferrer">Bool</a>

### Basic types: Number (Integer & Float)

```elm
                > 5
                5 : number
                > 2.5
                2.5 : Float
                > 5 + 2
                7 : number
                > 3 / 2
                1.5 : Float
                > 7 // 2
                3 : Int
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/Basics#Int" target="elm-int" rel="noopener noreferrer">Int</a> and <a href="https://package.elm-lang.org/packages/elm/core/latest/Basics#Float" target="elm-float" rel="noopener noreferrer">Float</a>

### Basic types: Characters

```elm []
                > 'a'
                'a' : Char
                > 'Z'
                'Z' : Char
                > '1'
                '1' : Char
                > '@'
                '@' : Char
                > '"'
                '"' : Char
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/Char" target="elm-char" rel="noopener noreferrer">Char</a>

### Basic type : String

```elm []
                > "Hello World"
                "Hello World" : String
                > "Hello" ++ " " ++ "World"
                "Hello World" : String
                > "'"
                "'" : String
                > "012"
                "012" : String
                > "@"
                "@" : String
                > ""
                "" : String
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/String" target="elm-string" rel="noopener noreferrer">String</a>

<a href="https://elm-lang.org/examples/hello" target="elm-playground" rel="noopener noreferrer">Practice playground</a>

### Structured Data Types

- List
                - Array
                - Set
                - Tuple
                - Record

### Structured type : List

```elm
                > [1,2,3]
                [1,2,3] : List number
                > ['a','b','c']
                ['a','b','c'] : List Char
                > ["a","b","c"]
                ["a","b","c"] : List String
                > ["a","ab","abc"]
                ["a","ab","abc"] : List String
                > List.length [1,2,3]
                3 : Int
                > 1 :: [2,3]
                [1,2,3] : List number
                > [1,2] ++ [3,4]
                [1,2,3,4] : List number
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/List" target="elm-list" rel="noopener noreferrer">List</a>

### Structured type : Array

```elm []
                import Array exposing (Array)
                > Array.fromList [1,2,3]
                Array.fromList [1,2,3] : Array number
                > Array.fromList ["a","b","b"]
                Array.fromList ["a","b","b"] : Array String
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/Array" target="elm-array" rel="noopener noreferrer">Array</a>

### Structured type : Set

```elm [1|2-3|4-5|6-7|8-9]
                > import Set exposing (Set)
                > Set.singleton 1
                Set.fromList [1] : Set number
                > Set.fromList [1,2,1,3,1,4]
                Set.fromList [1,2,3,4] : Set number
                > Set.fromList [1,2,3,4]
                Set.fromList [1,2,3,4] : Set number
                > Set.fromList ['a', 'b', 'c', 'c']
                Set.fromList ['a','b','c'] : Set Char
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/Set" target="elm-set" rel="noopener noreferrer">Set</a>

### Structured type : Tuple

```elm []
                > (1, 2)
                (1,2) : ( number, number1 )
                > (1, "a")
                (1,"a") : ( number, String )
                > ('a', "a")
                ('a',"a") : ( Char, String )
                > (1, ["a","b","c"])
                (1,["a","b","c"]) : ( number, List String )
                ```

More on <a href="https://package.elm-lang.org/packages/elm/core/latest/Tuple" target="elm-tuple" rel="noopener noreferrer">Tuple</a>

### Structured type : Dictionary

```elm [1|2-4|5-7|8-10|11-12]
                > import Dict exposing (Dict)
                > Dict.singleton 'a' 1
                Dict.fromList [('a',1)]
                    : Dict Char number
                > Dict.fromList [('a',1),('b',2),('c',3)]
                Dict.fromList [('a',1),('b',2),('c',3)]
                    : Dict Char number
                > d = Dict.fromList [('a',1),('a',2),('b',2),('a',3),('c',3),('c',1)]
                Dict.fromList [('a',3),('b',2),('c',1)]
                    : Dict Char number
                > Dict.get 'a' d
                    Just 3 : Maybe number    
                ```
                More on <a href="https://package.elm-lang.org/packages/elm/core/latest/Dict" target="elm-dict" rel="noopener noreferrer">Dict</a>

### Structured type : Record

```elm [1-3|4-6|7-9|10-11]
                > { x = 10, y = 0 , z = -29 }
                { x = 10, y = 0 , z = -29 }
                    : { x : number, y : number1, z : number2 }
                > { name = "John", surname = "Doe" , age = 24 }
                { age = 24, name = "John", surname = "Doe" }
                    : { age : number, name : String, surname : String }
                > {average = 10, numbers = [0,5,10,15,20]}
                { average = 10, numbers = [0,5,10,15,20] }
                    : { average : number, numbers : List number1 }
                > .name { age = 24, name = "John", surname = "Doe" }
                "John" : String
                ```

More on <a href="https://elm-lang.org/docs/records" target="elm-dict" rel="noopener noreferrer">Records</a>

<a href="https://elm-lang.org/examples/hello" target="elm-playground" rel="noopener noreferrer">Practice playground</a>

### Custom Data Types

```elm []
                type alias Name = String
                -- Union Type
                type Color = Yellow | Blue | Green
                -- Type with payload or assiociate data
                type Person = Person String String Int
                -- Type constructor & data constructor
                type Data a = Input a | None
                -- Recurcive type
                type MyTree a = Empty | Node a (MyTree a)
                -- Type alias
                type alias Person = { name: String, surname: String age: Int }
                ```

More on <a href="https://guide.elm-lang.org/types/custom_types.html" target="elm-types" rel="noopener noreferrer">Custom Types</a>
                And <a href="https://guide.elm-lang.org/types/type_aliases.html" target="elm-aliases" rel="noopener noreferrer">Type Aliases</a>

<a href="https://elm-lang.org/examples/hello" target="elm-playground" rel="noopener noreferrer">Practice playground</a>

## Basics

- constant
                - let-in
                - if-else
                - case-of

### constant

```elm []
                > a = 11
                11 : number
                > b = 10
                10 : number
                > a + b
                21 : number
                > c = a + b - 2
                19 : number
                > c
                19 : number
                > person = {name="John", surname="Doe", age=24}
                { age = 24, name = "John", surname = "Doe" }
                    : { age : number, name : String, surname : String }
                > person.name
                "John" : String
                > person.age
                24 : number
                ```

### let-in

```elm []
                > height = 10
                10 : number
                > width = 5
                5 : number
                > length = 4
                4 : number
                > volume =
                |   let area = width * length
                |   in area * height
                |
                200 : number
                ```

### if-else

```elm []
                > num = 2
                2 : number
                > if num // 2 == 0 then 5 else 0
                0 : number
                > name = "John"
                "John" : String
                > surname = if name == "John" then "Doe" else "Paul"
                "Doe" : String
                ```

### case-of

```elm []
                > person = {name="John", surname="Doe", age=24}
                { age = 24, name = "John", surname = "Doe" }
                    : { age : number, name : String, surname : String }
                > personIsPaul =
                |   case person.name of
                |   "Paul" -> True
                |   _ -> False
                |
                False : Bool
                > personIsPaul
                False : Bool
                ```

<a href="https://elm-lang.org/examples/hello" target="elm-playground" rel="noopener noreferrer">Practice playground</a>

### Functions

![function type declaration](./img/function-type.png)
                
                - Functions are
                  - Curried
                  - Partially applicable
                  - [more on currying here](https://www.codingexercises.com/guides/quickstart-elm-part-7)

### Functions

```elm []
                sayHello : String -> String
                sayHello name = "Hello " ++ name

-- JavaScript
                -- const sayHello = (name) => "Hello " ++ name

sayHello "John"
                "Hello John" : String

-- JavaScript
                -- sayHello("John")

multiply : number -> number -> number
                multiply num1 num2 = num1 * num2

-- JavaScript
                -- const multiply = (num1) => (num2) => num1 * num2

multiply 5 2
                10 : number

-- JavaScript
                -- multiply(5)(2)

-- partial application
                multiByFive : number -> number
                multiByFive = multiply 5

-- JavaScript
                -- const multiByFive = multiply(5)

multiByFive 2
                -- 10 : number

-- Function as parameter
                calc : (number -> number -> number) -> number -> number -> number
                calc op num1 num2 = op num1 num2
                calc (+) 3 4
                -- 7 : number
                ```

<a href="https://elm-lang.org/examples/hello" target="elm-playground" rel="noopener noreferrer">Practice playground</a>

### [The Elm Architecture](https://guide.elm-lang.org/architecture/)

![Elm Architecture](./img/elm-architecture.jpg)

Model-View-Update (MVU): [a good description here](https://elmprogramming.com/model-view-update-part-1.html)

### Model

```elm []
                -- MODEL

type alias Model = { counts : Int }

init : Model
                init = { counts = 0 }

```

Represents the state of an application

### [render HTML](https://package.elm-lang.org/packages/elm/html/latest/)

```elm []
                import html exposing (..)
                import Html.Attributes exposing (class, id, style)

-- HTMLElement : List (Attribute msg) -> List (Html msg) -> Html msg

div [class "bg-danger", id "my-container", style "color" "red"] [text "Hello World"]

{-
                    <div class="bd-danger" id="my-container"
                    style="color: red;">Hello World</div>
                -}

div [] [
                    h1 [] [ text "Header 1"],
                    p [] [ text "Paragraph"],
                    div [] [text "A div"],
                ]

{-
                    <div>
                        <h1>Header 1</h1>
                        <p>Paragraph</p>
                        <div>A div</div>
                    </div>
                -}
                ```

### View

```elm []
                import html exposing (..)
                import Html.Events exposing (onClick)

-- VIEW

view : Model -> Html Msg
                view model =
                    div []
                        [ button [ onClick Decrement ] [ text "-" ]
                        , div [] [ text (String.fromInt model.counts) ]
                        , button [ onClick Increment ] [ text "+" ]
                        ]

```

Generates the user interface e.g in HTML format

### Update

```elm []
                -- UPDATE

type Msg = Increment | Decrement

update : Msg -> Model -> Model
                update msg model =
                  case msg of
                    Increment ->
                      model + 1
                    Decrement ->
                      model - 1

```
                Handles events from UI and updates the state

<a href="https://elm-lang.org/examples/buttons" target="elm-playground" rel="noopener noreferrer">Practice playground</a>

### Fetching data from the internet
                The elm guide has an [example](https://guide.elm-lang.org/effects/http.html).

### Indicating loading
                - It is a good idea to indicate that something is loading, there is an error, etc.
                - We can accomplish this through our state

```elm []
                type Model
                  = Failure
                  | Loading
                  | Success String
                ```

### Model
                - The initial model + command
                - The command generates a HTTP request
                 - executed by the Elm runtime
                
                ```elm []
                
                init : () -> (Model, Cmd Msg)
                init _ =
                  ( Loading
                  , Http.get
                      { url = "https://elm-lang.org/assets/public-opinion.txt"
                      , expect = Http.expectString GotText
                      }
                  )

```

### Update
                - We produce Cmd Msg in addition to Model (what Elm should do = nothing right now)
                - The type Msg says that we need to turn the response into a GotText message

```elm []
                type Msg = GotText (Result Http.Error String)

update : Msg -> Model -> (Model, Cmd Msg)
                update msg model =
                  case msg of
                    GotText result ->
                      case result of
                        Ok fullText ->
                          (Success fullText, Cmd.none)

Err _ ->
                          (Failure, Cmd.none)
                ```

### Subscription
                - Subscribe to information in the Model
                 - We need to have this even if we don't subscribe

```elm []
                subscriptions : Model -> Sub Msg
                subscriptions model =
                  Sub.none
                ```

### View
                - Here we display the fullText on success

```elm []
                view : Model -> Html Msg
                view model =
                  case model of
                    Failure ->
                      text "I was unable to load your book."
                
                    Loading ->
                      text "Loading..."
                
                    Success fullText ->
                      pre [] [ text fullText ]
                ```

### Main
                - We need to include subscriptions in main

```elm []
                main =
                Browser.element
                  { init = init
                  , update = update
                  , subscriptions = subscriptions
                  , view = view
                  }              
                ```

<a href="https://elm-lang.org/examples/book" target="elm-playground" rel="noopener noreferrer">Practice playground</a>