Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Connect.Tech 2017: Functional Web with Elm

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

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
80
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
80
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
240
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
110
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
120
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
26
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
200
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
91
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
640

Other Decks in Programming

See All in Programming
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
1
4.4k
70e95d1035afbf26f8be503a7177e756?s=48 fei0203018
0
200
D0a6969000c3715087b3a00abd646d20?s=48 timeseriesfr
1
160
091c8449decb2f3549c695b5f903865a?s=48 sh_akira
3
140
Dbab5e5a1fd54531e1119ede6b3b9e65?s=48 horie1024
2
280
102398563fd1bf878b35dc2d5ee67cbe?s=48 kamilahsantos
2
100
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
110
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
150
588a291ce25b07e836ae5df8911eaf18?s=48 tdak
0
140
85401912c23c7d5e656c08e7a751e95c?s=48 cocoatomo
0
250
Dc5157c1e1b11923f4cdd210ee27d4af?s=48 patorash
0
160
4ab3fec3e82ddb19bcadd93ef909a443?s=48 syucream
4
1.5k

Featured

See All Featured
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.8k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
146
20k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
289
110k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
613
55k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
220
15k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
89
4k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
11
710
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
20
770
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
3k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
53
2.9k

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