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
170
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
170
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
320
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
110
Grunt
sporto
1
150
Safe Testing in Ruby
sporto
1
120
Go - A great language for building web applications
sporto
1
310
Other Decks in Technology
See All in Technology
学術機関におけるID連携とOpenID Connect
fujie
0
300
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
200
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
グイグイ系QAマネージャーの仕事
sadonosake
0
350
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
150
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.4k
Next.js のページ遷移を全力で止める
ypresto
8
3.5k
JTCや セキュリティチェックリストが夢の跡
nikinusu
1
760
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
0
160
『GRANBLUE FANTASY: Relink』クオリティと物量の両立に挑戦したフェイシャルアニメーション事例 ~カットシーンからランタイムまで~
cygames
0
110
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Being A Developer After 40
akosma
84
590k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
It's Worth the Effort
3n
182
27k
BBQ
matthewcrist
83
9.2k
GraphQLとの向き合い方2022年版
quramy
43
13k
Speed Design
sergeychernyshev
22
430
We Have a Design System, Now What?
morganepeng
48
7.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
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