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
260
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
210
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
160
CodeMash 2020: Practical Functional Programming
jfairbank
1
330
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
360
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
180
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
130
All Things Open 2018: Practical Functional Programming
jfairbank
2
270
Connect.Tech 2018: Effective React Testing
jfairbank
1
170
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
860
Other Decks in Programming
See All in Programming
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.7k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
590
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
760
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
110
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.9k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
420
CSC509 Lecture 01
javiergs
PRO
1
430
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
It's Worth the Effort
3n
187
28k
Balancing Empowerment & Direction
lara
4
680
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Embracing the Ebb and Flow
colly
88
4.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Gamification - CAS2011
davidbonilla
81
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
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