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
94
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
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
290
2024-10-01 dev2next - Observability for Modern JVM Applications
jonatan_ivanov
0
110
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
300
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
120
"noncopyable types" の使いどころについて考えてみた
andpad
0
150
pytest プラグインを開発して DRY に自動テストを書こう
inuatsu
2
260
Subclassing, Composition, Python, and You
hynek
3
160
フロントエンドの現在地とこれから
koba04
10
4.5k
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
130
利用者視点で考える、イテレータとの上手な付き合い方
syumai
4
230
メルカリ ハロ アプリの技術スタック
atsumo
2
760
個人開発で使ってるやつを紹介する回
yohfee
1
700
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
A better future with KSS
kneath
237
17k
In The Pink: A Labor of Love
frogandcode
139
22k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Code Review Best Practice
trishagee
62
16k
Done Done
chrislema
181
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Raft: Consensus for Rubyists
vanstee
136
6.6k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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