JazzCon 2018: Build Web Apps with Elm

JazzCon 2018: Build Web Apps with Elm

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

March 21, 2018
Tweet

Transcript

  1. Jeremy Fairbank @elpapapollo / jfairbank Build Web Apps with Elm

    Visit README for demo and exercise URLs: bit.ly/jf-elm-workshop
  2. Software is broken. We are here to fix it. Say

    hi@testdouble.com
  3. In beta now! bit.ly/programming-elm

  4. Functional and statically typed programming language for frontend development elm

  5. Web and UI Focused

  6. Compiles to JavaScript

  7. No runtime exceptions in practice.

  8. The 2nd argument to function `add` is causing a mismatch.

    7| add 2 "3" ^^^ Function `add` is expecting the 2nd argument to be: Int But it is: String Compile time static type checks
  9. Functional

  10. Pure Data in Data out

  11. Pure No side effects

  12. Pure Predictable and Testable!

  13. Immutable Data • Safety and consistency • Explicit flow of

    data • No subtle mutation bugs
  14. No undefined is not a function

  15. Fast

  16. One framework. No fatigue. Update View Model Messages

  17. ✓ Easier to write code ✓ Easier to write tests

    ✓ Easier to refactor
  18. Content • Functions and expressions • Lists, records, and immutability

    • Static types and type aliases • Union types and pattern matching • Building Apps with the Elm Architecture • JSON Decoders • Adding HTTP to applications
  19. Format • Demos via ellie-app.com • Exercises via ellie-app.com •

    Q&A
  20. Coding Time! README for demo and exercise URLs: bit.ly/jf-elm-workshop

  21. Update View Model Messages The Elm Architecture

  22. Application State Model

  23. Model Virtual DOM View UI as a Function

  24. elm Virtual DOM Todo List Learn Elm Build awesome Elm

    apps Learn functional programming <html /> Model: Todo List
  25. × Todo List Learn Elm Build awesome Elm apps Learn

    functional programming User deletes first todo item <html /> Model: New Todo List
  26. Todo List Learn Elm Build awesome Elm apps Learn functional

    programming View Model: New Todo List Elm notices missing todo item in virtual DOM list, so it just removes the corresponding <li> instead of fully rendering. elm Virtual DOM ×<html />
  27. Messages Standardized application events

  28. elm app model

  29. elm app model Events Text Input Mouse Click Associate message

    with event
  30. elm app model Events Text Input Mouse Click When event

    triggers (i.e. user clicks), deliver message
  31. Update Model New Model Respond to messages and create new

    state
  32. model Update View

  33. model Update View

  34. model Update View VDOM

  35. model Update View VDOM

  36. model Update View Select red color

  37. model Update View Select red color

  38. model Update View Select red color

  39. model Update View

  40. model Update View

  41. model Update View

  42. model Update View VDOM

  43. model Update View VDOM

  44. Coding Time!

  45. HTTP Commands and Decoders

  46. elm app model ?

  47. elm app model Commands HTTP Dates Random #’s Create command

    with response message
  48. elm app model Receive back message with response value when

    command completes Commands HTTP Dates Random #’s
  49. Update Model New Model Command

  50. GET /todos/1 Cmd

  51. { "id": 1, "title": "Learn Elm", "complete": false }

  52. { "id": 1, "title": "Learn Elm", "complete": false } Dynamic

    JSON Static Type type alias TodoItem = { id : Int , title : String , complete : Bool } ?
  53. JSON Decoders Ok { id = 1 , title =

    "Learn Elm" , complete = False } { "id": 1, "title": "Learn Elm", "complete": false }
  54. Err BadPayload { "id": 1, "description": "Learn Elm", "complete": false

    } Wrong property key, expected title.
  55. type Result error value = Ok value | Err error

  56. type Result error value = Ok value | Err error

  57. type Result error value = Ok value | Err error

  58. 404 Not Found Err BadStatus

  59. Coding Time!

  60. Resources • bit.ly/programming-elm • elm-lang.org • elm-lang.org/examples • guide.elm-lang.org •

    www.elm-tutorial.org • builtwithelm.co • Slack • elmlang.herokuapp.com
  61. Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/elm-jazzcon-18