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
170
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
180
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
130
CodeMash 2020: Practical Functional Programming
jfairbank
1
290
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
310
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
160
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
92
All Things Open 2018: Practical Functional Programming
jfairbank
2
250
Connect.Tech 2018: Effective React Testing
jfairbank
1
130
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
780
Other Decks in Programming
See All in Programming
今インフラ技術をイチから学び直すなら
yuhta28
1
120
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
520
Appleの新しいプライバシー要件対応: ノーコードアプリ プラットフォームの実践事例
nao_randd
1
610
The Shape of a Service Object
inem
0
440
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
240
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
620
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
490
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
200
Kotlin 2.0 and Beyond
antonarhipov
2
140
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
240
Regular Expressions, REXML, Automata Learning
makenowjust
0
200
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1029
450k
How to Think Like a Performance Engineer
csswizardry
16
940
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Building Your Own Lightsaber
phodgson
101
6k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Typedesign – Prime Four
hannesfritz
39
2.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Invisible Customer
myddelton
119
13k
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