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
2. @testdouble helps improves how the world build software. testdouble.com/agency
3. bit.ly/programming-elm
4. Functional and statically typed programming language for frontend development elm
5. Web and UI Focused
6. Compiles to JavaScript
7. No runtime exceptions in practice.
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
9. Functional
10. Pure Data in Data out
11. Pure No side effects
12. Pure Predictable and Testable!
13. Immutable Data • Safety and consistency • Explicit flow of data • No subtle mutation bugs
14. No undefined is not a function
15. Fast
16. One framework. No fatigue. Update View Model Messages
17. ✓ Easier to write code ✓ Easier to write tests ✓ Easier to refactor
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
19. Format • Demos via ellie-app.com • Exercises via ellie-app.com • Q&A
20. Coding Time! README for demo and exercise URLs: bit.ly/fluent-elm-18
21. Update View Model Messages The Elm Architecture
22. Application State Model
23. Model Virtual DOM View UI as a Function
24. elm Virtual DOM Todo List Learn Elm Build awesome Elm apps Learn functional programming <html /> Model: Todo List
25. × Todo List Learn Elm Build awesome Elm apps Learn functional programming User deletes first todo item <html /> Model: New Todo List
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 <li> instead of fully rendering. elm Virtual DOM ×<html />
27. Messages Standardized application events
28. elm app model
29. elm app model Events Text Input Mouse Click Associate message with event
30. elm app model Events Text Input Mouse Click When event triggers (i.e. user clicks), deliver message
31. Update Model New Model Respond to messages and create new state
32. model Update View
33. model Update View
34. model Update View VDOM
35. model Update View VDOM
36. model Update View Select red color
37. model Update View Select red color
38. model Update View Select red color
39. model Update View
40. model Update View
41. model Update View
42. model Update View VDOM
43. model Update View VDOM
44. Coding Time!
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
46. Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/fluent-elm-slides-18 Repo: bit.ly/fluent-elm-18