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
Kiro Hookを Terraformで検証
ao_inoue
0
110
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか?などなど
kazzpapa3
2
120
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
300
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.4k
Recoil脱却の現状と挑戦
kirik
3
380
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.2k
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
690
みんな Kiro ってる?
r3_yamauchi
PRO
0
110
M365アカウント侵害時の初動対応
lhazy
7
4.9k
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
140
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
21
5.9k
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
270
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Become a Pro
speakerdeck
PRO
29
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Practical Orchestrator
shlominoach
189
11k
Six Lessons from altMBA
skipperchong
28
3.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cult of Friendly URLs
andyhume
79
6.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