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
Elm
Search
sporto
November 22, 2015
Technology
1
250
Elm
Elm for building single page applications
sporto
November 22, 2015
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
170
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
180
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
110
Grunt
sporto
1
150
Safe Testing in Ruby
sporto
1
120
Go - A great language for building web applications
sporto
1
310
Other Decks in Technology
See All in Technology
Overview of file type identifiers
ange
0
200
SwiftSyntaxでUIKitとSwiftUIの使用率を完璧に計測できちゃう件について
ldf_tech
0
160
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
110
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
200
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
2
300
AIを使って小説を書こう!【2024/10/25講演資料】
kamomeashizawa
0
160
AWS CDKで大量のパラメータストアを作りたい
y_kotani
1
150
LLMアプリをRagasで評価して、Langfuseで可視化しよう!
minorun365
PRO
2
190
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
7
1.2k
入門『状態』#kaigionrails / "state" for beginners with Rails
shinkufencer
2
750
AWS SAW(AWS Support Automation Workflows)をもっと広めたい
kazzpapa3
2
170
DevOpsに関連するツールとその概要を淡々と読み上げる会
devops_vtj
1
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Fireside Chat
paigeccino
32
3k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Six Lessons from altMBA
skipperchong
26
3.4k
Thoughts on Productivity
jonyablonski
67
4.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Making Projects Easy
brettharned
115
5.9k
It's Worth the Effort
3n
183
27k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.7k
What's in a price? How to price your products and services
michaelherold
243
11k
How GitHub (no longer) Works
holman
311
140k
Transcript
ELM @SEBASPORTO
LOOKING FOR BETTER WAYS JQUERY CANJS ANGULAR REACT ELM?
ELM? ‣FRP (functional reactive programming) language * ‣Statically typed ‣Compiles
to JS
TRENDS IN FRONT END
DESCRIBE INSTEAD OF MUTATING THE DOM ▸ Complex interactions are
easy ▸ Speed
DESCRIBE STATE 1 2 3 1 2 3 focus on
the state not the changes jquery react
DESCRIBE STATE ▸ Complex interactions are easy ▸ Easier to
model
UNIDIRECTIONAL DATA FLOWS ▸ Easier to understand ▸ Less complexity
FLUX View Dispatcher A c tion (E vent) Store Action
(Event) C hange
IMMUTABLE DATA ▸ Confidence ▸ No side effects ▸ Dirty
objects ▸ Undo
▸ Seamless-immutable ▸ Immutable.js Mediocre solutions, JS will fight you
all they way IMMUTABLE DATA in JS
DESCRIBE TRANSFORMATIONS IN APP DATA INSTEAD OF TRANSFORMING ▸ Easier
to test ▸ Easier to compose ▸ Redux
PURE VIEWS aka STATELESS VIEWS
STATELESS VIEWS Same params Same Output View
STATELESS VIEWS ▸ Simpler to understand ▸ Easier to test
▸ No side effects
ALL STATE IN ONE PLACE
STATE IN ON PLACE Component Component Component Component Component Component
State
ALL STATE IN ONE PLACE ▸ State consistency between views
▸ Undo ▸ Serialise / unserialise ▸ Easier to debug
THERE HAPPENS TO BE A LANGUAGE THAT EMBRACES ALL THESE
ELM ▸ Immutable ▸ One state tree ▸ Stateless views
▸ Describe transformations ▸ Unidirectional data flow
ML BASED (LIKE HASKELL) sum: Int -> Int -> Int
sum a b = a + b
PROGRAMMING IN ELM
SIGNALS Mouse move 24, 30 26, 32 28, 30 ....
Constant flow of events
SIGNALS Mouse click Key press Merged signal
SIGNALS They come from everywhere - Clicks - Keyboard -
Hash changes - Ajax request
TASKS Async ops, like promises Create Task Task finishes Create
signal with result Run Task
KEEPING STATE - THE FUNCTIONAL WAY Initial state FoldP Update
Signal with event Signal with updated model like reduce
THE ELM ARCHITECTURE Signal (event) mailbox Signal View FoldP Update
Updated model
DEMO
WHAT ELSE?
WHAT IF WE HAD ALMOST NO ERRORS?
JAVASCRIPT IS FAMOUS FOR UNHELPFUL ERRORS UNDEFINED IS NOT A
FUNCTION
ELM 7| text (toString List.lenght things) `List` does not expose
`lenght`. Maybe you want one of the following? List.length
WHAT IF WE HAD NO NULLS?
JAVASCRIPT var array = [] var res = array[0] *
2 NaN
RUBY undefined method '*' for nil:NilClass (NoMethodError) RUST panicked at
'index out of bounds: the len is 1 but the index is 1' ELIXIR (ArithmeticError) bad argument in arithmetic expression GO panic: runtime error: index out of range https://gist.github.com/sporto/77db9de59f559e67b006
ELM list = [] first = List.head list res =
first * 2 main = text (toString res) This won't compile
ELM list = [] first = withDefault 1 (List.head list)
res = first * 2 main = text (toString res)
FLOW & TYPESCRIPT ARE GREAT BUT NOT AT THE SAME
S Still plenty of error that can slip through
ELM == VERY RARE TO GET RUNTIME ERRORS
GREAT, TERSE SYNTAX
PIPE OPERATOR _.(collection) .filter(filterFn) .map(mapFn) .value() collection |> filter filterFn
|> map mapFn JS ELM
CONTROLLED SIDE EFFECTS
IN JS SIDE EFFECTS CAN HAPPEN ANYWHERE ▸ Impossible to
know what side effects this have without looking ▸ Mutation, sending ajax? ▸ Makes really hard to find bugs sort(collection)
IN ELM IS OBVIOUS sort: List String -> List String
update: Action -> Model -> Effects Action
OTHER NICE THINGS ▸ Time travel debugger ▸ Enforces Semantic
versioning
IN PRACTICE
▸ Automatic compilation ▸ But doesn't play well with external
JS ELM REACTOR
ELM MAKE ▸ Compile on demand - really fast ▸
Plays nicely with existing JS App (Embedded)
USING ELM ▸ Send and receive messages to JS PORTS
JS ELM ports
NOT SO GREAT
JSON ENCODING / DECODING ▸ Bit awkward (as with any
static language really) STRUCTURING AN APP ▸ Just different, takes time to understand FEW LIBRARIES ▸ Small ecosystem e.g. router, date picker, etc
WHAT I LOVE ▸Immutable data ▸Static types (Great refactoring) ▸Safety
- No nils
WHAT I LOVE ▸Terse syntax ▸All the best practices ▸Decent
learning curve
THANKS