Strongly-typed front-end: experiment 2, simple application, in Elm
Contents
- Introduction
- Experiment 1, hex2rgb
- Experiment 2, simple application
(Heavily over-opinionated statement) Elm forces you to handle error scenarios when writing the code.
This is pretty much a translation of a TypeScript code from above:
module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text, input, select, option)
import Html.Attributes exposing (value)
import Html.Events exposing (onClick, onInput)
-- util
type Shape = Circle | Square
calculateArea : Shape -> Float -> Float
calculateArea shape value =
case shape of
Circle -> pi * value * value
Square -> value * value
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = { shape: Shape, value: Float, area: Float }
init : Model
init = { shape = "", value = 0, area = 0 }
-- UPDATE
type Msg
= ShapeChanged Shape
| ValueChanged Float
| CalculateArea
update : Msg -> Model -> Model
update msg model =
case msg of
ShapeChanged shape ->
{ model | shape = shape }
ValueChanged value ->
{ model | value = value }
CalculateArea ->
{ model | area = (calculateArea model.shape model.value) }
-- VIEW
onShapeChanged : String -> Msg
onShapeChanged shape =
case shape of
"circle" -> ShapeChanged Circle
"square" -> ShapeChanged Square
onValueChanged : String -> Msg
onValueChanged value = ValueChanged (Maybe.withDefault 0 (String.toFloat value))
view : Model -> Html Msg
view model =
div []
[ select [ onInput onShapeChanged ] [
option [ value "" ] [ text "Choose shape" ],
option [ value "circle" ] [ text "Circle" ],
option [ value "square" ] [ text "Square" ] ]
, input [ value (String.fromFloat model.value), onInput onValueChanged ] []
, button [ onClick CalculateArea ] [ text "Calculate area" ]
, div [] [ text ("Area: " ++ (String.fromFloat model.area)) ]
]Note that it won’t compile:
-- TYPE MISMATCH ----------------------------------------------- Jump To Problem
Something is off with the body of the `init` definition:
29| init = { shape = "", value = 0, area = 0 }
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The body is a record of type:
{ area : Float, shape : String, value : Float }
But the type annotation on `init` says it should be:
Model
