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
190
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駆動開発に向けた新しいエンジニアマインドセット
kazue
0
200
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
270
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.2k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
170
Language Update: Java
skrb
2
260
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
200
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
9
4.2k
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
540
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
280
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
140
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
2.8k
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
800
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How to train your dragon (web standard)
notwaldorf
96
6.2k
GitHub's CSS Performance
jonrohan
1032
460k
A better future with KSS
kneath
239
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Speed Design
sergeychernyshev
32
1.1k
Producing Creativity
orderedlist
PRO
347
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Optimizing for Happiness
mojombo
379
70k
Music & Morning Musume
bryan
46
6.8k
Rails Girls Zürich Keynote
gr2m
95
14k
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