1. State management
2. Code organization
3. Data type guarantees
4. Null and undefined
5. JSON data contracts
6. Error handling
7. Primitive obsession
Resiliency Problems
Slide 20
Slide 20 text
1. State management
2. Code organization
3. Data type guarantees
4. Null and undefined
5. JSON data contracts
6. Error handling
7. Primitive obsession
Resiliency Problems
Slide 21
Slide 21 text
1. State management
2. Code organization
3. Data type guarantees
4. Null and undefined
5. JSON data contracts
6. Error handling
7. Primitive obsession
Resiliency Problems
Slide 22
Slide 22 text
1. State management
2. Code organization
3. Data type guarantees
4. Null and undefined
5. JSON data contracts
6. Error handling
7. Primitive obsession
Resiliency Problems
Slide 23
Slide 23 text
1. State management
2. Code organization
3. Data type guarantees
4. Null and undefined
5. JSON data contracts
6. Error handling
7. Primitive obsession
Resiliency Problems
Slide 24
Slide 24 text
1. State management
2. Code organization
3. Data type guarantees
4. Null and undefined
5. JSON data contracts
6. Error handling
7. Primitive obsession
Resiliency Problems
Slide 25
Slide 25 text
1. State management
2. Code organization
3. Data type guarantees
4. Null and undefined
5. JSON data contracts
6. Error handling
7. Primitive obsession
Resiliency Problems
Slide 26
Slide 26 text
elm
Slide 27
Slide 27 text
Compiles to JavaScript
Slide 28
Slide 28 text
No runtime exceptions in
practice.
Slide 29
Slide 29 text
No undefined is not a
function
Slide 30
Slide 30 text
Back to our problems…
Slide 31
Slide 31 text
Update
View
Model
Messages
The Elm
Architecture
Slide 32
Slide 32 text
Application
State
Model
Slide 33
Slide 33 text
Model
Virtual
DOM
View
UI as a Function
Slide 34
Slide 34 text
Messages
Standardized
application events
Slide 35
Slide 35 text
elm
app
model
Slide 36
Slide 36 text
elm
app
model
Events
Text Input
Mouse Click
Associate message
with event
Slide 37
Slide 37 text
elm
app
model
Events
Text Input
Mouse Click
When event triggers (i.e.
user clicks), deliver
message
Slide 38
Slide 38 text
Update
Model
New
Model
Respond to messages and
create new state
Slide 39
Slide 39 text
model
Update View
Slide 40
Slide 40 text
model
Update View
Slide 41
Slide 41 text
model
Update View
VDOM
Slide 42
Slide 42 text
model
Update View
VDOM
Slide 43
Slide 43 text
model
Update View
Select red color
Slide 44
Slide 44 text
model
Update View
Select red color
Slide 45
Slide 45 text
model
Update View
Select red color
Slide 46
Slide 46 text
model
Update View
Slide 47
Slide 47 text
model
Update View
Slide 48
Slide 48 text
model
Update View
Slide 49
Slide 49 text
model
Update View
VDOM
Slide 50
Slide 50 text
model
Update View
VDOM
Slide 51
Slide 51 text
Demo
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
The Elm Architecture
1. State management
2. Code organization
Slide 54
Slide 54 text
The Elm Architecture
1. State management
2. Code organization
Static Types
3. Data type guarantees
Slide 55
Slide 55 text
The Elm Architecture
1. State management
2. Code organization
Static Types
3. Data type guarantees
Maybe
4. Null and undefined
Slide 56
Slide 56 text
The Elm Architecture
1. State management
2. Code organization
Static Types
3. Data type guarantees
Maybe
4. Null and undefined
JSON Decoders
5. JSON data contracts
Slide 57
Slide 57 text
The Elm Architecture
1. State management
2. Code organization
Static Types
3. Data type guarantees
Maybe
4. Null and undefined
JSON Decoders
5. JSON data contracts
Result
6. Error handling
Slide 58
Slide 58 text
The Elm Architecture
1. State management
2. Code organization
Static Types
3. Data type guarantees
Maybe
4. Null and undefined
JSON Decoders
5. JSON data contracts
Result
6. Error handling
Explicit State / Union Types
7. Primitive obsession
Slide 59
Slide 59 text
Thanks!
Jeremy Fairbank
@elpapapollo
Slides: bit.ly/resilient-elm-codestock
Code: bit.ly/resilient-elm-code-codestock
Book: bit.ly/programming-elm