Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Jeremy Fairbank

April 20, 2018
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

  1. const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`)

    .then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
  2. const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`)

    .then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
  3. const axios = require('axios') const fetchAlbum = name => axios.get(`/albums/${name}`)

    .then(({ data }) => data) const printAlbum = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
  4. { "title": "Blue Train", "artists": ["John Coltrane"] } const printAlbum

    = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
  5. { "title": "Blue Train", "artists": ["John Coltrane"] } const printAlbum

    = ({ name, artists }) => console.log(`${name} by ${artists.join(' - ')}`)
  6. const printAlbum = ({ title, artists }) => console.log(`${title} by

    ${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
  7. const printAlbum = ({ title, artists }) => console.log(`${title} by

    ${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
  8. const printAlbum = ({ title, artists }) => console.log(`${title} by

    ${artists.join(' - ‘)}`) fetchAlbum('blue train') .then(printAlbum) // Blue Train by John Coltrane
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. elm

  17. elm app model Events Text Input Mouse Click When event

    triggers (i.e. user clicks), deliver message
  18. The Elm Architecture 1. State management 2. Code organization Static

    Types 3. Data type guarantees Maybe 4. Null and undefined
  19. 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
  20. 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
  21. 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