Connect.Tech 2017: Functional Web with Elm

94bd558238b69c45d3d3e15797ae94f7?s=47 Jeremy Fairbank
September 20, 2017
Programming
0
100

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
55
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
70
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
200
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
100
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
110
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
22
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
190
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
88
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
600

Other Decks in Programming

See All in Programming
249b3122eee454c0a818bfe7851418e4?s=48 fromkk
1
110
29fafe10f8a2fefb98671421260aaa65?s=48 steinkel
1
150
9eed44f137609e6ce3b6f1e14f80b9e1?s=48 izumin5210
6
3k
Bf5ee9059859ed5d855b5ff4680e63e2?s=48 track3jyo
4
630
81bf9a5ec95c07c4884b334456025095?s=48 coodoo
1
1.1k
264b44c0c6d60336f8b6a0fbab118984?s=48 mmazour
0
140
6a87c9bfc71c805c3f5f248b359365d3?s=48 mu2in
0
550
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
160
F929f5d80ef8a23b67ad8ac6f08416cd?s=48 melix
0
300
Bb49e68eb46070029845fb3022d9026f?s=48 yukilabo
1
150
A030c34a2bc0d0610b4d87f8c56a2ab7?s=48 masatomix
0
120
1102d6e3810fcc652a8b2887d1642ade?s=48 47degacademy
0
200

Featured

See All Featured
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
11
690
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
500
A9704266587836f7e784235e5073b93e?s=48 jmmastey
5
360
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
309
21k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.6k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
66
260k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k

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