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
240
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
130
CodeMash 2020: Practical Functional Programming
jfairbank
1
300
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
320
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
160
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
100
All Things Open 2018: Practical Functional Programming
jfairbank
2
250
Connect.Tech 2018: Effective React Testing
jfairbank
1
130
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
800
Other Decks in Programming
See All in Programming
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
CSC509 Lecture 14
javiergs
PRO
0
140
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
180
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
270
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
670
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
Refactor your code - refactor yourself
xosofox
1
260
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
760
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
For a Future-Friendly Web
brad_frost
175
9.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Being A Developer After 40
akosma
87
590k
Automating Front-end Workflow
addyosmani
1366
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Building Applications with DynamoDB
mza
91
6.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
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