Save 37% off PRO during our Black Friday Sale! »

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
88
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
95
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
260
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
130
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
130
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
32
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
210
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
97
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
210

Other Decks in Programming

See All in Programming
B91386bc18034946a302d0fd9fee6ce9?s=48 whitphx
0
380
Ddecbf99faa27ea6257856734fa6f9b8?s=48 whitegreen
0
160
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
2
120
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
6
810
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
120
6c6b60f0440e030040a9141cab781ed0?s=48 hiboma
0
390
020199527cde1a8a9b7a11890894f442?s=48 dordieux
3
220
8847086af047cbf895ab3277b59529fe?s=48 andpad
0
130
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
6
1.7k
7a37d60769f6f3004adee19a8ff2c219?s=48 tunepolo
0
220
2e43817e39d87da5d9d4efd6310c0d44?s=48 kafumi
0
210
F34c64bc7a4bced65306809205aca33c?s=48 nologyance
0
210

Featured

See All Featured
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.2k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
100
15k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
249
21k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.9k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
204
10k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.7k
11c84dff30266b907714802088852677?s=48 jasonvnalue
88
8.4k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
224
15k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
950
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k

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