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