O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Immutable Data
Неизменяемые данные в приложении:
что, зачем и как
логитип moscow js
Дмитрий Кунин, AT-Consulting
Что это такое?
2 / 45
Immutable + Persistent
3 / 45
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 45 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

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

Anúncio

Mais de MoscowJS (20)

Mais recentes (15)

Anúncio

"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

×