Connect.Tech 2017: Functional Web with Elm

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 hi@testdouble.com
   

   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