SlideShare a Scribd company logo
1 of 34
Immutability & Javascript
Nadia Miętkiewicz / Visuality
Why this talk?
● immutable.js is included by default in react-boilerplate
● that redux-form bug...
that redux-form bug
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const Form = (props) => (
<form onSubmit={props.handleSubmit}>
<Field name="email" component="input" />
<button type="submit">Sign in</button>
</form>
);
export default reduxForm({
form: 'signIn',
})(Form);
import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
const Form = (props) => (
<form onSubmit={props.handleSubmit}>
<Field name="email" component="input" />
<button type="submit">Sign in</button>
</form>
);
export default reduxForm({
form: 'signIn',
})(Form);
The case for immutability
Much of what makes application development difficult is
tracking mutation and maintaining state.
Muttable
const item = {
shape: 'square',
position: 'A',
};
Muttable
const item = {
shape: 'square',
position: 'A',
};
item.position = 'B';
Immuttable
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};
Prestige (2006)
hughJackman.position = 'balcony';
Prestige (2006)
const hughJackmanClone = {
...hughJackman,
position: 'balcony',
};
Why not directly?
const item = {
shape: 'human',
position: 'A',
};
item.position = 'B';
Mutator methods
const item = {
shape: 'human',
position: 'A',
};
item.position = 'B';
Mutator methods
const item = {
shape: 'human',
position: 'A',
};
teleport(item, 'B');
function teleport(subject, position) {
subject.position = position;
}
Mutator methods
const item = {
shape: 'human',
position: 'A',
};
teleport(item, 'B');
function teleport(subject, position) {
/***********************************************/
YOLO
¯_(ツ)_/¯
/***********************************************/
}
The Fly (1986)
function teleport(subject, position) {
subject.position = position;
items = getCapsuleContents(); // should be [ ‘human’ ]
subject.shape = items.join();
}
The Fly (1986)
function teleport(subject, position) {
subject.position = position;
items = getCapsuleContents(); // is [ ‘human’, ‘fly’ ]
subject.shape = items.join();
}
What about memory
consumption?
Memory consumption
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};
Memory consumption
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};
const item3 = {
...item2,
position: 'C',
};
const item4 = {
...item,
position: 'D',
};
const item5 = {
...item,
position: 'E',
};
const item6 = {
...item2,
position: 'F',
};
Prestige (2016)
const hughJackmanClone = {
...hughJackmanOriginal,
position: 'balcony',
};
drown(hughJackmanOriginal);
Star Trek (1966 - 2005)
Persistent Data Structures
Structural Sharing
Structural Sharing
Structural Sharing
Structural Sharing
Immutable JS
Map
import { Map } from 'immutable';
const item = Map({
shape: 'square',
position: 'A',
});
const item2 = item.set('position', 'B');
const item = {
shape: 'square',
position: 'A',
};
item.position = 'B';
List
import { List } from 'immutable';
const items = List([
'apple',
'banana',
]);
const items2 = item.push('orange');
const items = [
'apple',
'banana',
];
items.push('orange');
make immutable
import { fromJS } from 'immutable';
const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } });
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ] } } }
make mutable
import { Map, List } from 'immutable';
const deep = Map({ a: 1, b: 2, c: List([ 3, 4, 5 ]) });
console.log(deep.toObject()); // { a: 1, b: 2, c: List [ 3, 4, 5 ] }
console.log(deep.toArray()); // [ 1, 2, List [ 3, 4, 5 ] ]
console.log(deep.toJS()); // { a: 1, b: 2, c: [ 3, 4, 5 ] }
toJS() controversy
Debugging
Where to use?
● For the entire Redux state tree
● Your selectors should return Immutable.JS objects
● Never use toJS() in mapStateToProps
● Always in Smart Components (containers)
● Never in Dumb Components
● Wrap Dumb Components in a HOC to convert the props
Thank You!

More Related Content

What's hot

Practical Class 12th (c++programs+sql queries and output)
Practical Class 12th (c++programs+sql queries and output) Practical Class 12th (c++programs+sql queries and output)
Practical Class 12th (c++programs+sql queries and output) Aman Deep
 
Types of Constructor in C++
Types of Constructor in C++Types of Constructor in C++
Types of Constructor in C++Bhavik Vashi
 
Super TypeScript II Turbo - FP Remix (NG Conf 2017)
Super TypeScript II Turbo - FP Remix (NG Conf 2017)Super TypeScript II Turbo - FP Remix (NG Conf 2017)
Super TypeScript II Turbo - FP Remix (NG Conf 2017)Sean May
 
Check the output of the following code then recode it to eliminate fu
 Check the output of the following code then recode it to eliminate fu Check the output of the following code then recode it to eliminate fu
Check the output of the following code then recode it to eliminate fulicservernoida
 
C++ project
C++ projectC++ project
C++ projectSonu S S
 
Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...
Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...
Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...ssuserd6b1fd
 
Lec 7 28_aug [compatibility mode]
Lec 7 28_aug [compatibility mode]Lec 7 28_aug [compatibility mode]
Lec 7 28_aug [compatibility mode]Palak Sanghani
 
Introduction to Computer and Programing - Lecture 04
Introduction to Computer and Programing - Lecture 04Introduction to Computer and Programing - Lecture 04
Introduction to Computer and Programing - Lecture 04hassaanciit
 
The Ring programming language version 1.5.3 book - Part 188 of 194
The Ring programming language version 1.5.3 book - Part 188 of 194The Ring programming language version 1.5.3 book - Part 188 of 194
The Ring programming language version 1.5.3 book - Part 188 of 194Mahmoud Samir Fayed
 
programming in C++ report
programming in C++ reportprogramming in C++ report
programming in C++ reportvikram mahendra
 
FUNCTIONS IN PYTHON[RANDOM FUNCTION]
FUNCTIONS IN PYTHON[RANDOM FUNCTION]FUNCTIONS IN PYTHON[RANDOM FUNCTION]
FUNCTIONS IN PYTHON[RANDOM FUNCTION]vikram mahendra
 

What's hot (18)

Practical Class 12th (c++programs+sql queries and output)
Practical Class 12th (c++programs+sql queries and output) Practical Class 12th (c++programs+sql queries and output)
Practical Class 12th (c++programs+sql queries and output)
 
Types of Constructor in C++
Types of Constructor in C++Types of Constructor in C++
Types of Constructor in C++
 
C # (2)
C # (2)C # (2)
C # (2)
 
Super TypeScript II Turbo - FP Remix (NG Conf 2017)
Super TypeScript II Turbo - FP Remix (NG Conf 2017)Super TypeScript II Turbo - FP Remix (NG Conf 2017)
Super TypeScript II Turbo - FP Remix (NG Conf 2017)
 
Check the output of the following code then recode it to eliminate fu
 Check the output of the following code then recode it to eliminate fu Check the output of the following code then recode it to eliminate fu
Check the output of the following code then recode it to eliminate fu
 
C++ project
C++ projectC++ project
C++ project
 
Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...
Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...
Notes for C++ Programming / Object Oriented C++ Programming for MCA, BCA and ...
 
Lec 7 28_aug [compatibility mode]
Lec 7 28_aug [compatibility mode]Lec 7 28_aug [compatibility mode]
Lec 7 28_aug [compatibility mode]
 
C++ file
C++ fileC++ file
C++ file
 
Writing Macros
Writing MacrosWriting Macros
Writing Macros
 
C++ TUTORIAL 2
C++ TUTORIAL 2C++ TUTORIAL 2
C++ TUTORIAL 2
 
Introduction to Computer and Programing - Lecture 04
Introduction to Computer and Programing - Lecture 04Introduction to Computer and Programing - Lecture 04
Introduction to Computer and Programing - Lecture 04
 
Java(Access Modifiers)
Java(Access Modifiers)Java(Access Modifiers)
Java(Access Modifiers)
 
C programs
C programsC programs
C programs
 
The Ring programming language version 1.5.3 book - Part 188 of 194
The Ring programming language version 1.5.3 book - Part 188 of 194The Ring programming language version 1.5.3 book - Part 188 of 194
The Ring programming language version 1.5.3 book - Part 188 of 194
 
Functional DDD
Functional DDDFunctional DDD
Functional DDD
 
programming in C++ report
programming in C++ reportprogramming in C++ report
programming in C++ report
 
FUNCTIONS IN PYTHON[RANDOM FUNCTION]
FUNCTIONS IN PYTHON[RANDOM FUNCTION]FUNCTIONS IN PYTHON[RANDOM FUNCTION]
FUNCTIONS IN PYTHON[RANDOM FUNCTION]
 

Similar to Immutability and Javascript - Nadia Miętkiewicz

Angular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app exampleAngular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app exampleAlexey Frolov
 
Higher-Order Components — Ilya Gelman
Higher-Order Components — Ilya GelmanHigher-Order Components — Ilya Gelman
Higher-Order Components — Ilya Gelman500Tech
 
What is new in sulu 2.0
What is new in sulu 2.0What is new in sulu 2.0
What is new in sulu 2.0danrot
 
Taming forms with React
Taming forms with ReactTaming forms with React
Taming forms with ReactGreeceJS
 
PROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGE
PROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGEPROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGE
PROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGEyash production
 
Modern Web Developement
Modern Web DevelopementModern Web Developement
Modern Web Developementpeychevi
 
Introductionandgreetings
IntroductionandgreetingsIntroductionandgreetings
IntroductionandgreetingsPozz ZaRat
 
Creating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdfCreating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdfShaiAlmog1
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법Jeado Ko
 
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdfImport java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdfapexcomputer54
 
This is Java,I am currently stumped on how to add a scoreboard for.pdf
This is Java,I am currently stumped on how to add a scoreboard for.pdfThis is Java,I am currently stumped on how to add a scoreboard for.pdf
This is Java,I am currently stumped on how to add a scoreboard for.pdfanjandavid
 
I dont know what is wrong with this roulette program I cant seem.pdf
I dont know what is wrong with this roulette program I cant seem.pdfI dont know what is wrong with this roulette program I cant seem.pdf
I dont know what is wrong with this roulette program I cant seem.pdfarchanaemporium
 
The Human Linter — Ilya Gelman
The Human Linter — Ilya GelmanThe Human Linter — Ilya Gelman
The Human Linter — Ilya Gelman500Tech
 
The Human Linter
The Human LinterThe Human Linter
The Human LinterIlya Gelman
 
Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Tomasz Dziuda
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2 Apptension
 
Higher Order Components and Render Props
Higher Order Components and Render PropsHigher Order Components and Render Props
Higher Order Components and Render PropsNitish Phanse
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montageKris Kowal
 

Similar to Immutability and Javascript - Nadia Miętkiewicz (20)

Angular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app exampleAngular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app example
 
Higher-Order Components — Ilya Gelman
Higher-Order Components — Ilya GelmanHigher-Order Components — Ilya Gelman
Higher-Order Components — Ilya Gelman
 
What is new in sulu 2.0
What is new in sulu 2.0What is new in sulu 2.0
What is new in sulu 2.0
 
Taming forms with React
Taming forms with ReactTaming forms with React
Taming forms with React
 
Ngrx
NgrxNgrx
Ngrx
 
PROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGE
PROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGEPROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGE
PROGRAMING IN JAVA 4TH SEM DIGVIJAY COLLAGE
 
Modern Web Developement
Modern Web DevelopementModern Web Developement
Modern Web Developement
 
Introductionandgreetings
IntroductionandgreetingsIntroductionandgreetings
Introductionandgreetings
 
Fact, Fiction, and FP
Fact, Fiction, and FPFact, Fiction, and FP
Fact, Fiction, and FP
 
Creating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdfCreating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdf
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법
 
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdfImport java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
 
This is Java,I am currently stumped on how to add a scoreboard for.pdf
This is Java,I am currently stumped on how to add a scoreboard for.pdfThis is Java,I am currently stumped on how to add a scoreboard for.pdf
This is Java,I am currently stumped on how to add a scoreboard for.pdf
 
I dont know what is wrong with this roulette program I cant seem.pdf
I dont know what is wrong with this roulette program I cant seem.pdfI dont know what is wrong with this roulette program I cant seem.pdf
I dont know what is wrong with this roulette program I cant seem.pdf
 
The Human Linter — Ilya Gelman
The Human Linter — Ilya GelmanThe Human Linter — Ilya Gelman
The Human Linter — Ilya Gelman
 
The Human Linter
The Human LinterThe Human Linter
The Human Linter
 
Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Introduction to ECMAScript 2015
Introduction to ECMAScript 2015
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
 
Higher Order Components and Render Props
Higher Order Components and Render PropsHigher Order Components and Render Props
Higher Order Components and Render Props
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montage
 

More from Visuality

3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutes3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutesVisuality
 
Czego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testówCzego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testówVisuality
 
Introduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on RailsIntroduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on RailsVisuality
 
Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?Visuality
 
Introduction to Event Storming
Introduction to Event StormingIntroduction to Event Storming
Introduction to Event StormingVisuality
 
Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?Visuality
 
SVG Overview - How To Draw, Use and Animate
SVG Overview - How To Draw, Use and AnimateSVG Overview - How To Draw, Use and Animate
SVG Overview - How To Draw, Use and AnimateVisuality
 
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...Visuality
 
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał ŁęcickiHow to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał ŁęcickiVisuality
 
What is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak AybarWhat is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak AybarVisuality
 
Do you really need to reload?
Do you really need to reload?Do you really need to reload?
Do you really need to reload?Visuality
 
How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)Visuality
 
Fantastic stresses and where to find them
Fantastic stresses and where to find themFantastic stresses and where to find them
Fantastic stresses and where to find themVisuality
 
Fuzzy search in Ruby
Fuzzy search in RubyFuzzy search in Ruby
Fuzzy search in RubyVisuality
 
Rfc process in visuality
Rfc process in visualityRfc process in visuality
Rfc process in visualityVisuality
 
GraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basicsGraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basicsVisuality
 
Consumer Driven Contracts
Consumer Driven ContractsConsumer Driven Contracts
Consumer Driven ContractsVisuality
 
How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?Visuality
 
React Native - Short introduction
React Native - Short introductionReact Native - Short introduction
React Native - Short introductionVisuality
 
Risk in project management
Risk in project managementRisk in project management
Risk in project managementVisuality
 

More from Visuality (20)

3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutes3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutes
 
Czego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testówCzego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testów
 
Introduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on RailsIntroduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on Rails
 
Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?
 
Introduction to Event Storming
Introduction to Event StormingIntroduction to Event Storming
Introduction to Event Storming
 
Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?
 
SVG Overview - How To Draw, Use and Animate
SVG Overview - How To Draw, Use and AnimateSVG Overview - How To Draw, Use and Animate
SVG Overview - How To Draw, Use and Animate
 
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
 
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał ŁęcickiHow to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
 
What is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak AybarWhat is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak Aybar
 
Do you really need to reload?
Do you really need to reload?Do you really need to reload?
Do you really need to reload?
 
How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)
 
Fantastic stresses and where to find them
Fantastic stresses and where to find themFantastic stresses and where to find them
Fantastic stresses and where to find them
 
Fuzzy search in Ruby
Fuzzy search in RubyFuzzy search in Ruby
Fuzzy search in Ruby
 
Rfc process in visuality
Rfc process in visualityRfc process in visuality
Rfc process in visuality
 
GraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basicsGraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basics
 
Consumer Driven Contracts
Consumer Driven ContractsConsumer Driven Contracts
Consumer Driven Contracts
 
How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?
 
React Native - Short introduction
React Native - Short introductionReact Native - Short introduction
React Native - Short introduction
 
Risk in project management
Risk in project managementRisk in project management
Risk in project management
 

Recently uploaded

DAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptxDAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptxFamilyWorshipCenterD
 
Databricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdfDatabricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdfSkillCertProExams
 
Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.bazilnaeem7
 
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdfACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdfKinben Innovation Private Limited
 
STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...
STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...
STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...Sosiaali- ja terveysministeriö / yleiset
 
ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024SkillCertProExams
 
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdfMicrosoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdfSkillCertProExams
 
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docxThe Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docxMogul Press
 
The Concession of Asaba International Airport: Balancing Politics and Policy ...
The Concession of Asaba International Airport: Balancing Politics and Policy ...The Concession of Asaba International Airport: Balancing Politics and Policy ...
The Concession of Asaba International Airport: Balancing Politics and Policy ...Kayode Fayemi
 
2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptx2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptxnitishjain2015
 
SaaStr Workshop Wednesday with CEO of Guru
SaaStr Workshop Wednesday with CEO of GuruSaaStr Workshop Wednesday with CEO of Guru
SaaStr Workshop Wednesday with CEO of Gurusaastr
 
2024 mega trends for the digital workplace - FINAL.pdf
2024 mega trends for the digital workplace - FINAL.pdf2024 mega trends for the digital workplace - FINAL.pdf
2024 mega trends for the digital workplace - FINAL.pdfNancy Goebel
 
Understanding Poverty: A Community Questionnaire
Understanding Poverty: A Community QuestionnaireUnderstanding Poverty: A Community Questionnaire
Understanding Poverty: A Community Questionnairebazilnaeem7
 
TSM unit 5 Toxicokinetics seminar by Ansari Aashif Raza.pptx
TSM unit 5 Toxicokinetics seminar by  Ansari Aashif Raza.pptxTSM unit 5 Toxicokinetics seminar by  Ansari Aashif Raza.pptx
TSM unit 5 Toxicokinetics seminar by Ansari Aashif Raza.pptxAnsari Aashif Raza Mohd Imtiyaz
 

Recently uploaded (14)

DAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptxDAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptx
 
Databricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdfDatabricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdf
 
Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.
 
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdfACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
 
STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...
STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...
STM valmiusseminaari 26-04-2024 PUUMALAINEN Ajankohtaista kansainvälisestä yh...
 
ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024
 
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdfMicrosoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
 
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docxThe Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
 
The Concession of Asaba International Airport: Balancing Politics and Policy ...
The Concession of Asaba International Airport: Balancing Politics and Policy ...The Concession of Asaba International Airport: Balancing Politics and Policy ...
The Concession of Asaba International Airport: Balancing Politics and Policy ...
 
2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptx2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptx
 
SaaStr Workshop Wednesday with CEO of Guru
SaaStr Workshop Wednesday with CEO of GuruSaaStr Workshop Wednesday with CEO of Guru
SaaStr Workshop Wednesday with CEO of Guru
 
2024 mega trends for the digital workplace - FINAL.pdf
2024 mega trends for the digital workplace - FINAL.pdf2024 mega trends for the digital workplace - FINAL.pdf
2024 mega trends for the digital workplace - FINAL.pdf
 
Understanding Poverty: A Community Questionnaire
Understanding Poverty: A Community QuestionnaireUnderstanding Poverty: A Community Questionnaire
Understanding Poverty: A Community Questionnaire
 
TSM unit 5 Toxicokinetics seminar by Ansari Aashif Raza.pptx
TSM unit 5 Toxicokinetics seminar by  Ansari Aashif Raza.pptxTSM unit 5 Toxicokinetics seminar by  Ansari Aashif Raza.pptx
TSM unit 5 Toxicokinetics seminar by Ansari Aashif Raza.pptx
 

Immutability and Javascript - Nadia Miętkiewicz

  • 1. Immutability & Javascript Nadia Miętkiewicz / Visuality
  • 2. Why this talk? ● immutable.js is included by default in react-boilerplate ● that redux-form bug...
  • 3. that redux-form bug import React from 'react'; import { Field, reduxForm } from 'redux-form'; const Form = (props) => ( <form onSubmit={props.handleSubmit}> <Field name="email" component="input" /> <button type="submit">Sign in</button> </form> ); export default reduxForm({ form: 'signIn', })(Form); import React from 'react'; import { Field, reduxForm } from 'redux-form/immutable'; const Form = (props) => ( <form onSubmit={props.handleSubmit}> <Field name="email" component="input" /> <button type="submit">Sign in</button> </form> ); export default reduxForm({ form: 'signIn', })(Form);
  • 4. The case for immutability Much of what makes application development difficult is tracking mutation and maintaining state.
  • 5. Muttable const item = { shape: 'square', position: 'A', };
  • 6. Muttable const item = { shape: 'square', position: 'A', }; item.position = 'B';
  • 7. Immuttable const item = { shape: 'square', position: 'A', }; const item2 = { ...item, position: 'B', };
  • 9. Prestige (2006) const hughJackmanClone = { ...hughJackman, position: 'balcony', };
  • 11. const item = { shape: 'human', position: 'A', }; item.position = 'B'; Mutator methods
  • 12. const item = { shape: 'human', position: 'A', }; item.position = 'B'; Mutator methods const item = { shape: 'human', position: 'A', }; teleport(item, 'B'); function teleport(subject, position) { subject.position = position; }
  • 13. Mutator methods const item = { shape: 'human', position: 'A', }; teleport(item, 'B'); function teleport(subject, position) { /***********************************************/ YOLO ¯_(ツ)_/¯ /***********************************************/ }
  • 14. The Fly (1986) function teleport(subject, position) { subject.position = position; items = getCapsuleContents(); // should be [ ‘human’ ] subject.shape = items.join(); }
  • 15. The Fly (1986) function teleport(subject, position) { subject.position = position; items = getCapsuleContents(); // is [ ‘human’, ‘fly’ ] subject.shape = items.join(); }
  • 17. Memory consumption const item = { shape: 'square', position: 'A', }; const item2 = { ...item, position: 'B', };
  • 18. Memory consumption const item = { shape: 'square', position: 'A', }; const item2 = { ...item, position: 'B', }; const item3 = { ...item2, position: 'C', }; const item4 = { ...item, position: 'D', }; const item5 = { ...item, position: 'E', }; const item6 = { ...item2, position: 'F', };
  • 19. Prestige (2016) const hughJackmanClone = { ...hughJackmanOriginal, position: 'balcony', }; drown(hughJackmanOriginal);
  • 20. Star Trek (1966 - 2005)
  • 27. Map import { Map } from 'immutable'; const item = Map({ shape: 'square', position: 'A', }); const item2 = item.set('position', 'B'); const item = { shape: 'square', position: 'A', }; item.position = 'B';
  • 28. List import { List } from 'immutable'; const items = List([ 'apple', 'banana', ]); const items2 = item.push('orange'); const items = [ 'apple', 'banana', ]; items.push('orange');
  • 29. make immutable import { fromJS } from 'immutable'; const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } }); // Map { a: Map { b: Map { c: List [ 3, 4, 5 ] } } }
  • 30. make mutable import { Map, List } from 'immutable'; const deep = Map({ a: 1, b: 2, c: List([ 3, 4, 5 ]) }); console.log(deep.toObject()); // { a: 1, b: 2, c: List [ 3, 4, 5 ] } console.log(deep.toArray()); // [ 1, 2, List [ 3, 4, 5 ] ] console.log(deep.toJS()); // { a: 1, b: 2, c: [ 3, 4, 5 ] }
  • 33. Where to use? ● For the entire Redux state tree ● Your selectors should return Immutable.JS objects ● Never use toJS() in mapStateToProps ● Always in Smart Components (containers) ● Never in Dumb Components ● Wrap Dumb Components in a HOC to convert the props