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

Connect.Tech 2017: Functional Web with Elm

94bd558238b69c45d3d3e15797ae94f7?s=47 Jeremy Fairbank
September 20, 2017
Programming
0
110

Connect.Tech 2017: Functional Web with Elm

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

September 20, 2017
Tweet

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
71
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
75
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
210
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
110
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
120
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
23
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
190
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
89
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
620

Other Decks in Programming

See All in Programming
Fbe54abf4094d19f1548783d072a7fa7?s=48 adoranwodo
0
240
1c2b62114ede7d8cb897bf19b999d233?s=48 muttsu_623
0
540
270b0c7883545117a9a618dc7ca7cc83?s=48 xrdnk
0
130
Dbab5e5a1fd54531e1119ede6b3b9e65?s=48 horie1024
1
430
7975b9fd58c8945ae1c6b38747de7f28?s=48 line_developers_tw2
0
790
E505897a79eede1a676f92740261e8f8?s=48 kubode
0
220
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
4
550
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
210
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
210
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
2
3k
6dd0483f1353a4a359e92633cfd65c64?s=48 wasabeef
1
570
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
1
180

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
30
3.3k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
20k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
302
31k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
308
17k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
610
54k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
368
42k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
8.5k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
9.9k
24fc194843a71f10949be18d5a692682?s=48 gr2m
83
11k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k

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