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
Practically Immutable
Search
sporto
March 28, 2015
Technology
0
190
Practically Immutable
Immutable data in practice in JavaScript
sporto
March 28, 2015
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
180
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
330
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
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
470
slog.Handlerのよくある実装ミス
sakiengineer
4
270
Android Audio: Beyond Winning On It
atsushieno
0
880
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
250
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
170
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
210
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
440
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
820
The Art of Programming - Codeland 2020
erikaheidi
56
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
Rails Girls Zürich Keynote
gr2m
95
14k
It's Worth the Effort
3n
187
28k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Designing for Performance
lara
610
69k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Transcript
practically immutable ! Immutable data in JS @sebasporto
I build CRUD apps, mostly
What? • Something that cannot change • Once created stays
the same
var array1 = [1, 2].immutable var array2 = array1.push(3) !
array1 //=> [1, 2] array2 //=> [1, 2, 3]
WHY?
# 1 no side effects
var orders = [1, 2]; processOrders(orders); what is orders after
this?
Predictability Store Comp Comp Data Data wants to sort data
wants to transform data doesn't want its data to be modified externally
Enforces uni directional data flow React + Flux Store Comp
Action
# 2 Easier workflows
Undo add(item) { history.push(items) items = items.push(item) } undo() {
items = history.pop() }
Dirty objects Get record from store Clone record Edit record
Save Replace original Yes Discard No
Dirty objects Get record from store Edit record Save Replace
original Yes Discard No
HOW?
clojurescript immutable data for free but this talk is about
plain JS
• In JS strings and numbers are immutable (not the
case in every language) • Arrays, objects are not - so we need help here • JS and immutable data => opposing forces
immutable.js • Great for simple collections • [1, 2, ...]
['a', 'b' ...] • Caveats for collections with objects https://github.com/facebook/immutable-js
Immutable.js var record = {label: 'Sam'}; var list = Immutable.List([record]);
! console.log(list.get(0).label) // => 'Sam' http://jsbin.com/dilupu/1/embed?js,console record.label = 'Biff' ! console.log(list.get(0).label) // => 'Biff' Opps!
immutable.js To be fair: Immutable.js can do the right thing
if you learn it really well Immutable.js != Just works™
Seamless immutable • Fixes Immutable.js issues with deep objects https://github.com/rtfeldman/seamless-immutable
var record = {label: 'Sam'}; var list = Immutable([record]); !
console.log(list[0].label) // => 'Sam' ! record.label = 'Biff' ! console.log(list[0].label) // => 'Sam' http://jsbin.com/fayupu/1/edit?js,console Seamless immutable
imm https://github.com/sporto/imm • Build on top of seamless-immutable • Nice
CRUD API
imm list = list.add(record) list = list.replace(record) list = list.remove(id)
! record = list.get(id)
in Conclusion
Immutable data can make your application more robust
but play a lot with your chosen lib, understand
the caveats
Thanks