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
84
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
90
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
250
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
110
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
130
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
29
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
210
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
95
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
660

Other Decks in Programming

See All in Programming
Ad5601748cd8d88144c57dfe0c814fef?s=48 takahoyo
4
480
1d42b38276c3d2c7cc931fa444c13488?s=48 nasum
18
6.2k
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
0
180
C53a4a07191668addb0f406ceac16f41?s=48 sungkukshawnpark
0
660
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
3
2.4k
0ea5ae7105be50951fd7d2aa7a3630e1?s=48 nakashin1
0
120
F0012066f4fad79deb33bf5e9799b557?s=48 francescostrazzullo
0
100
B7424f2bb6afd48c51cf88c2c15c395d?s=48 t2kob
0
130
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
310
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
100
C98d379da6e5517afff697a6c5615e68?s=48 mizzsugar
1
920
8284465a94bbdf1ea82cf1a67d55f447?s=48 kilometer
2
190

Featured

See All Featured
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
33
2.3k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.8k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
55k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
333
16k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
117
26k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
10
1k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
5.5k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
315
21k
78b475797a14c84799063c7cd073962f?s=48 holman
463
280k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
34
4k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
504
37k

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