Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elm, the functional frontend

Elm, the functional frontend

Seiya IZUMI

November 10, 2019
Tweet

More Decks by Seiya IZUMI

Other Decks in Programming

Transcript

  1. Key features • Typed, functional AltJS • No runtime error

    • Nice error message • Everything is immutable
  2. No runtime error numbers = [1, 2, 3] first =

    List.head numbers multiplied = first * 2
  3. No runtime error numbers = [1, 2, 3] first =

    List.head numbers multiplied = first * 2 Here raises a compile error
  4. No runtime error numbers = [1, 2, 3] first =

    numbers |> List.head |> Maybe.withDefault 0 multiplied = first * 2 Now, Maybe was unwrapped into Int with a default value
  5. Builtin types String, Int, Bool, Seq, Dict, List, … type

    Maybe a = Just a | Nothing type Result a b = Ok a | Err b type Task x a
  6. Nice error message Syntax errors are highly concentrated in the

    first weeks with a language, and people are particularly vulnerable in this time. When a beginner asks themselves why something is hard, it is easy to think, "Because I am bad at it!" And it is easy to spiral from there. “The Syntax Cliff” by Evan Czaplicki
  7. Elm on React cultureamp/react-elm-components import Elm from 'react-elm-components' import {

    Todo } from '../dist/elm/todomvc.js' function render() { return <Elm src={Todo} /> }
  8. Frontend is full of side-effect • DOM rendering • Web

    API • Browser API • Timer and more...
  9. Frontend is full of side-effect • DOM rendering • Web

    API • Browser API • Timer and more... Predictability is a key
  10. Typical “Event Emitter” Hell Component Component Component Component Component Event

    Emitter Subscribe Emit Event Emitter Event Emitter Subscribe Emit Subscribe Subscribe Emit Subscribe Subscribe
  11. States are predictable type State = Blank | Loading Progress

    | Partial Partial.Model | Error Error.Model | Ideal Ideal.Model view : State -> Html msg view state = case state of Blank -> … Loading _ -> … Partial _ -> … Error _ -> … Ideal _ -> …