Fluent Conf 2018: Building web apps with Elm Tutorial

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

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
1
67
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
190
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
100
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
110
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
21
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
180
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
86
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
200
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
170

Other Decks in Programming

See All in Programming
D79e3b0b78ca7027eb61d73028d45ad6?s=48 uchi_k
0
380
4ccaadf34668c439a607c8b6083ba3b2?s=48 peaceiris
0
310
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
5
570
2559c50bf24b65eaba52fd7c75260c93?s=48 olgamaciaszek
1
580
A19876f5694283f26a061746ba82c3b0?s=48 germsvel
0
110
47c092e185020f83fcb35e3ed998ca0e?s=48 leocavalcante
2
180
0157a830bfaa0c5426422c45aa0b2637?s=48 bo0km4n
3
400
8c6c1f0c4c41d0640ade76bd71e9e475?s=48 gishi_yama
0
120
864aba682e6b16f3348b8876ab9c9f5a?s=48 kory33
5
3.6k
2ee9db3a5b6c492acf66ec14c8a5d8dc?s=48 slsops
0
290
3e2285cb3972dc9a48000153aa3a0805?s=48 katsuyan
0
560
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
140

Featured

See All Featured
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
250
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
410
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
52
1.8k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
144
19k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
35k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
251
19k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
83
4.6k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
13
480
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
315
18k

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