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

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