Codestock 2018: Building a Resilient, API-driven Front-End with Elm

Transcript

1. Building a Resilient, API-driven Front-End with Elm Jeremy Fairbank @elpapapollo
2. @testdouble helps improves how the world build software. testdouble.com/agency
3. In beta now! bit.ly/programming-elm
4. const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`) .then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
5. const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`) .then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
6. const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`) .then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
7. fetchAlbum('blue train') .then(printAlbum) // undefined by John Coltrane
8. fetchAlbum('blue train') .then(printAlbum) // undefined by John Coltrane
9. { "title": "Blue Train", "artists": ["John Coltrane"] } const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
10. { "title": "Blue Train", "artists": ["John Coltrane"] } const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
11. const printAlbum = ({ title, artists }) => console.log(`${title} by ${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
12. const printAlbum = ({ title, artists }) => console.log(`${title} by ${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
13. const printAlbum = ({ title, artists }) => console.log(`${title} by ${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
14. fetchAlbum('blue trane') .then(printAlbum)
15. fetchAlbum('blue trane') .then(printAlbum)
16. fetchAlbum('blue trane') .then(printAlbum)
17. fetchAlbum('blue trane') .then(printAlbum) .catch(e => console.error(e))
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. 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
26. elm
27. Compiles to JavaScript
28. No runtime exceptions in practice.
29. No undefined is not a function
30. Back to our problems…
31. Update View Model Messages The Elm Architecture
32. Application State Model
33. Model Virtual DOM View UI as a Function
34. Messages Standardized application events
35. elm app model
36. elm app model Events Text Input Mouse Click Associate message with event
37. elm app model Events Text Input Mouse Click When event triggers (i.e. user clicks), deliver message
38. Update Model New Model Respond to messages and create new state
39. model Update View
40. model Update View
41. model Update View VDOM
42. model Update View VDOM
43. model Update View Select red color
44. model Update View Select red color
45. model Update View Select red color
46. model Update View
47. model Update View
48. model Update View
49. model Update View VDOM
50. model Update View VDOM
51. Demo
53. The Elm Architecture 1. State management 2. Code organization
54. The Elm Architecture 1. State management 2. Code organization Static Types 3. Data type guarantees
55. The Elm Architecture 1. State management 2. Code organization Static Types 3. Data type guarantees Maybe 4. Null and undefined
56. 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
57. 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
58. 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
59. Thanks! Jeremy Fairbank @elpapapollo Slides: bit.ly/resilient-elm-codestock Code: bit.ly/resilient-elm-code-codestock Book: bit.ly/programming-elm