Enviar pesquisa
Carregar
"Immutable данные в JS приложениях", Дмитрий Кунин, MoscowJS 20
•
1 gostou
•
1,506 visualizações
MoscowJS
Seguir
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 45
Baixar agora
Baixar para ler offline
Recomendados
Java осень 2013 лекция 2
Java осень 2013 лекция 2
Technopark
FrontTalks: Михаил Давыдов (Яндекс), «Promise – это не больно»
FrontTalks: Михаил Давыдов (Яндекс), «Promise – это не больно»
Yandex
Основы языка R
Основы языка R
Sergey Mastitsky
Лекция 3: Бинарный поиск. Связные списки
Лекция 3: Бинарный поиск. Связные списки
Mikhail Kurnosov
Алгоритмы и структуры данных осень 2013 лекция 4
Алгоритмы и структуры данных осень 2013 лекция 4
Technopark
C++ Базовый. Занятие 06.
C++ Базовый. Занятие 06.
Igor Shkulipa
Алгоритмы и структуры данных осень 2013 лекция 1
Алгоритмы и структуры данных осень 2013 лекция 1
Technopark
Разведочный анализ данных: создание графиков в системе R
Разведочный анализ данных: создание графиков в системе R
Sergey Mastitsky
Recomendados
Java осень 2013 лекция 2
Java осень 2013 лекция 2
Technopark
FrontTalks: Михаил Давыдов (Яндекс), «Promise – это не больно»
FrontTalks: Михаил Давыдов (Яндекс), «Promise – это не больно»
Yandex
Основы языка R
Основы языка R
Sergey Mastitsky
Лекция 3: Бинарный поиск. Связные списки
Лекция 3: Бинарный поиск. Связные списки
Mikhail Kurnosov
Алгоритмы и структуры данных осень 2013 лекция 4
Алгоритмы и структуры данных осень 2013 лекция 4
Technopark
C++ Базовый. Занятие 06.
C++ Базовый. Занятие 06.
Igor Shkulipa
Алгоритмы и структуры данных осень 2013 лекция 1
Алгоритмы и структуры данных осень 2013 лекция 1
Technopark
Разведочный анализ данных: создание графиков в системе R
Разведочный анализ данных: создание графиков в системе R
Sergey Mastitsky
Java. Массивы. Многомерные массивы.
Java. Массивы. Многомерные массивы.
Unguryan Vitaliy
Алгоритмы и структуры данных весна 2014 лекция 1
Алгоритмы и структуры данных весна 2014 лекция 1
Technopark
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Mikhail Kurnosov
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Mikhail Kurnosov
C++ Базовый. Занятие 12.
C++ Базовый. Занятие 12.
Igor Shkulipa
Лекция 4: Стек. Очередь
Лекция 4: Стек. Очередь
Mikhail Kurnosov
Лекция 3: Бинарный поиск. Связные списки
Лекция 3: Бинарный поиск. Связные списки
Mikhail Kurnosov
Алгоритмы и структуры данных осень 2013 лекция 2
Алгоритмы и структуры данных осень 2013 лекция 2
Technopark
Алгоритмы и структуры данных осень 2013 лекция 3
Алгоритмы и структуры данных осень 2013 лекция 3
Technopark
Лекция 2. Красно-чёрные деревья (Red-black trees). Скошенные деревья (Splay t...
Лекция 2. Красно-чёрные деревья (Red-black trees). Скошенные деревья (Splay t...
Mikhail Kurnosov
C++ Базовый. Занятие 05.
C++ Базовый. Занятие 05.
Igor Shkulipa
Лекция №6. Деревья. Предмет "Структуры и алгоритмы обработки данных"
Лекция №6. Деревья. Предмет "Структуры и алгоритмы обработки данных"
Nikolay Grebenshikov
Лекция 10. Биномиальные кучи (Binomial heaps)
Лекция 10. Биномиальные кучи (Binomial heaps)
Mikhail Kurnosov
Лекция 7: Очереди с приоритетами. Бинарные кучи (пирамиды)
Лекция 7: Очереди с приоритетами. Бинарные кучи (пирамиды)
Mikhail Kurnosov
Алгоритмы и структуры данных весна 2014 лекция 2
Алгоритмы и структуры данных весна 2014 лекция 2
Technopark
Лекция 7. Декартовы деревья (Treaps, дучи, дерамиды)
Лекция 7. Декартовы деревья (Treaps, дучи, дерамиды)
Mikhail Kurnosov
Лекция 5. Бинарные деревья поиска
Лекция 5. Бинарные деревья поиска
Mikhail Kurnosov
Простая линейная регрессия в системе R
Простая линейная регрессия в системе R
Sergey Mastitsky
Лекция 7. Бинарные кучи. Пирамидальная сортировка
Лекция 7. Бинарные кучи. Пирамидальная сортировка
Mikhail Kurnosov
Лекция 6: Биномиальные кучи (Binomial heaps)
Лекция 6: Биномиальные кучи (Binomial heaps)
Mikhail Kurnosov
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
MoscowJS
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
MoscowJS
Mais conteúdo relacionado
Mais procurados
Java. Массивы. Многомерные массивы.
Java. Массивы. Многомерные массивы.
Unguryan Vitaliy
Алгоритмы и структуры данных весна 2014 лекция 1
Алгоритмы и структуры данных весна 2014 лекция 1
Technopark
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Mikhail Kurnosov
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Mikhail Kurnosov
C++ Базовый. Занятие 12.
C++ Базовый. Занятие 12.
Igor Shkulipa
Лекция 4: Стек. Очередь
Лекция 4: Стек. Очередь
Mikhail Kurnosov
Лекция 3: Бинарный поиск. Связные списки
Лекция 3: Бинарный поиск. Связные списки
Mikhail Kurnosov
Алгоритмы и структуры данных осень 2013 лекция 2
Алгоритмы и структуры данных осень 2013 лекция 2
Technopark
Алгоритмы и структуры данных осень 2013 лекция 3
Алгоритмы и структуры данных осень 2013 лекция 3
Technopark
Лекция 2. Красно-чёрные деревья (Red-black trees). Скошенные деревья (Splay t...
Лекция 2. Красно-чёрные деревья (Red-black trees). Скошенные деревья (Splay t...
Mikhail Kurnosov
C++ Базовый. Занятие 05.
C++ Базовый. Занятие 05.
Igor Shkulipa
Лекция №6. Деревья. Предмет "Структуры и алгоритмы обработки данных"
Лекция №6. Деревья. Предмет "Структуры и алгоритмы обработки данных"
Nikolay Grebenshikov
Лекция 10. Биномиальные кучи (Binomial heaps)
Лекция 10. Биномиальные кучи (Binomial heaps)
Mikhail Kurnosov
Лекция 7: Очереди с приоритетами. Бинарные кучи (пирамиды)
Лекция 7: Очереди с приоритетами. Бинарные кучи (пирамиды)
Mikhail Kurnosov
Алгоритмы и структуры данных весна 2014 лекция 2
Алгоритмы и структуры данных весна 2014 лекция 2
Technopark
Лекция 7. Декартовы деревья (Treaps, дучи, дерамиды)
Лекция 7. Декартовы деревья (Treaps, дучи, дерамиды)
Mikhail Kurnosov
Лекция 5. Бинарные деревья поиска
Лекция 5. Бинарные деревья поиска
Mikhail Kurnosov
Простая линейная регрессия в системе R
Простая линейная регрессия в системе R
Sergey Mastitsky
Лекция 7. Бинарные кучи. Пирамидальная сортировка
Лекция 7. Бинарные кучи. Пирамидальная сортировка
Mikhail Kurnosov
Лекция 6: Биномиальные кучи (Binomial heaps)
Лекция 6: Биномиальные кучи (Binomial heaps)
Mikhail Kurnosov
Mais procurados
(20)
Java. Массивы. Многомерные массивы.
Java. Массивы. Многомерные массивы.
Алгоритмы и структуры данных весна 2014 лекция 1
Алгоритмы и структуры данных весна 2014 лекция 1
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
Лекция 6. Фибоначчиевы кучи (Fibonacci heaps)
C++ Базовый. Занятие 12.
C++ Базовый. Занятие 12.
Лекция 4: Стек. Очередь
Лекция 4: Стек. Очередь
Лекция 3: Бинарный поиск. Связные списки
Лекция 3: Бинарный поиск. Связные списки
Алгоритмы и структуры данных осень 2013 лекция 2
Алгоритмы и структуры данных осень 2013 лекция 2
Алгоритмы и структуры данных осень 2013 лекция 3
Алгоритмы и структуры данных осень 2013 лекция 3
Лекция 2. Красно-чёрные деревья (Red-black trees). Скошенные деревья (Splay t...
Лекция 2. Красно-чёрные деревья (Red-black trees). Скошенные деревья (Splay t...
C++ Базовый. Занятие 05.
C++ Базовый. Занятие 05.
Лекция №6. Деревья. Предмет "Структуры и алгоритмы обработки данных"
Лекция №6. Деревья. Предмет "Структуры и алгоритмы обработки данных"
Лекция 10. Биномиальные кучи (Binomial heaps)
Лекция 10. Биномиальные кучи (Binomial heaps)
Лекция 7: Очереди с приоритетами. Бинарные кучи (пирамиды)
Лекция 7: Очереди с приоритетами. Бинарные кучи (пирамиды)
Алгоритмы и структуры данных весна 2014 лекция 2
Алгоритмы и структуры данных весна 2014 лекция 2
Лекция 7. Декартовы деревья (Treaps, дучи, дерамиды)
Лекция 7. Декартовы деревья (Treaps, дучи, дерамиды)
Лекция 5. Бинарные деревья поиска
Лекция 5. Бинарные деревья поиска
Простая линейная регрессия в системе R
Простая линейная регрессия в системе R
Лекция 7. Бинарные кучи. Пирамидальная сортировка
Лекция 7. Бинарные кучи. Пирамидальная сортировка
Лекция 6: Биномиальные кучи (Binomial heaps)
Лекция 6: Биномиальные кучи (Binomial heaps)
Mais de MoscowJS
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
MoscowJS
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
MoscowJS
Favicon на стероидах
Favicon на стероидах
MoscowJS
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложений
MoscowJS
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkey
MoscowJS
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA Framework
MoscowJS
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31
MoscowJS
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
MoscowJS
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
MoscowJS
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
MoscowJS
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
MoscowJS
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
MoscowJS
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
MoscowJS
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
MoscowJS
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
MoscowJS
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
MoscowJS
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
MoscowJS
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
MoscowJS
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
MoscowJS
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
MoscowJS
Mais de MoscowJS
(20)
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
Favicon на стероидах
Favicon на стероидах
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложений
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkey
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA Framework
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Immutable данные в JS приложениях", Дмитрий Кунин, MoscowJS 20
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
Baixar agora