Elm, the functional frontend

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
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
38. @sy_izumi