Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Immutable Data
Неизменяемые данные в приложении:
что, зачем и как
логитип moscow js
Дмитрий Кунин, AT-Consulting
Что это такое?
2 / 45
Immutable + Persistent
3 / 45
Принцип работы
varlist=Immutable.List.of(1,2,3);
varlist2=list.push(4);
console.log(list.toJS())//[1,2,3]
console.log(Immu...
Принцип работы
List.prototype.push=function(value){
//Делаемклон
varclone=deepCopy(this);
//Меняемзначениевклоне
clone[clo...
varlist=[];
for(vari=0;i<1000000;i++){
list.push(i);
}
vanilla: 83 ms
varlist=mori.vector();
for(vari=0;i<1000000;i++){
mo...
Направленный ациклический граф
7 / 45
8 / 45
9 / 45
10 / 45
11 / 45
12 / 45
13 / 45
14 / 45
Готовые библиотеки
immutable.js
mori
seamless-
immutable
immutato
pim
seti
texo
ancient-oak
15 / 45
Зачем использовать?
16 / 45
Зачем использовать?
Решать проблемы!
17 / 45
Мутирующие объекты могут мутировать
:)))
varidentity="Федор";
...
identity="ФедорПетрович";
...
identity="Косой";
18 / 45
Интерфейс должен
следить за изменениями
19 / 45
Слушатели событий
varuserData={
name:"Федор",
online:true,
profilePic:"/url/user1.png"
};
Object.observe(userData,function...
varuserData={...};
Object.observe(userData,...);
userData.name.nickname="Косой";//Изменениянезамечены
21 / 45
"Грязная" проверка Грязные танцы
varuserData={
dirty:false,
_raw:{name:"ФедорПетрович",
online:true,
profilePic:"/url/user...
funtionrenderProfile(data){
if(!data.dirty)return;
data.dirty=false;
...
}
userData.set("online",true);
renderProfile(user...
funtionrenderProfile(data){
if(!data.dirty)return;
data.dirty=false;
}
funtionrenderContactItem(data){
if(!data.dirty)retu...
Сравнение Immutable объектов / списков
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1....
Сравнение Immutable объектов / списков
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1....
Сравнение Immutable объектов / списков
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1....
Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentela...
Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentela...
Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentela...
Глубокое сравнение
varuser1=Immutable.Map({
skills:Immutable.Map({str:23,int:18,luck:99}),
category:Immutable.Map({gentela...
Плюшки
32 / 45
Отсутствие побочных эффектов
functionupdateValueAndLog(updateFunction){
vardata={name:"Федор"};
updateFunction(data);
cons...
Отсутствие побочных эффектов
functionupdateValueAndLog(updateFunction){
vardata={name:"Федор"};
updateFunction(data);
cons...
Практически бесплатный
undo/redo
35 / 45
0:00
36 / 45
Как пользоваться?
37 / 45
Массивы
varlist1=Immutable.List.of(1,2);
assert(list1.size===2);
varlist2=list1.push(3,4,5);
assert(list2.size===5);
varli...
Объекты
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/user1.png"});
varuser2=user1.set("nam...
Принимает и возвращает обычные JS
объекты
varuser1=Immutable.Map({
name:"ФедорПетрович",
online:true,
profilePic:"/url/use...
Многое другое
Stack
OrderedMap
Set
OrderedSet
Record
41 / 45
Групповые операции
vartraits1=Immutable.List.of("communication","luck","skill"
vartraits2=traits1.withMutations(function(t...
Стоит пощупать в
следующем проекте?
43 / 45
Стоит пощупать в
следующем проекте?
Да!
44 / 45
Вопросы?
Дмитрий Кунин
vcard : dkun.in
demo + libs : bit.ly/imm-js
twitter : DKunin
Skype : dkunin1985
Nächste SlideShare
Wird geladen in …5
×

"Immutable данные в JS приложениях", Дмитрий Кунин, MoscowJS 20

1.359 Aufrufe

Veröffentlicht am

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

"Immutable данные в JS приложениях", Дмитрий Кунин, MoscowJS 20

  1. 1. Immutable Data Неизменяемые данные в приложении: что, зачем и как логитип moscow js Дмитрий Кунин, AT-Consulting
  2. 2. Что это такое? 2 / 45
  3. 3. Immutable + Persistent 3 / 45
  4. 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. 5. Принцип работы List.prototype.push=function(value){ //Делаемклон varclone=deepCopy(this); //Меняемзначениевклоне clone[clone.length]=value; //Вовзращаемклон returnclone; } 5 / 45
  6. 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. Направленный ациклический граф 7 / 45
  8. 8. 8 / 45
  9. 9. 9 / 45
  10. 10. 10 / 45
  11. 11. 11 / 45
  12. 12. 12 / 45
  13. 13. 13 / 45
  14. 14. 14 / 45
  15. 15. Готовые библиотеки immutable.js mori seamless- immutable immutato pim seti texo ancient-oak 15 / 45
  16. 16. Зачем использовать? 16 / 45
  17. 17. Зачем использовать? Решать проблемы! 17 / 45
  18. 18. Мутирующие объекты могут мутировать :))) varidentity="Федор"; ... identity="ФедорПетрович"; ... identity="Косой"; 18 / 45
  19. 19. Интерфейс должен следить за изменениями 19 / 45
  20. 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. 21. varuserData={...}; Object.observe(userData,...); userData.name.nickname="Косой";//Изменениянезамечены 21 / 45
  22. 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. 23. funtionrenderProfile(data){ if(!data.dirty)return; data.dirty=false; ... } userData.set("online",true); renderProfile(userData);//ok 23 / 45
  24. 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. 25. Сравнение Immutable объектов / списков varuser1=Immutable.Map({ name:"ФедорПетрович", online:true, profilePic:"/url/user1.png"}); 25 / 45
  26. 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. 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. 28. Глубокое сравнение varuser1=Immutable.Map({ skills:Immutable.Map({str:23,int:18,luck:99}), category:Immutable.Map({gentelaman:true}) }); 28 / 45
  29. 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. 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. 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. Плюшки 32 / 45
  33. 33. Отсутствие побочных эффектов functionupdateValueAndLog(updateFunction){ vardata={name:"Федор"}; updateFunction(data); console.log(data);//? } 33 / 45
  34. 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. 35. Практически бесплатный undo/redo 35 / 45
  36. 36. 0:00 36 / 45
  37. 37. Как пользоваться? 37 / 45
  38. 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. 39. Объекты varuser1=Immutable.Map({ name:"ФедорПетрович", online:true, profilePic:"/url/user1.png"}); varuser2=user1.set("name","Косой"); user1.get("name");//"ФедорПетрович" user2.get("name");//"Косой" 39 / 45
  40. 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. 41. Многое другое Stack OrderedMap Set OrderedSet Record 41 / 45
  42. 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. Стоит пощупать в следующем проекте? 43 / 45
  44. 44. Стоит пощупать в следующем проекте? Да! 44 / 45
  45. 45. Вопросы? Дмитрий Кунин vcard : dkun.in demo + libs : bit.ly/imm-js twitter : DKunin Skype : dkunin1985

×