Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Codestock 2018: Building a Resilient, API-drive...
Search
Jeremy Fairbank
April 20, 2018
Programming
0
250
Codestock 2018: Building a Resilient, API-driven Front-End with Elm
Jeremy Fairbank
April 20, 2018
Tweet
Share
More Decks by Jeremy Fairbank
See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
jfairbank
1
190
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
140
CodeMash 2020: Practical Functional Programming
jfairbank
1
310
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
340
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
170
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
120
All Things Open 2018: Practical Functional Programming
jfairbank
2
260
Connect.Tech 2018: Effective React Testing
jfairbank
1
150
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
830
Other Decks in Programming
See All in Programming
Vibe Coding の話をしよう
schroneko
2
830
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
490
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
150
Do Dumb Things
mitsuhiko
0
440
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
API for docs
soutaro
2
1.3k
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
830
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
Sharing features among Android applications: experience feedback
jbvincey
0
110
VitestのIn-Source Testingが便利
taro28
6
1.8k
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
140
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.4k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
750
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing for humans not robots
tammielis
252
25k
GitHub's CSS Performance
jonrohan
1030
460k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Transcript
Building a Resilient, API-driven Front-End with Elm Jeremy Fairbank @elpapapollo
@testdouble helps improves how the world build software. testdouble.com/agency
In beta now! bit.ly/programming-elm
const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`)
.then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`)
.then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`)
.then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
fetchAlbum('blue train') .then(printAlbum) // undefined by John Coltrane
fetchAlbum('blue train') .then(printAlbum) // undefined by John Coltrane
{ "title": "Blue Train", "artists": ["John Coltrane"] } const printAlbum
= ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
{ "title": "Blue Train", "artists": ["John Coltrane"] } const printAlbum
= ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
const printAlbum = ({ title, artists }) => console.log(`${title} by
${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
const printAlbum = ({ title, artists }) => console.log(`${title} by
${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
const printAlbum = ({ title, artists }) => console.log(`${title} by
${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
fetchAlbum('blue trane') .then(printAlbum)
fetchAlbum('blue trane') .then(printAlbum)
fetchAlbum('blue trane') .then(printAlbum)
fetchAlbum('blue trane') .then(printAlbum) .catch(e => console.error(e))
None
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
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
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
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
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
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
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
elm
Compiles to JavaScript
No runtime exceptions in practice.
No undefined is not a function
Back to our problems…
Update View Model Messages The Elm Architecture
Application State Model
Model Virtual DOM View UI as a Function
Messages Standardized application events
elm app model
elm app model Events Text Input Mouse Click Associate message
with event
elm app model Events Text Input Mouse Click When event
triggers (i.e. user clicks), deliver message
Update Model New Model Respond to messages and create new
state
model Update View
model Update View
model Update View VDOM
model Update View VDOM
model Update View Select red color
model Update View Select red color
model Update View Select red color
model Update View
model Update View
model Update View
model Update View VDOM
model Update View VDOM
Demo
None
The Elm Architecture 1. State management 2. Code organization
The Elm Architecture 1. State management 2. Code organization Static
Types 3. Data type guarantees
The Elm Architecture 1. State management 2. Code organization Static
Types 3. Data type guarantees Maybe 4. Null and undefined
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
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
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
Thanks! Jeremy Fairbank @elpapapollo Slides: bit.ly/resilient-elm-codestock Code: bit.ly/resilient-elm-code-codestock Book: bit.ly/programming-elm