Fluent Conf 2018: Building web apps with Elm Tutorial

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