Pro Yearly is on sale from $80 to $50! »

JazzCon 2017: Building Web Apps with Elm Workshop

JazzCon 2017: Building Web Apps with Elm Workshop

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

March 22, 2017
Tweet

Transcript

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

    Follow instructions here to get setup! github.com/jfairbank/elm-workshop
  2. Goals

  3. Goals • Benefits of Elm

  4. Goals • Benefits of Elm • Elm Syntax

  5. Goals • Benefits of Elm • Elm Syntax • Functional

    Programming
  6. Goals • Benefits of Elm • Elm Syntax • Functional

    Programming • Build web apps with Elm
  7. Format • Some slides. • Coding. • Ask questions! •

    Code along if you want. - Exercises
  8. Follow Along github.com/jfairbank/elm-workshop

  9. elm

  10. elm • Created in 2012 Evan Czaplicki

  11. elm • Created in 2012 Evan Czaplicki • Web and

    UI focused
  12. elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript
  13. elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F#
  14. elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F# • Functional
  15. elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F# • Functional • Statically Typed
  16. What’s all the fuss about?

  17. undefined is not a function

  18. No runtime exceptions in practice.

  19. The argument to function `greet` is causing a mismatch. 11|

    greet 42 ^^ Function `greet` is expecting the argument to be: String But it is: number Compile time static type checks
  20. Fast

  21. Fast

  22. Fast

  23. Functional

  24. Expressive and Declarative Concise and intent-revealing

  25. Expressive and Declarative Fewer lines of code!

  26. function doubleNumbers(numbers) { const doubled = []; const l =

    numbers.length; for (let i = 0; i < l; i++) { doubled.push(numbers[i] * 2); } return doubled; } doubleNumbers([1, 2, 3]); // [2, 4, 6] ×
  27. doubleNumbers list = List.map ((*) 2) list doubleNumbers myList --

    [2, 4, 6] ✓
  28. Pure Functions Predictable and easier to test

  29. add x y = x + y add 2 2

    == 4 add 2 2 == 4 add 2 2 == 4
  30. Immutable Data No mutation bugs or inconsistent state

  31. × conference = { name = "JazzCon" } conference.name =

    "ConnectJS"
  32. conference = { name = "JazzCon" } nextConference = {

    conference | name = "ConnectJS" } ✓
  33. Built-in Framework The Elm Architecture

  34. Built-in Framework Unidirectional with organized state changes

  35. Update View Model Messages

  36. Sold? Let’s learn Elm!

  37. Plan 9:00 - 9:15 Intro 9:15 - 9:45 Code: Syntax

    and Functional Programming 9:45 - 9:55 The Elm Architecture 9:55 - 10:30 Code: Building a Todo List 10:30 - 11:00 Code: Exercise and Break 11:00 - 11:10 HTTP: Commands and Decoders 11:10 - 11:45 Code: Fetching a GitHub User 11:45 - 12:00 Code: Exercise 12:00 - 12:15 Code: Components 12:15 - 12:30 Wrap Up
  38. Coding Time! Elm Syntax

  39. The Elm Architecture Model-View-Update

  40. Controller View Model Model Model Model Model View View View

    View MVC
  41. View Model Model Model Model Model View Model View Model

    View Model View Model Model Two-way Data Binding
  42. Update View Model Messages Unidirectional

  43. Update View Model Messages

  44. Model Single source of truth

  45. Model • String • Int • Record • List •

    Etc. Any data type
  46. Update View Model Messages

  47. View Projection of model

  48. UI as a Function Model Virtual DOM View

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

    apps Learn functional programming <html />
  50. Todo List Learn Elm Build awesome Elm apps Learn functional

    programming Model Delete first todo item <html />
  51. View Model Notice missing item in virtual DOM list, so

    just remove corresponding <li>. elm Virtual DOM Todo List Build awesome Elm apps Learn functional programming <html />
  52. Update View Model Messages

  53. Messages Standardized application events

  54. elm app model

  55. elm app model Commands HTTP Dates Random #’s Subscriptions WebSockets

    Browser Window Mouse Position Events Text Input Mouse Click
  56. elm app model Commands HTTP Dates Random #’s Subscriptions WebSockets

    Browser Window Mouse Position Events Text Input Mouse Click
  57. Update View Model Messages

  58. Update Responds to messages and creates new state

  59. Update Model New Model Command

  60. model Update View elm

  61. model Update View elm

  62. model Update View elm

  63. model Update View elm !

  64. model Update View elm !

  65. model Update View elm

  66. model Update View elm

  67. model Update View elm

  68. model Update View elm

  69. Coding Time! Building a Todo List

  70. Exercise(s) • Allow adding new todo items. • Underneath todo

    list add a button to add a new todo item to the todo list. • The new todo item should have a blank description and should start off in an Editing state. • Hint: you’ll probably want the :: or ++ operators. • Allow deleting todo items. • Add delete button next to edit button. • Hint: editing/saving/completing required List.map. Deletion will require List.filter. • Allow marking a complete todo item as incomplete.
  71. Working with HTTP Commands and Decoders

  72. Update Model New Model Command

  73. Update Model New Model Command ?

  74. Side Effects I/O Mutable State

  75. Commands Describe side effects instead of doing them

  76. HTTP Commands Update Command elm

  77. What about the response? Update elm JSON

  78. What about the response? Update elm JSON Dynamic Payloads

  79. What about the response? Update elm JSON Dynamic Payloads Static

    Types
  80. Decoders Transform arbitrary JSON to static types

  81. user : User user = { id = 1 ,

    name = "Jeremy" } { "id": 1, "name": "Jeremy" } Decoder type alias User = { id : Int, name : String }
  82. { "id": 1 } type alias User = { id

    : Int, name : String } Decoder ?
  83. { "id": 1 } type alias User = { id

    : Int, name : String } Decoder ?
  84. { "id": 1 } Decoder BadPayload Err

  85. { "id": 1 } Decoder BadPayload Err Result type

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

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

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

    error
  89. user = { id = 1 , name = "Jeremy"

    } { "id": 1, "name": "Jeremy" } Decoder Ok
  90. { "id": 1, "name": "Jeremy" } “id” int “name” string

  91. { "id": 1, "name": "Jeremy" } “id” int “name” string

    Field decoders
  92. { "id": 1, "name": "Jeremy" } “id” int “name” string

    1 Ok "Jeremy" Ok
  93. 1 Ok "Jeremy" Ok User Decoder user = { id

    = 1 , name = "Jeremy" } Ok
  94. 1 Ok User Decoder BadPayload Err BadPayload Err

  95. Coding Time! Fetching a GitHub User

  96. Exercise(s) • Add a loading screen. • Display something like

    “Fetching user <user.login>…” • Hint: what state should you update and when? • Display another field or two for the user. • Hint: Remember to update the User type and the userDecoder. • Decode GitHub error messages. • Use login nouser for testing. • Hint: you need to decode response.body in the Http.BadStatus branch. • Hint: you’ll probably want the decodeString and field functions from:
 package.elm-lang.org/packages/elm-lang/core/5.1.1/Json-Decode
  97. Coding Time! Components

  98. Components vs. Flat Structure

  99. Components vs. Flat Structure • Components • Pros • Perfect

    for independent, reusable applications • Single-page applications • Cons • Nested complexity • More boilerplate • Cumbersome parent-child communication
  100. Components vs. Flat Structure • Components • Pros • Perfect

    for independent, reusable applications • Single-page applications • Cons • Nested complexity • More boilerplate • Cumbersome parent-child communication • Flat Structure • Flatter state • Use function and module helpers • Pros • No parent-child communication ceremony • Easier to follow flow of application • Cons • Larger models • More Msg values
  101. Boilerplate But greater guarantees and safety

  102. Solving Boilerplate • github.com/halfzebra/create-elm-app • github.com/elm-community/elm-webpack- starter • github.com/gkubisa/elm-app-boilerplate •

    github.com/splodingsocks/elm-starter
  103. create-elm-app

  104. Tutorials • www.elm-tutorial.org • guide.elm-lang.org • frontendmasters.com/ courses/elm/

  105. Elm in Action manning.com/books/elm-in-action

  106. Final Questions?

  107. @elpapapollo / jfairbank Thanks! Jeremy Fairbank Code: github.com/jfairbank/elm-workshop Slides: bit.ly/jazzcon17-elm-workshop