1. Immutable Data
Неизменяемые данные в приложении:
что, зачем и как
логитип moscow js
Дмитрий Кунин, AT-Consulting

2. Что это такое?
2 / 45

3. Immutable + Persistent
3 / 45

4. Принцип работы
varlist=Immutable.List.of(1,2,3);
varlist2=list.push(4);
console.log(list.toJS())//[1,2,3]
console.log(Immutable.is(list,list2))//false
4 / 45

5. Принцип работы
List.prototype.push=function(value){
//Делаемклон
varclone=deepCopy(this);
//Меняемзначениевклоне
clone[clone.length]=value;
//Вовзращаемклон
returnclone;
}
5 / 45

6. varlist=[];
for(vari=0;i<1000000;i++){
list.push(i);
}
vanilla: 83 ms
varlist=mori.vector();
for(vari=0;i<1000000;i++){
mori.conj(list,i);
}
mori: 288 ms
Скорость работы
6 / 45

7. Направленный ациклический граф
7 / 45

8. 8 / 45

9. 9 / 45

10. 10 / 45

11. 11 / 45

12. 12 / 45

13. 13 / 45

14. 14 / 45

15. Готовые библиотеки
immutable.js
mori
seamless-
immutable
immutato
pim
seti
texo
ancient-oak
15 / 45

16. Зачем использовать?
16 / 45

17. Зачем использовать?
Решать проблемы!
17 / 45

18. Мутирующие объекты могут мутировать
:)))
varidentity="Федор";
...
identity="ФедорПетрович";
...
identity="Косой";
18 / 45

19. Интерфейс должен
следить за изменениями
19 / 45

20. Слушатели событий
varuserData={
name:"Федор",
online:true,
profilePic:"/url/user1.png"
};
Object.observe(userData,function(changes){
rerenderProfile();
});
userData.name="ФедорПетрович";
userData.online=false;
userData.profilePic="/newurl/user2.png";
20 / 45

21. varuserData={...};
Object.observe(userData,...);
userData.name.nickname="Косой";//Изменениянезамечены
21 / 45

22. "Грязная" проверка Грязные танцы
varuserData={
dirty:false,
_raw:{name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"},
get:function(key){
returnthis._raw[key]
},
set:function(key,newValue){
this._raw[key]=newValue;
this.dirty=true;
}
}
22 / 45

23. funtionrenderProfile(data){
if(!data.dirty)return;
data.dirty=false;
...
}
userData.set("online",true);
renderProfile(userData);//ok
23 / 45

24. funtionrenderProfile(data){
if(!data.dirty)return;
data.dirty=false;
}
funtionrenderContactItem(data){
if(!data.dirty)return;
data.dirty=false;
}
data.set("online",true);
renderProfile(userData);//ok
renderContactItem(userData);//dirty=false;norender
24 / 45

25. Сравнение Immutable объектов / списков
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"});
25 / 45

26. Сравнение Immutable объектов / списков
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"});
varuser2=user1.set("name","Косой");
console.log(Immutable.is(user1,user2));//false
26 / 45

27. Сравнение Immutable объектов / списков
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"});
varuser2=user1.set("name","Косой");
console.log(Immutable.is(user1,user2));//false
varuser3=user2.set("name","ФедорПетрович");
console.log(Immutable.is(user1,user3));//true
27 / 45

28. Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentelaman:true})
});
28 / 45

29. Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentelaman:true})
});
varuser2=user1.setIn(["skills","int"],0);
Immutable.is(user2,user1)
29 / 45

30. Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentelaman:true})
});
varuser2=user1.setIn(["skills","int"],0);
Immutable.is(user2,user1)
Immutable.is(second.get("skills"),first.get("skills"))//fal
30 / 45

31. Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentelaman:true})
});
varuser2=user1.setIn(["skills","int"],0);
Immutable.is(user2,user1)
Immutable.is(second.get("skills"),first.get("skills"))//fal
Immutable.is(second.get("category"),first.get("category"))//
31 / 45

32. Плюшки
32 / 45

33. Отсутствие побочных эффектов
functionupdateValueAndLog(updateFunction){
vardata={name:"Федор"};
updateFunction(data);
console.log(data);//?
}
33 / 45

34. Отсутствие побочных эффектов
functionupdateValueAndLog(updateFunction){
vardata={name:"Федор"};
updateFunction(data);
console.log(data);//?
}
varuser=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"});
varuserClone=user; 34 / 45

35. Практически бесплатный
undo/redo
35 / 45

36. 0:00
36 / 45

37. Как пользоваться?
37 / 45

38. Массивы
varlist1=Immutable.List.of(1,2);
assert(list1.size===2);
varlist2=list1.push(3,4,5);
assert(list2.size===5);
varlist3=list2.unshift(0);
assert(list3.size===6);
varlist4=list1.concat(list2,list3);
assert(list4.size===13);
assert(list4.get(0)===1);
38 / 45

39. Объекты
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"});
varuser2=user1.set("name","Косой");
user1.get("name");//"ФедорПетрович"
user2.get("name");//"Косой"
39 / 45

40. Принимает и возвращает обычные JS
объекты
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"});
varstat ={name:"Косой",age:37};
varuser2=user1.merge(stat);
console.log(user2.toJS())
//{name:"Косой",
// online:true,
// profilePic:"/url/user1.png",
// age:37} 40 / 45

41. Многое другое
Stack
OrderedMap
Set
OrderedSet
Record
41 / 45

42. Групповые операции
vartraits1=Immutable.List.of("communication","luck","skill"
vartraits2=traits1.withMutations(function(traits){
traits.push("dexterity").push("power").push("speed");
});
assert(traits1.size===3);
assert(traits2.size===6);
42 / 45

43. Стоит пощупать в
следующем проекте?
43 / 45

44. Стоит пощупать в
следующем проекте?
Да!
44 / 45

45. Вопросы?
Дмитрий Кунин
vcard : dkun.in
demo + libs : bit.ly/imm-js
twitter : DKunin
Skype : dkunin1985