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

Connect.Tech 2017: Functional Web with Elm

Connect.Tech 2017: Functional Web with Elm

Jeremy Fairbank

September 20, 2017
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

  1. Jeremy Fairbank
    @elpapapollo / jfairbank
    Functional Web
    with Elm
    Visit README for demo and exercise URLs:
    https://github.com/jfairbank/elm-workshop

    View Slide

  2. Software is broken.
    We are here to fix it.
    Say [email protected]

    View Slide

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

    View Slide

  4. Web and UI Focused

    View Slide

  5. Compiles to JavaScript

    View Slide

  6. No runtime exceptions in
    practice.

    View Slide

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

  8. Functional

    View Slide

  9. Pure Data in
    Data out

    View Slide

  10. Pure No side
    effects

    View Slide

  11. Pure Predictable
    and Testable!

    View Slide

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

    View Slide

  13. No undefined is not a
    function

    View Slide

  14. Fast

    View Slide

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

    View Slide

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

    View Slide

  17. Content
    • Functions and expressions
    • Lists, records, and immutability
    • Static types and type aliases
    • Union types and pattern matching
    • Building Apps with the Elm Architecture

    View Slide

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

    View Slide

  19. README for demo and exercise URLs:
    github.com/jfairbank/elm-workshop

    View Slide

  20. Update
    View
    Model
    Messages
    The Elm
    Architecture

    View Slide

  21. Application
    State
    Model

    View Slide

  22. Model
    Virtual
    DOM
    View
    UI as a Function

    View Slide

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

    View Slide

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

    View Slide

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

  26. Messages
    Standardized
    application events

    View Slide

  27. elm
    app
    model

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. model
    Update View

    View Slide

  32. model
    Update View

    View Slide

  33. model
    Update View
    VDOM

    View Slide

  34. model
    Update View
    VDOM

    View Slide

  35. model
    Update View
    Select red color

    View Slide

  36. model
    Update View
    Select red color

    View Slide

  37. model
    Update View
    Select red color

    View Slide

  38. model
    Update View

    View Slide

  39. model
    Update View

    View Slide

  40. model
    Update View

    View Slide

  41. model
    Update View
    VDOM

    View Slide

  42. model
    Update View
    VDOM

    View Slide

  43. Demo and Exercise

    View Slide

  44. Resources
    • elm-lang.org
    • elm-lang.org/examples
    • guide.elm-lang.org
    • www.elm-tutorial.org
    • builtwithelm.co
    • Slack
    • elmlang.herokuapp.com

    View Slide

  45. Thanks!
    Jeremy Fairbank
    @elpapapollo / jfairbank
    Slides: bit.ly/elm-connect

    View Slide