Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Connect.Tech 2017: Functional Web with Elm
Search
Jeremy Fairbank
September 20, 2017
Programming
0
180
Connect.Tech 2017: Functional Web with Elm
Jeremy Fairbank
September 20, 2017
Tweet
Share
More Decks by Jeremy Fairbank
See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
jfairbank
1
190
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
140
CodeMash 2020: Practical Functional Programming
jfairbank
1
310
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
340
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
170
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
120
All Things Open 2018: Practical Functional Programming
jfairbank
2
260
Connect.Tech 2018: Effective React Testing
jfairbank
1
150
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
830
Other Decks in Programming
See All in Programming
「理解」を重視したAI活用開発
fast_doctor
0
260
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
ニーリーQAのこれまでとこれから
nealle
2
130
Optimizing JRuby 10
headius
0
530
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
450
The Evolution of the CRuby Build System
kateinoigakukun
1
760
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
Laravel × Clean Architecture
bumptakayuki
PRO
0
130
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3.3k
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
220
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
ike002jp
1
110
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
160
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Music & Morning Musume
bryan
47
6.5k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
Fireside Chat
paigeccino
37
3.4k
Producing Creativity
orderedlist
PRO
344
40k
Statistics for Hackers
jakevdp
798
220k
Bash Introduction
62gerente
611
210k
Designing Experiences People Love
moore
142
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
770
Rails Girls Zürich Keynote
gr2m
94
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Transcript
Jeremy Fairbank @elpapapollo / jfairbank Functional Web with Elm Visit
README for demo and exercise URLs: https://github.com/jfairbank/elm-workshop
Software is broken. We are here to fix it. Say
hi@testdouble.com
Functional and statically typed programming language for frontend development elm
Web and UI Focused
Compiles to JavaScript
No runtime exceptions in practice.
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
Functional
Pure Data in Data out
Pure No side effects
Pure Predictable and Testable!
Immutable Data • Safety and consistency • Explicit flow of
data • No subtle mutation bugs
No undefined is not a function
Fast
One framework. No fatigue. Update View Model Messages
✓ Easier to write code ✓ Easier to write tests
✓ Easier to refactor
Content • Functions and expressions • Lists, records, and immutability
• Static types and type aliases • Union types and pattern matching • Building Apps with the Elm Architecture
Format • Demos via ellie-app.com • Exercises via ellie-app.com •
Q&A
README for demo and exercise URLs: github.com/jfairbank/elm-workshop
Update View Model Messages The Elm Architecture
Application State Model
Model Virtual DOM View UI as a Function
elm Virtual DOM Todo List Learn Elm Build awesome Elm
apps Learn functional programming <html /> Model: Todo List
× Todo List Learn Elm Build awesome Elm apps Learn
functional programming User deletes first todo item <html /> Model: New Todo List
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 />
Messages Standardized application events
elm app model
elm app model Events Text Input Mouse Click Associate message
with event
elm app model Events Text Input Mouse Click When event
triggers (i.e. user clicks), deliver message
Update Model New Model Respond to messages and create new
state
model Update View
model Update View
model Update View VDOM
model Update View VDOM
model Update View Select red color
model Update View Select red color
model Update View Select red color
model Update View
model Update View
model Update View
model Update View VDOM
model Update View VDOM
Demo and Exercise
Resources • elm-lang.org • elm-lang.org/examples • guide.elm-lang.org • www.elm-tutorial.org •
builtwithelm.co • Slack • elmlang.herokuapp.com
Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/elm-connect