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. 1.

    @elpapapollo / jfairbank Building Web Apps with Elm Jeremy Fairbank

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

    Goals • Benefits of Elm • Elm Syntax • Functional

    Programming • Build web apps with Elm
  4. 7.
  5. 9.

    elm

  6. 12.

    elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript
  7. 13.

    elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F#
  8. 14.

    elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F# • Functional
  9. 15.

    elm • Created in 2012 Evan Czaplicki • Web and

    UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F# • Functional • Statically Typed
  10. 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
  11. 20.
  12. 21.
  13. 22.
  14. 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] ×
  15. 29.

    add x y = x + y add 2 2

    == 4 add 2 2 == 4 add 2 2 == 4
  16. 32.

    conference = { name = "JazzCon" } nextConference = {

    conference | name = "ConnectJS" } ✓
  17. 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
  18. 41.

    View Model Model Model Model Model View Model View Model

    View Model View Model Model Two-way Data Binding
  19. 49.

    elm Virtual DOM Todo List Learn Elm Build awesome Elm

    apps Learn functional programming <html />
  20. 50.

    Todo List Learn Elm Build awesome Elm apps Learn functional

    programming Model Delete first todo item <html />
  21. 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 />
  22. 55.

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

    Browser Window Mouse Position Events Text Input Mouse Click
  23. 56.

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

    Browser Window Mouse Position Events Text Input Mouse Click
  24. 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.
  25. 81.

    user : User user = { id = 1 ,

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

    { "id": 1 } type alias User = { id

    : Int, name : String } Decoder ?
  27. 83.

    { "id": 1 } type alias User = { id

    : Int, name : String } Decoder ?
  28. 89.

    user = { id = 1 , name = "Jeremy"

    } { "id": 1, "name": "Jeremy" } Decoder Ok
  29. 93.

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

    = 1 , name = "Jeremy" } Ok
  30. 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
  31. 99.

    Components vs. Flat Structure • Components • Pros • Perfect

    for independent, reusable applications • Single-page applications • Cons • Nested complexity • More boilerplate • Cumbersome parent-child communication
  32. 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