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

Fluent Conf 2018: Building web apps with Elm Tutorial

94bd558238b69c45d3d3e15797ae94f7?s=47 Jeremy Fairbank
June 12, 2018
Programming
2
660

Fluent Conf 2018: Building web apps with Elm Tutorial

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

June 12, 2018
Tweet

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
87
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
94
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
250
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
110
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
130
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
30
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
210
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
95
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
210

Other Decks in Programming

See All in Programming
08d5432a5bc31e6d9edec87b94cb1db1?s=48 k0kubun
18
11k
7a4fa8b5922e77f29e03cffadd64bddf?s=48 faithandbrave
18
6.5k
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
0
430
E9e3472b8801ed21298ccefeecfaf429?s=48 takamichie
PRO
0
210
9242ec5423930ab9ab881ce07f4d4fcf?s=48 e99h2121
0
1.4k
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
23
9.4k
D845da5233d883972679b1cf05e186c4?s=48 azuma
0
7.8k
52711e2157a6fed933b0361cc06a6953?s=48 marcelgsantos
2
150
08d5432a5bc31e6d9edec87b94cb1db1?s=48 k0kubun
2
1k
8673a339e4002704b42bc66c43c65445?s=48 scrpgil
0
100
9242ec5423930ab9ab881ce07f4d4fcf?s=48 e99h2121
0
1.5k
9242ec5423930ab9ab881ce07f4d4fcf?s=48 e99h2121
0
1.5k

Featured

See All Featured
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.3k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
36k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
292
110k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
208
20k
11c84dff30266b907714802088852677?s=48 jasonvnalue
87
8.3k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
270
17k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
44
2.5k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
20
5k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
235
18k

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