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
230
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
320
Practically Immutable
sporto
0
170
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
100
Grunt
sporto
1
140
Safe Testing in Ruby
sporto
1
110
Go - A great language for building web applications
sporto
1
300
Other Decks in Technology
See All in Technology
web-application-security
matsuihidetoshi
0
140
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
260
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
20240416_devopsdaystokyo
kzkmaeda
1
220
On Your Data を超えていく!
hirotomotaguchi
2
650
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
500
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
370
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
本当のAWS基礎
toru_kubota
0
490
Featured
See All Featured
Become a Pro
speakerdeck
PRO
11
4.5k
Navigating Team Friction
lara
178
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Designing for Performance
lara
601
67k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Product Roadmaps are Hard
iamctodd
44
9.7k
Code Review Best Practice
trishagee
55
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
For a Future-Friendly Web
brad_frost
172
9k
GraphQLとの向き合い方2022年版
quramy
32
12k
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