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
180
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
130
CodeMash 2020: Practical Functional Programming
jfairbank
1
290
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
310
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
160
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
93
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
780
Other Decks in Programming
See All in Programming
2024 컴포즈 정원사
jisungbin
0
150
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
190
Some more adventure of Happy Eyeballs
coe401_
2
190
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
マルチモジュールにおけるテスト最適化
fxwx23
0
210
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
800
Kotlin 2.0 and Beyond
antonarhipov
2
150
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Statistics for Hackers
jakevdp
794
220k
Adopting Sorbet at Scale
ufuk
73
8.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
What the flash - Photography Introduction
edds
67
11k
A Philosophy of Restraint
colly
202
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Teambox: Starting and Learning
jrom
131
8.7k
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