Elm for Web App

• https://elm-lang.org

• Elm is a functional language that compiles to JavaScript.
• A delightful language for reliable webapps.
• No Runtime Exceptions - compile time type checking

Elm Quick Example

https://guide.elm-lang.org/architecture/buttons.html

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

-- MAIN

main =
  Browser.sandbox { init = 0, update = update, view = view }

-- MODEL

type alias Model = Int

init : Model
init =
  0

-- UPDATE

type Msg = Increment | Decrement

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

    Decrement ->
      model - 1

-- VIEW

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

Think ELM with Tcl

proc Elm.Browser.sandbox {init view update } {
   set model [$init]

   while 1 {
       let [$view $model]        => html
       let [@runtime $html]      => msg
       let [$update $msg $model] => model
   }
}

@declare proc init {} -> Model {
   return 0
}

@declare proc view {model:Model} -> {Html Msg} {
   return {
      <div> {} {
         <button> {onClick Decrement} [ text "-" ]
         <div> {} { text $model }
         <button> {onClick Increment} [ text "+" ]
      } </div>
   }
}

@declare proc update {msg:Msg model:Model} -> Model {
   match $msg {
       Increment -> { incr model +1 }
       Decrement -> { incr model -1 }
   }
   return $model
}

Elm with Tcl

proc Elm.Browser.sandbox {init view update } {
   set model [$init]

   while 1 {
       let [$view $model] => html
       @runtime $html [info coroutine]
       set msg [yield]                     ;# receive event
       let [$update $msg $model] => model
   }
}

Elm.Browser.element

proc Elm.Browser.element {init view update subscribe} {
   [$init flags] => model {Cmd msg}

   while 1 {
       [$view $model] => Html msg
       [$update $msg $model] => model {Cmd msg}
       [$subscription $model] => Sub msg
   }
}