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
630

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
72
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
78
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
220
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
90
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
200

Other Decks in Programming

See All in Programming
B1196c22fd3ca181eec43e1b67823d3f?s=48 aftiopk
0
120
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
740
6a1345d8e6dd15b2c78eff0c331963b1?s=48 dbrumann
0
110
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
130
6c366ab6293eb42aec0e6f5f69b50882?s=48 ryokbt
2
300
57623c5cef7c777c4bf3103cf06c2d6c?s=48 yoshinoriiiii
0
110
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
0
170
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
200
6c3e7ef20801b4b967dc1643f63d6233?s=48 ianaya89
1
200
C5c09bfd9ee31f5aef8ce257643d50ea?s=48 takapy
0
120
Eeedbe91225c0207014a46f09eea1d30?s=48 nearmugi
0
190
Fb469a72f1b12726aea391f479dc1b6d?s=48 gernotstarke
0
390

Featured

See All Featured
5f50f94346fbcb23706f0707169317a4?s=48 aarron
257
36k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
21
920
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
53
3.5k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.9k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
321
53k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
157
6.4k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.6k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
6
720

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