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

Fluent Conf 2018: Building web apps with Elm Tutorial

Fluent Conf 2018: Building web apps with Elm Tutorial

Jeremy Fairbank

June 12, 2018
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

  1. Jeremy Fairbank
    @elpapapollo / jfairbank
    Building web apps
    with Elm
    Visit README for demo and exercise URLs:
    bit.ly/fluent-elm-18

    View Slide

  2. @testdouble helps improves
    how the world build software.
    testdouble.com/agency

    View Slide

  3. bit.ly/programming-elm

    View Slide

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

    View Slide

  5. Web and UI Focused

    View Slide

  6. Compiles to JavaScript

    View Slide

  7. No runtime exceptions in
    practice.

    View Slide

  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

    View Slide

  9. Functional

    View Slide

  10. Pure Data in
    Data out

    View Slide

  11. Pure No side
    effects

    View Slide

  12. Pure Predictable
    and Testable!

    View Slide

  13. Immutable Data
    • Safety and consistency
    • Explicit flow of data
    • No subtle mutation bugs

    View Slide

  14. No undefined is not a
    function

    View Slide

  15. Fast

    View Slide

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

    View Slide

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

    View Slide

  18. Content
    • Functions and expressions
    • Static applications
    • Dynamic applications with the Elm Architecture
    • Working with Lists
    • Static Types and Type Aliases
    • Input Events and Union Types

    View Slide

  19. Format
    • Demos via ellie-app.com
    • Exercises via ellie-app.com
    • Q&A

    View Slide

  20. Coding Time!
    README for demo and exercise URLs:
    bit.ly/fluent-elm-18

    View Slide

  21. Update
    View
    Model
    Messages
    The Elm
    Architecture

    View Slide

  22. Application
    State
    Model

    View Slide

  23. Model
    Virtual
    DOM
    View
    UI as a Function

    View Slide

  24. elm
    Virtual
    DOM
    Todo List
    Learn Elm
    Build awesome Elm apps
    Learn functional programming

    View Slide

  25. ×
    Todo List
    Learn Elm
    Build awesome Elm apps
    Learn functional programming
    User deletes
    first todo item

    View Slide

  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 instead of fully rendering.
    elm
    Virtual
    DOM
    ×

    View Slide

  27. Messages
    Standardized
    application events

    View Slide

  28. elm
    app
    model

    View Slide

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

    View Slide

  30. elm
    app
    model
    Events
    Text Input
    Mouse Click
    When event triggers (i.e.
    user clicks), deliver
    message

    View Slide

  31. Update
    Model
    New
    Model
    Respond to messages and
    create new state

    View Slide

  32. model
    Update View

    View Slide

  33. model
    Update View

    View Slide

  34. model
    Update View
    VDOM

    View Slide

  35. model
    Update View
    VDOM

    View Slide

  36. model
    Update View
    Select red color

    View Slide

  37. model
    Update View
    Select red color

    View Slide

  38. model
    Update View
    Select red color

    View Slide

  39. model
    Update View

    View Slide

  40. model
    Update View

    View Slide

  41. model
    Update View

    View Slide

  42. model
    Update View
    VDOM

    View Slide

  43. model
    Update View
    VDOM

    View Slide

  44. Coding Time!

    View Slide

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

    View Slide

  46. Thanks!
    Jeremy Fairbank
    @elpapapollo / jfairbank
    Slides: bit.ly/fluent-elm-slides-18
    Repo: bit.ly/fluent-elm-18

    View Slide