Fluent Conf 2018: Building web apps with Elm Tutorial

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

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
69
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
73
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
88
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
200

Other Decks in Programming

See All in Programming
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
36
13k
1fab9d01b25e99522f3dfd01e3d4cb51?s=48 soutaro
0
450
73b0a25ed03f649ec63ded82ce4ac7cb?s=48 nunulk
0
140
4ae5ae2c4411d41bd8c7e75830ed313d?s=48 myamagishi
1
230
A665efd264afb82cc7d725d7e4847495?s=48 arimura6
0
270
7d1521d950d9bc5697868830cb04ff2f?s=48 yimajo
0
120
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
1
160
2c9e59cb4bc0651504210cee88fc8b8a?s=48 zukakosan
0
480
83722380372c00bd75ac920f2089f6aa?s=48 zacky1972
0
200
D8f039b7c0bdfdc1f28dd9f4db81b1be?s=48 ryunosukeheaven
4
240
275e91e7de0d6321f3759c2d0789c6d2?s=48 amaltson
2
240
271fad8d53cd1f12f2b4b6d38e3d7bd3?s=48 uzulla
1
190

Featured

See All Featured
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
12
4k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.8k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
480
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
680
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.5k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.3k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
92
2.9k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
15k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
12
640
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.9k

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