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

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

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

April 20, 2018
Tweet

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))

  18. None
  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

  52. None
  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