Elm, the functional frontend

F7d2aefb506d0ea0783c559df9865f25?s=47 Seiya IZUMI
November 10, 2019

Elm, the functional frontend

F7d2aefb506d0ea0783c559df9865f25?s=128

Seiya IZUMI

November 10, 2019
Tweet

Transcript

  1. Elm, the functional frontend Seiya Izumi (@sy_izumi)

  2. Seiya Izumi (@sy_izumi) Software Engineer at Unipos

  3. Recent work • Talked at elm Europe 2019 • Organized

    elm Meetup 2019 in Japan
  4. What is Elm?

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

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

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

    List.head numbers multiplied = first * 2 Here raises a compile error
  8. 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
  9. 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
  10. Nice error message

  11. 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
  12. Meanwhile in TypeScript...

  13. Port (JavaScript interoperability) Elm JavaScript Subscribe Send

  14. 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} /> }
  15. Why functional programming on frontend?

  16. Frontend is full of side-effect • DOM rendering • Web

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

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

    Emitter Subscribe Emit Event Emitter Event Emitter Subscribe Emit Subscribe Subscribe Emit Subscribe Subscribe
  19. Predictability: Flux architecture “MVC Does Not Scale, Use Flux Instead”

    by Jing Chen, Facebook
  20. Referential Transparency and Predictability Function Function Function

  21. The Elm Architecture Model View Update Msg

  22. Gotcha: Frontend is a function! Application User Interaction Web API

    Timer DOM
  23. Real world usage

  24. None
  25. 50k LOC 2+ years 7+ frontend engineeers

  26. No hustling in tools

  27. TEA as a railway

  28. States are predictable “How to fix a bad interface” by

    Scott Hurf
  29. 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 _ -> …
  30. Maintainability keeping productivity Making a massive, aggressive changes everyday!

  31. Benefits we got • Predictable, maintainable codebase • Lower communication

    cost • Aggressive, fearless change
  32. Further resources

  33. https://speakerdeck.com/izumisy/elmfalsebu-kifang-2019

  34. Elm-jp Discord

  35. Elmlang Slack

  36. JSConf 2019

  37. None
  38. @sy_izumi