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
180
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
180
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
220
Lesson learnt building Single Page Application
sporto
0
120
Grunt
sporto
1
180
Safe Testing in Ruby
sporto
1
130
Go - A great language for building web applications
sporto
1
340
Other Decks in Technology
See All in Technology
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
3.4k
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
990
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
フィンテック養成勉強会#54
finengine
0
180
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
180
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
350
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
230
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Writing Fast Ruby
sferik
628
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Balancing Empowerment & Direction
lara
1
380
BBQ
matthewcrist
89
9.7k
The Invisible Side of Design
smashingmag
300
51k
Become a Pro
speakerdeck
PRO
28
5.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Practical Orchestrator
shlominoach
188
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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