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
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
370
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
1.3k
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
250
旅で応援する✈️ NEWTが目指すコミュニティ支援とあたらしい旅行 / New Travel: Supporting by NEWT on Your Journey
mii3king
0
120
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
120
AI時代、“平均値”ではいられない
uhyo
4
1.1k
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
110
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
390
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
110
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.3k
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
190
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Fireside Chat
paigeccino
40
3.7k
Speed Design
sergeychernyshev
32
1.2k
Music & Morning Musume
bryan
46
6.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
The World Runs on Bad Software
bkeepers
PRO
72
11k
For a Future-Friendly Web
brad_frost
180
10k
Code Reviewing Like a Champion
maltzj
526
40k
RailsConf 2023
tenderlove
30
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
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