-

2. 2
Юрий Шерстюк

3. 3

4. 3

5. 4
Взгляд в историю

6. 5
Десятичная система получила распространение
лишь в IX веке,
благодаря книге Мухаммеда аль-Хорезми
(«алгоритм» с латинского «algorithmi»)

7. 6
«Алгоритм - набор инструкций, описывающих
порядок действий исполнителя для достижения
некоторого результата.»
Wikipedia

8. 7
Значительно позже появились первые
компьютеры…

9. 8
Развитие «компьютеризации» произошло
благодаря улучшению микропроцессоров

10. 8
Развитие «компьютеризации» произошло
благодаря улучшению микропроцессоров

11. 9
Закон Гордона Мура

12. 10
Важным звеном развития «компьютеризации»
стали алгоритмы

13. 11
Числовой ряд Фибоначчи

14. 12
Базовый экспоненциальный алгортм решения

15. 13
Для вычисления F200 понадобится 2138 операций,
для суперкомпьютера, выполняющего 40
триллионов операций в секунду, это займет -
292 секунд или…

16. 14
157 019 284 536 451 070 000 лет

17. 15
О-нотация

18. 16
О-нотация - верхняя асимптотическая оценка
трудоёмкости алгоритма с точностью до
ограниченных множителей. При этом ошибка в
два раза или даже в тысячу раз считается
допустимой, а уже разница между n и n2
считается существенной.

19. 17
Например: 3n2 + 2n + 20 оценивается как O(n2)

20. 18
Базовые варианты О-нотаций:

21. 18
Базовые варианты О-нотаций:
1. О(1) - константная скорость роста

22. 18
Базовые варианты О-нотаций:
1. О(1) - константная скорость роста
2. О(log n) - функции с логарифмической скоростью
роста

23. 18
Базовые варианты О-нотаций:
1. О(1) - константная скорость роста
2. О(log n) - функции с логарифмической скоростью
роста
3. О(n) - функции с линейной скоростью роста

24. 18
Базовые варианты О-нотаций:
1. О(1) - константная скорость роста
2. О(log n) - функции с логарифмической скоростью
роста
3. О(n) - функции с линейной скоростью роста
4. О(n*log n) - функции с линейно–
логарифмической скоростью роста

25. 18
Базовые варианты О-нотаций:
1. О(1) - константная скорость роста
2. О(log n) - функции с логарифмической скоростью
роста
3. О(n) - функции с линейной скоростью роста
4. О(n*log n) - функции с линейно–
логарифмической скоростью роста
5. О(n2) - функции с квадратичной скоростью роста

26. 18
Базовые варианты О-нотаций:
1. О(1) - константная скорость роста
2. О(log n) - функции с логарифмической скоростью
роста
3. О(n) - функции с линейной скоростью роста
4. О(n*log n) - функции с линейно–
логарифмической скоростью роста
5. О(n2) - функции с квадратичной скоростью роста
6. О(2n) - функции с экспоненциальной скоростью
роста

27. 18
Базовые варианты О-нотаций:
1. О(1) - константная скорость роста
2. О(log n) - функции с логарифмической скоростью
роста
3. О(n) - функции с линейной скоростью роста
4. О(n*log n) - функции с линейно–
логарифмической скоростью роста
5. О(n2) - функции с квадратичной скоростью роста
6. О(2n) - функции с экспоненциальной скоростью
роста
7. О(n!) - функции с факториальной степенью роста

28. 19
и структуры данных

29. 20
«Структура данных - программная единица,
позволяющая хранить и обрабатывать
множество однотипных и/или логически
связанных данных в вычислительной технике.»
Wikipedia

30. 21
Основная дилемма при выборе алгоритма и
структур данных:
https://www.difference.wiki/ram-vs-processor

31. 22
Под капотом V8

32. 23
Элементы движка:
https://habr.com/company/jugru/blog/338930 Андрей Мелихов (Яндекс.Деньги)

33. 23
Элементы движка:
https://habr.com/company/jugru/blog/338930 Андрей Мелихов (Яндекс.Деньги)

34. 23
Элементы движка:
https://habr.com/company/jugru/blog/338930 Андрей Мелихов (Яндекс.Деньги)

35. 23
Элементы движка:
https://habr.com/company/jugru/blog/338930 Андрей Мелихов (Яндекс.Деньги)

36. 24
Чтобы помочь движку с оптимизациями, мы
можем:

37. 25
При работе базового компилятора AoT:

38. 26
Предпочитать мономорфные операторы
полиморфным

39. 26
Предпочитать мономорфные операторы
полиморфным
function add(x, y) {
return x + y;
}
add(1, 2); // + внутри add() мономорфен
add("a", "b"); // + внутри add() становится
полиморфным

40. 27
При работе JIT компилятора

41. 28
var user = {
name: "Yuriy",
age: 31
};

42. 28
var user = {
name: "Yuriy",
age: 31
};

43. 28
var user = {
name: "Yuriy",
age: 31
};
<структура: string name, number age>

44. 28
var user = {
name: "Yuriy",
age: 31
};
<структура: string name, number age>
Yuriy 31

45. 28
var user = {
name: "Yuriy",
age: 31
};
<структура: string name, number age>
Yuriy 31
Vasya 28

46. 28
var user = {
name: "Yuriy",
age: 31
};
<структура: string name, number age>
Yuriy 31
Vasya 28
Petya 26

47. 29
user.isAdmin = true;

48. 29
user.isAdmin = true;

49. 29
user.isAdmin = true;
<структура: string name, number age>
Yuriy 31
Vasya 28
Petya 26

50. 30https://habr.com/post/154537

51. 30https://habr.com/post/154537
Инициализировать все объекты в
конструкторах, чтобы они как можно меньше
менялись в дальнейшем

52. 30
Инициализировать свойства объекта в одном и
том же порядке
https://habr.com/post/154537
Инициализировать все объекты в
конструкторах, чтобы они как можно меньше
менялись в дальнейшем

53. 31
Оптимизировать массивы:
https://habr.com/post/154537

54. 31
Оптимизировать массивы:
- Не стоит заставлять массивы перепрыгивать из одной
категории в другую (из непрерывных представлений в
хэш-таблицы)
https://habr.com/post/154537

55. 31
Оптимизировать массивы:
- Не стоит заставлять массивы перепрыгивать из одной
категории в другую (из непрерывных представлений в
хэш-таблицы)
- Используйте непрерывную нумерацию индексов,
начиная с 0 (в точности как в С)
https://habr.com/post/154537

56. 31
Оптимизировать массивы:
- Не стоит заставлять массивы перепрыгивать из одной
категории в другую (из непрерывных представлений в
хэш-таблицы)
- Используйте непрерывную нумерацию индексов,
начиная с 0 (в точности как в С)
- Не храните не числовые значения в числовых
массивах
https://habr.com/post/154537

57. 32
Как движок оптимизирует такой метод, как
sort?

58. 33
Метод sort
https://github.com/trekhleb/javascript-algorithms

59. 33
Метод sort
В V8 используется алгоритм Quicksort - один из самых
распространенных неустойчивых алгоритмов
внутренней сортировки со средней сложностью:
O(n*log n)
https://github.com/trekhleb/javascript-algorithms

60. 33
Метод sort
В V8 используется алгоритм Quicksort - один из самых
распространенных неустойчивых алгоритмов
внутренней сортировки со средней сложностью:
O(n*log n)
Quicksort заменил собой пирамидальную сортировку
Heapsort, для улучшения производительности
https://github.com/trekhleb/javascript-algorithms

61. 33
Метод sort
В V8 используется алгоритм Quicksort - один из самых
распространенных неустойчивых алгоритмов
внутренней сортировки со средней сложностью:
O(n*log n)
Quicksort заменил собой пирамидальную сортировку
Heapsort, для улучшения производительности
Но не везде выбор сортировки остановился именно на
Quicksort, например, в SpiderMonkey и Nitro (движок Firefox
и Safari) используется сортировка слиянием - Merge sort
https://github.com/trekhleb/javascript-algorithms

62. 34
Таблица оценки алгоритмов сортировок:

63. 35
Quicksort

64. 35
Quicksort

65. 35
Quicksort

66. 36
Но что если взять худший сценарий выполнения
Quicksort?…

67. 37
Худший сценарий Quicksort:

68. 38
Мы получаем сложность О(n2)

69. 39
Но в V8 выбран именно Quicksort

70. 40
С течением времени реализация сортировки
внутри V8 обзавелась множеством различных
оптимизаций:

71. 40
С течением времени реализация сортировки
внутри V8 обзавелась множеством различных
оптимизаций:
1. Изменился метод выбора опорного элемента

72. 40
С течением времени реализация сортировки
внутри V8 обзавелась множеством различных
оптимизаций:
1. Изменился метод выбора опорного элемента
2. Появилась хвостовая рекурсия

73. 40
С течением времени реализация сортировки
внутри V8 обзавелась множеством различных
оптимизаций:
1. Изменился метод выбора опорного элемента
2. Появилась хвостовая рекурсия
3. Изменился алгоритм работы на массивах малого
размера

74. 41
Метод выбора опорного элемента:
https://habr.com/post/265079

75. 41
Метод выбора опорного элемента:
https://habr.com/post/265079
Изначально выбор был случайным

76. 41
Метод выбора опорного элемента:
https://habr.com/post/265079
Изначально выбор был случайным
Затем, был изменен на выбор медианы из трех (первый,
последний и серединный элемент)

77. 41
Метод выбора опорного элемента:
https://habr.com/post/265079
Изначально выбор был случайным
Затем, был изменен на выбор медианы из трех (первый,
последний и серединный элемент)
В конечном итоге простой выбор медианы из
трех дополнился методом определения среднего
элемента для медианы на больших массивах (свыше
1000 элементов)

78. 42
Метод опорного элемента был изменен на:
var GetThirdIndex = function(a, from, to) {
var t_array = [];
// Use both 'from' and 'to' to determine the pivot candidates.
var increment = 200 + ((to - from) & 15);
for (var i = from + 1, j = 0; i < to - 1; i += increment, j++) {
t_array[j] = [i, a[i]];
}
%_CallFunction(t_array, function(a, b) {
return %_CallFunction(UNDEFINED, a[1], b[1], comparefn);
}, ArraySort);
var third_index = t_array[t_array.length >> 1][0];
return third_index;
}
https://habr.com/post/265079

79. 43
О хвостовой рекурсии
https://habr.com/post/265079

80. 43
О хвостовой рекурсии
https://habr.com/post/265079
Проблема с двумя рекурсивными вызовами (на левую и
правую части массива) в том, что при неудачном
выборе опорного элемента глубина рекурсии будет
соизмерима с размером массива, что выливается в
оценку O(n) по памяти для худшего случая

81. 43
О хвостовой рекурсии
https://habr.com/post/265079
Проблема с двумя рекурсивными вызовами (на левую и
правую части массива) в том, что при неудачном
выборе опорного элемента глубина рекурсии будет
соизмерима с размером массива, что выливается в
оценку O(n) по памяти для худшего случая
Решение: сортировка вызывается рекурсивно только
для меньшего подмассива, а сортировка большего
продолжается в основном цикле, что дает оценку
потребления памяти O(log n)

82. 44
Алгоритмом работы на массивах малого
размера:
var InsertionSort = function InsertionSort(a, from, to) {
for (var i = from + 1; i < to; i++) {
var element = a[i];
for (var j = i - 1; j >= from; j--) {
var tmp = a[j];
var order = %_CallFunction(UNDEFINED, tmp, element, comparefn);
if (order > 0) {
a[j + 1] = tmp;
} else {
break;
}
}
a[j + 1] = element;
}
};
https://habr.com/post/265079

83. 45
Таблица оценки алгоритмов сортировок:

84. 46
РЕКУРСИЯ
vs
ЦИКЛ

85. function sumTo(n) {
var result = 0;
for (var i = 1; i <= n; i++) {
result += i;
}
return result;
}
function sumToRec(n) { // рекурсия
return n == 1 ? 1 : n + sumToRec(n - 1);
}
var timeLoop = performance.now();
for (var i = 1; i < 1000; i++) sumTo(1000); // цикл
timeLoop = performance.now() - timeLoop;
var timeRecursion = performance.now();
for (var i = 1; i < 1000; i++) sumToRec(1000); // рекурсия
timeRecursion = performance.now() - timeRecursion;
alert( "Разница в " + (timeRecursion / timeLoop) + " раз" );
47

86. 48
Garbage Collector

87. 49https://softwareengineeringdaily.com/2017/03/31/webassembly-with-brendan-eich/

88. 50
Алгоритм GC - Mark and sweep:

89. 50
Алгоритм GC - Mark and sweep:

90. Document Object Model
51

91. 52
DOM - классический пример структуры данных
в Web

92. 53
Методы работы с DOM-деревом
Операция Сложность Метод
Добавление О(1)
insertBefore, appendChild, append, prepend, after,
before
Удаление О(1) removeChild, remove, replaceWith
Поиск О(1)/O(n)
querySelector, querySelectorAll, getElementById,
getElementsByClassName

93. 54
Поисковые методы get* и querySelector* внутри
устроены очень по-разному для работы с
DOM-деревом

94. 55
var elems = document.getElementsByTagName('div');
alert( elems[0] );
alert( elems[995] );
alert( elems[500] );
alert( elems.length );
http://learn.javascript.ru/searching-elements-internals

95. 55
var elems = document.getElementsByTagName('div');
alert( elems[0] );
alert( elems[995] );
alert( elems[500] );
alert( elems.length );
1. «Способ Firefox» (Firefox, IE)
http://learn.javascript.ru/searching-elements-internals

96. 55
var elems = document.getElementsByTagName('div');
alert( elems[0] );
alert( elems[995] );
alert( elems[500] );
alert( elems.length );
1. «Способ Firefox» (Firefox, IE)
2. «Способ WebKit» (Chrome, Safari, Opera)
http://learn.javascript.ru/searching-elements-internals

97. REACT
vs
ANGULAR
vs
VUE
56

98. 57
React

99. 58
React
https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf

100. 58
React
Для перерисовки одного DOM-дерева в другое
потребуется алгоритм с оценкой - O(n3), где n - количество
элементов
https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf

101. 58
React
Для перерисовки одного DOM-дерева в другое
потребуется алгоритм с оценкой - O(n3), где n - количество
элементов
Так появился алгоритм Reconciliation и удалось добиться
оценки - O(n)
https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf

102. 58
React
Для перерисовки одного DOM-дерева в другое
потребуется алгоритм с оценкой - O(n3), где n - количество
элементов
Так появился алгоритм Reconciliation и удалось добиться
оценки - O(n)
https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf

103. 59
Дополнительная оптимизация по индексам
Старое дерево
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат

104. 59
Дополнительная оптимизация по индексам
Старое дерево
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>

105. 59
Дополнительная оптимизация по индексам
Старое дерево
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Первый</li>
<li>Третий</li>

106. 59
Дополнительная оптимизация по индексам
Старое дерево
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Первый</li>
<li>Третий</li>
<li>Первый</li>

107. 59
Дополнительная оптимизация по индексам
Старое дерево
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Первый</li>
<li>Третий</li>
<li>Первый</li>

108. 59
Дополнительная оптимизация по индексам
Старое дерево
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Первый</li>
<li>Третий</li>
<li>Первый</li>
<li>Третий</li>

109. 59
Дополнительная оптимизация по индексам
Старое дерево
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Первый</li>
<li>Третий</li>
<li>Первый</li>
<li>Третий</li>

110. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич

111. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Новое дерево Результат
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Старое дерево

112. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
Хэш-таблица
КомпонентКлюч
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
key1
key2
key3
Новое дерево Результат
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Старое дерево

113. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
<li key=«key1»>1</li>
<li key=«key3»>3</li>
Хэш-таблица
КомпонентКлюч
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
key1
key2
key3
Новое дерево Результат
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Старое дерево

114. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
<li key=«key1»>1</li>
<li key=«key3»>3</li>
Хэш-таблица
КомпонентКлюч
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
key1
key2
key3
<li key=«key1»>1</li>
Новое дерево Результат
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Старое дерево

115. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
<li key=«key1»>1</li>
<li key=«key3»>3</li>
Хэш-таблица
КомпонентКлюч
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
key1
key2
key3
<li key=«key1»>1</li>
<li key=«key3»>3</li>
Новое дерево Результат
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Старое дерево

116. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
<li key=«key1»>1</li>
<li key=«key3»>3</li>
Хэш-таблица
КомпонентКлюч
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
key1
key2
key3
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Новое дерево Результат
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Старое дерево

117. 60
Дополнительная оптимизация по индексам
https://www.youtube.com/watch?v=nocJsLFPjNk Владимир Дашукевич
<li key=«key1»>1</li>
<li key=«key3»>3</li>
Хэш-таблица
КомпонентКлюч
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
key1
key2
key3
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Новое дерево Результат
<li key=«key1»>1</li>
<li key=«key2»>2</li>
<li key=«key3»>3</li>
Старое дерево

118. 61
Архитектура Fiber

119. 62https://www.youtube.com/watch?v=ZCuYPiUIONs Lin Clark (Mozilla)

120. 63
Что изменилось:
- Reconciliation адаптирован в React Stack
- Вся работа разделена на волокна - fibers
(виртуальные стек-контейнеры)
- Взаимодействие с браузером через:
requestAnimationFrame и requestIdleCallback
- Появились фазы
- Созданы приоритеты и использована структура данных:
Очередь с приоритетами через связанный список

121. 64
Упрощенная структура Fiber:
https://www.youtube.com/watch?v=ZCuYPiUIONs Lin Clark (Mozilla)

122. 65
Фазы:

123. 65
Фазы:
Render / Reconciliation phase - в ней Fiber строит
work-in-progress tree (может быть прервана)

124. 65
Фазы:
Render / Reconciliation phase - в ней Fiber строит
work-in-progress tree (может быть прервана)
Commit phase - внесение изменений из предыдущей
стадии в DOM (эту стадию прервать не удастся)

125. 66
Приоритеты:
0. NoWork - Нет приоритета
1. SynchronousPriority - Действие, которое необходимо
выполнить немедленно (пользовательский ввод)
2. TaskPriority - Обычная задача
3. AnimationPriority - Пользовательские анимации (все,
что приводит к изменению DOM-узлов)
4. HighPriority - Задачи с высоким приоритетом
(например: скроллинг)
5. LowPriority - Низкий приоритет (например:
перерисовка компонента с получением данных store)
6. OffscreenPriority - Перерисовка элементов, которые
не видны на экране сейчас.

126. 66
Приоритеты:
0. NoWork - Нет приоритета
1. SynchronousPriority - Действие, которое необходимо
выполнить немедленно (пользовательский ввод)
2. TaskPriority - Обычная задача
3. AnimationPriority - Пользовательские анимации (все,
что приводит к изменению DOM-узлов)
4. HighPriority - Задачи с высоким приоритетом
(например: скроллинг)
5. LowPriority - Низкий приоритет (например:
перерисовка компонента с получением данных store)
6. OffscreenPriority - Перерисовка элементов, которые
не видны на экране сейчас.

127. 67
Очередь с приоритетами
использует связанный список
Операция/Сложность Связанный список
Добавление элемента О(n)
Получение элемента О(1)
Поиск максимального элемента О(1)

128. 68
Angular

129. 69
V4-6 Pipeline
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

130. 69
V4-6 Pipeline
Template
HTML
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

131. 69
V4-6 Pipeline
Template
HTML
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

132. 69
V4-6 Pipeline
Template
HTML
Template
Data
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

133. 69
V4-6 Pipeline
Template
HTML
Template
Data
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

134. 69
V4-6 Pipeline
Template
HTML
Template
Data
Angular
Interpreter
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

135. 69
V4-6 Pipeline
Template
HTML
Template
Data
Angular
Interpreter
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

136. 69
V4-6 Pipeline
Template
HTML
Template
Data
Angular
Interpreter
DOM
https://www.youtube.com/watch?v=jnp_ny4SOQE Kara Erickson

137. 70
Ivy Project
https://github.com/benbraou/is-angular-ivy-ready

138. 71
Ivy Pipeline
https://www.youtube.com/watch?v=jnp_ny4SOQE

139. Template
HTML
71
Ivy Pipeline
https://www.youtube.com/watch?v=jnp_ny4SOQE

140. Template
HTML
71
Ivy Pipeline
https://www.youtube.com/watch?v=jnp_ny4SOQE

141. Template
HTML
71
Ivy Pipeline
Template
Instructions
https://www.youtube.com/watch?v=jnp_ny4SOQE

142. Template
HTML
71
Ivy Pipeline
Template
Instructions
https://www.youtube.com/watch?v=jnp_ny4SOQE

143. Template
HTML
71
Ivy Pipeline
Template
Instructions
https://www.youtube.com/watch?v=jnp_ny4SOQE

144. Template
HTML
71
Ivy Pipeline
Template
Instructions
DOM
https://www.youtube.com/watch?v=jnp_ny4SOQE

145. 72
Что изменилось:

146. 72
Tree Shakable Features
Что изменилось:

147. 72
Code splitting используя Static analysis
Tree Shakable Features
Что изменилось:

148. 72
Code splitting используя Static analysis
Locality
Tree Shakable Features
Что изменилось:

149. 72
Code splitting используя Static analysis
Locality
Tree Shakable Features
Incrementality
Что изменилось:

150. 73
Tree Shakable Features
- Template syntax
- Dependency injection
- Content projection
- Structural directives
- Lifecycle hooks
- Pipes
- Queries
- Listeners

151. 74https://github.com/robwormald/ivy-code-size

152. 75https://www.youtube.com/watch?v=jnp_ny4SOQE

153. 76
Vue

154. 77
далекий 2016й год - появление Vue 2.0
https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8

155. 78
…все тот же Snabbdom
https://github.com/snabbdom/snabbdom

156. 79
Цикл Snabbdom
https://medium.com/@yelouafi/react-less-virtual-dom-with-snabbdom-functions-everywhere-53b672cb2fe3

157. 80
Что в итоге?

158. 81

159. 81
Не всем всегда и сразу нужно знать алгоритмы

160. 81
Не всем всегда и сразу нужно знать алгоритмы
JavaScript - уже не тот, все больше логики происходит
на клиенте, не говоря о NodeJS

161. 81
Не всем всегда и сразу нужно знать алгоритмы
JavaScript - уже не тот, все больше логики происходит
на клиенте, не говоря о NodeJS
Алгоритмы и структуры данных - это скорее способ
организации мышления

162. 81
Не всем всегда и сразу нужно знать алгоритмы
JavaScript - уже не тот, все больше логики происходит
на клиенте, не говоря о NodeJS
Алгоритмы и структуры данных - это скорее способ
организации мышления
Выгодно инвестировать в фундаментальные знания

163. 82
Что почитать?

164. 82
Что почитать?

165. 82
Что почитать?

166. 83
Шерстюк Юрий
yursherstyuk@gmail.com
Software engineer