$30 off During Our Annual Pro Sale. View Details »

Connect.Tech 2017: Functional Web with Elm

Jeremy Fairbank
September 20, 2017
Programming
0
120

Connect.Tech 2017: Functional Web with Elm

Jeremy Fairbank

September 20, 2017
Tweet

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
jfairbank
1
120
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
110
CodeMash 2020: Practical Functional Programming
jfairbank
1
280
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
220
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
140
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
42
All Things Open 2018: Practical Functional Programming
jfairbank
2
220
Connect.Tech 2018: Effective React Testing
jfairbank
1
110
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
700

Other Decks in Programming

See All in Programming
37年前の Sun 3/60 のために最新のNetBSDと最新のX.orgをメンテする話 / KOF2022
tsutsui
1
130
Blue / Green デプロイと安全性と複雑性と #AWSDevDay
track3jyo
PRO
11
3.9k
WebAssembly for the Backend
adriancole
0
160
KubeCon + CNCon Europe 2022 Recap ~ Istio Today and Tomorrow: Sidecars and Beyond
ksudate
0
140
Ltag
inoue2002
0
130
それぞれの特徴から考えるフレームワーク選び
ippey
1
250
10年前のRails Girls Japanむかしばなしとわたし #rggjp #rgjp10th
yotii23
3
120
Hono - Ultrafast web framework for Cloudflare Workers, Deno, Bun, and Node.js
yusukebe
2
4.6k
良い設計と悪い設計の違い
masuda220
PRO
16
17k
Ship Faster With Feature Flags
davidodari
0
160
『良いコード／悪いコードで学ぶ設計入門』を一歩深める読み方 / deepen good code bad code
minodriven
12
4k
PHPにおけるアトリビュートの活用方法
will1992114
0
120

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.2k
Docker and Python
trallard
28
1.8k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
4 Signs Your Business is Dying
shpigford
170
20k
The World Runs on Bad Software
bkeepers
PRO
59
5.6k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.7k
Teambox: Starting and Learning
jrom
124
7.8k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
8.9k
YesSQL, Process and Tooling at Scale
rocio
158
12k
Atom: Resistance is Futile
akmur
256
24k
What’s in a name? Adding method to the madness
productmarketing
11
1.8k

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