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利活用を促進する
koh_naga
0
150
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
440
Vault meets Kubernetes
mochizuki875
0
170
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
290
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
360
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
Browser
recruitengineers
PRO
8
2.2k
AWSで推進するデータマネジメント
kawanago
0
880
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
450
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
7.3k
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
450
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How STYLIGHT went responsive
nonsquared
100
5.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Designing for Performance
lara
610
69k
How to Ace a Technical Interview
jacobian
279
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
How GitHub (no longer) Works
holman
315
140k
Gamification - CAS2011
davidbonilla
81
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Pragmatic Product Professional
lauravandoore
36
6.8k
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