Владимир Дашукевич

Transcript

3. Вопросы на сегодня: 1. Для чего фронтенд программисту нужно знать структуры данных и алгоритмы? 2
4. Disclaimer 3
12. Структура данных — программная единица, позволяющая хранить и обрабатывать множество однотипных и/или логически связанных данных в вычислительной технике. Wikipedia Алгори́тм — набор инструкций, описывающих порядок действий исполнителя для достижения некоторого результата. Wikipedia “ “ 11
17. Структуры данных помогают решать правильно и эффективно поставленные задачи, путем наилучшего представления информации под использующиеся алгоритмы. Дашукевич Владимир “ 16
18. Дерево 17
20. Типы деревьев: 1. Красно-чёрное дерево 2. Куча 3. Префиксное дерево 4. B-дерево 5. R-дерево 6. АВЛ-дерево 7. и другие 19
21. DOM дерево 20
23. Операция Сложность Метод Добавление O(1) insertBefore, appendChild, append, prepend, after, before Удаление O(1) removeChild, remove, replaceWith Поиск O(1)/O(n) querySelector, querySelectorAll, getElementById, getElementsByClassName 22
24. Поиск по DOM дереву: 1. Поиск в ширину 2. Поиск в глубину 23
25. Поиск в ширину: 24
26. Поиск в глубину: 25
27. Изменения DOM 26
29. React/Preact/Inferno 28
30. Virtual DOM 29
32. Поиск отличий 31
35. Старое дерево Новое дерево <li>Первый</li> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Третий</li> 34
36. Старое дерево Новое дерево <li>Первый</li> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Третий</li> 35
37. Старое дерево Новое дерево Результат <li>Первый</li> <li>Первый</li> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Третий</li> 36
38. Старое дерево Новое дерево Результат <li>Первый</li> <li>Первый</li> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Третий</li> <li>Третий</li> 37
39. Старое дерево Новое дерево Результат <li>Первый</li> <li>Первый</li> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Третий</li> <li>Третий</li> <li>Третий</li> 38
40. Старое дерево Новое дерево <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key3">Третий</li> 39
41. Старое дерево Новое дерево <li key=" key1 ">Первый</li> <li key=" key1 ">Первый</li> <li key=" key2 ">Второй</li> <li key=" key3 ">Третий</li> <li key=" key3 ">Третий</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 40
42. Старое дерево Новое дерево Результат <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key3">Третий</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 41
43. Старое дерево Новое дерево Результат <li key="key1">Первый</li> <li key=" key1 ">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key3">Третий</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 42
44. Старое дерево Новое дерево Результат <li key="key1">Первый</li> <li key=" key1 ">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key3">Третий</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 43
45. Старое дерево Новое дерево Результат <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key=" key3 ">Третий</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key3">Третий</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 44
46. Старое дерево Новое дерево Результат <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key=" key3 ">Третий</li> <li key="key3">Третий</li> <li key="key3">Третий</li> <li key="key2">Второй</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 45
47. Старое дерево Новое дерево Результат <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key3">Третий</li> <li key="key3">Третий</li> <li key="key2">Второй</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 46
48. Старое дерево Новое дерево Результат <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key1">Первый</li> <li key="key2">Второй</li> <li key="key3">Третий</li> <li key="key3">Третий</li> <li key="key3">Третий</li> <li key="key2">Второй</li> Хэш-таблица Ключ Компонент key1 <li key="key1">Первый</li> key2 <li key="key2">Второй</li> key3 <li key="key3">Третий</li> 47
49. lit-html 48
50. i => i.key lit-html const render = () => html` <ul> ${repeat(items, , (i, index) => html` <li>${index}: ${i.name}</li>`)} </ul> `; 01. 02. 03. 04. 05. 06. 49
51. Где ещё используются деревья: 1. Специфические доменные области 2. AST (abstract syntax tree) 3. Файловая структура 4. Неизменяемые данные 50
52. Неизменяемые данные 51
53. var arr = ["a", "b", "c", "z", "f", "k"]; function render(items) { return arr .map(item => `<div>${ item }</div>`) .join(", "); } nav.innerHTML = render(arr.sort()); div.innerHTML = render(arr); 01. 02. 03. 04. 05. 06. 07. 08. 52
54. arr.sort() var arr = ["a", "b", "c", "z", "f", "k"]; function render(items) { return arr .map(item => `<div>${ item }</div>`) .join(", "); } nav.innerHTML = render( ); div.innerHTML = render(arr); 01. 02. 03. 04. 05. 06. 07. 08. 53
55. slice() var arr = ["a", "b", "c", "z", "f", "k"]; function render(items) { return arr .map(item => `<div>${ item }</div>`) .join(", "); } nav.innerHTML = render(arr. .sort()); div.innerHTML = render(arr); 01. 02. 03. 04. 05. 06. 07. 08. 54
56. Redux store 55
57. {...state, first : { ...state.first, second : { ...state.first.second, [action.someId] : { ...state.first.second[action.someId], fourth : action.someValue } } }} 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 56
58. ...state ...state.first ...state.first.second ...state.first.second[action.someId] { , first : { , second : { , [action.someId] : { , fourth : action.someValue } } }} 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 57
59. [ ...array.slice(0, action.index), action.item, ...array.slice(action.index) ] 01. 02. 03. 04. 05. 58
60. ...array.slice(0, action.index) ...array.slice(action.index) [ , action.item, ] 01. 02. 03. 04. 05. 59
61. Операция Сложность Добавление элемента О(n) Удаление элемента О(n) Поиск О(1)/О(n) 60
62. Эффективна ли неизменяемость? 61
63. Крис Окасаки 62
64. Чисто функциональные структуры данных 63
65. Деревья 64
67. Map/List 66
68. Префиксное дерево (Trie tree) 67
70. xs d b g a c f h ys d' g' f' e 69
71. Операция Сложность Поиск О(|Key|) Добавление элемента О(|Key|) Удаление элемента О(|Key|) Изменение О(|Key|) 70
72. Hash Array Mapped Trie (HAMT) 71
73. Immutability в JS 72
74. Immutability в JS 1. ImmutableJS 2. Seamless-immutable 3. Mori.js 73
75. ImmutableJS 74
76. List в ImmutableJS const originalList = List([ 0 ]); // List [ 0 ] const newList = originalList.set(1, 1); // List [ 0, 1 ] const newList2 = originalList.set(0, 'overwritten'); // List [ "overwritten" ] originalList.get(0); // "overwritten" 01. 02. 03. 04. 05. 06. 07. 08. 75
78. List в ImmutableJS 1. До 32 элементов - обычный массив 2. Свыше 32 элементов - массив массивов до 32 элементов 3. Свыше 32*32 элементов - массив массивов массивов до 32 элементов 4. Прямая ссылка на последний массив 77
80. Map в ImmutableJS const originalMap = Map({ a: 1 }); // Map { a: 1 } const newMap = originalMap.set("b", 1); // Map { a: 1, b: 1 } const newMap2 = originalMap.set(a, 'overwritten'); // Map { a: 'overwritten' } originalMap.get(a, 'overwritten'); // 'overwritten' 01. 02. 03. 04. 05. 06. 07. 08. 79
82. Map в ImmutableJS 1. До 8 элементов - обычный массив [[ключ, значение], ...] 2. Свыше 8 (до 32) элементов - Bitmap хэш таблица 3. Свыше 32 элементов - хэш массив из Bitmap хэш таблиц 81
83. HAMT в ImmutableJS 82
84. Очередь и стек 83
86. React Fiber 85
87. Перестроение DOM в React Fiber 1. Построение/сравнение VDOM 2. Применение изменений 86
88. Приоритеты React Fiber 1. Синхронные операции 2. Задачи для следующего такта 3. Анимации 4. Высокоприоритетные 5. Низкоприоритетные 6. Задачи на изменения вне экрана 87
90. Структуры данных в React Fiber 1. Стек 2. Очередь с приоритетами 89
92. Стек на массиве Операция Сложность Добавление элемента О(1) Удаление элемента О(1) 91
94. Очередь на связанном списке Операция Сложность Добавление элемента О(1) Удаление элемента О(1) 93
95. Очередь с приоритетами 94
96. Очередь с приоритетами Операция/Сложность Массив Сорт. массив Связанный список Добавление элемента О(1) О(n) О(n) Получение элемента О(n) О(1) О(1) 95
97. Куча 96
98. Кучи 1. Двоичная куча 2. Биномиальная куча 3. Фибоначчиева куча 4. Тонкая куча 5. Толстая куча 6. и другие 97
99. Двоичная куча для максимума 1. Значение в любой вершине не меньше, чем значения её потомков 2. На i-ом слое 2^i вершин, кроме последнего. 3. Последний слой заполнен слева направо 98
101. Изменения очереди 100
105. Очередь на двоичной куче Операция Сложность Добавление элемента О(log n) Получение элемента О(log n) Поиск макс. элемента О(1) 104
106. Что использует React Fiber? 105
107. Связанный список 106
108. Очередь с приоритетами Операция/Сложность Куча Связанный список Добавление элемента О(log n) О(n) Получение элемента О(log n) О(1) Поиск макс. элемента О(1) О(1) 107
110. Выводы 1. Интересуйтесь структурами данных и соответствующими им алгоритмами 2. Почаще заглядывайте в код инструментов, которыми вы пользуетесь 3. Не бойтесь неизменяемых структур данных 4. Использование правильной структуры данных, позволяет решить задачу эффективнее 109
111. Вопросы на сегодня: 1. Для чего фронтенд программисту нужно знать структуры данных и алгоритмы? 110
112. Для отрисовки форм на любом фреймворке или написания алгоритма валидации данных не нужны знания о структурах данных, но для действительно серьезных и сложных задач эти знания необходимы. Дашукевич Владимир “ 111
113. Раунд! 112
114. Facebook: dashukevich.vova Twitter: life__777