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
130
CodeMash 2020: Practical Functional Programming
jfairbank
1
310
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
330
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
170
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
110
All Things Open 2018: Practical Functional Programming
jfairbank
2
250
Connect.Tech 2018: Effective React Testing
jfairbank
1
140
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
820
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
840
React 19アップデートのために必要なこと
uhyo
8
1.5k
CI改善もDatadogとともに
taumu
0
200
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
はじめての Go * WASM *OCR
sgash708
1
100
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
150
楽しく向き合う例外対応
okutsu
0
680
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
360
バッチを作らなきゃとなったときに考えること
irof
2
530
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
520
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
610
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Automating Front-end Workflow
addyosmani
1368
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
The Language of Interfaces
destraynor
156
24k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Faster Mobile Websites
deanohume
306
31k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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
[email protected]
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