Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

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

1.437 visualizaciones

Publicado el

Publicado en: Software
  • Inicia sesión para ver los comentarios

"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

×