Elm, the functional frontend
Seiya Izumi (@sy_izumi)
Slide 2
Slide 2 text
Seiya Izumi
(@sy_izumi)
Software Engineer at Unipos
Slide 3
Slide 3 text
Recent work
● Talked at elm Europe 2019
● Organized elm Meetup 2019 in Japan
Slide 4
Slide 4 text
What is Elm?
Slide 5
Slide 5 text
Key features
● Typed, functional AltJS
● No runtime error
● Nice error message
● Everything is immutable
Slide 6
Slide 6 text
No runtime error
numbers =
[1, 2, 3]
first =
List.head numbers
multiplied
= first * 2
Slide 7
Slide 7 text
No runtime error
numbers =
[1, 2, 3]
first =
List.head numbers
multiplied
= first * 2
Here raises a compile error
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Nice error message
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Meanwhile in TypeScript...
Slide 13
Slide 13 text
Port (JavaScript interoperability)
Elm JavaScript
Subscribe
Send
Slide 14
Slide 14 text
Elm on React
cultureamp/react-elm-components
import Elm from 'react-elm-components'
import { Todo } from '../dist/elm/todomvc.js'
function render() {
return
}
Slide 15
Slide 15 text
Why functional programming
on frontend?
Slide 16
Slide 16 text
Frontend is full of side-effect
● DOM rendering
● Web API
● Browser API
● Timer
and more...
Slide 17
Slide 17 text
Frontend is full of side-effect
● DOM rendering
● Web API
● Browser API
● Timer
and more...
Predictability is a key
Predictability: Flux architecture
“MVC Does Not Scale, Use Flux Instead” by Jing Chen, Facebook
Slide 20
Slide 20 text
Referential Transparency and Predictability
Function Function Function
Slide 21
Slide 21 text
The Elm Architecture
Model View
Update
Msg
Slide 22
Slide 22 text
Gotcha: Frontend is a function!
Application
User Interaction
Web API
Timer
DOM
Slide 23
Slide 23 text
Real world usage
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
50k LOC
2+ years
7+ frontend engineeers
Slide 26
Slide 26 text
No hustling in tools
Slide 27
Slide 27 text
TEA as a railway
Slide 28
Slide 28 text
States are predictable
“How to fix a bad interface” by Scott Hurf
Slide 29
Slide 29 text
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 _ ->
…
Slide 30
Slide 30 text
Maintainability keeping productivity
Making a massive, aggressive
changes everyday!
Slide 31
Slide 31 text
Benefits we got
● Predictable, maintainable codebase
● Lower communication cost
● Aggressive, fearless change