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
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
430
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
860
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
220
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
370
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.4k
AWSで始める実践Dagster入門
kitagawaz
1
570
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.9k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
360
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
190
Featured
See All Featured
A better future with KSS
kneath
239
17k
Six Lessons from altMBA
skipperchong
28
4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Faster Mobile Websites
deanohume
309
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
BBQ
matthewcrist
89
9.8k
Embracing the Ebb and Flow
colly
87
4.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Code Reviewing Like a Champion
maltzj
525
40k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
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