«Классическое программирование для фронтендеров», Игорь Алексеенко (HTML Academy) Зачем фронтендерам изучать алгоритмы и структуры данных.

1. !!"!""🌲🌲🌲🌲🌲🌲👍
битовая карта
деревья
хорошо
Игорь Алексеенко
училка в HTML Academy

2. Многие современные проблемы
фронтендеров были решены
ещё в 80-х 😎 📼 💾☎👾 🚀
Просто мы об этом не знаем 👶 👶 👶
2

3. То, что мы разрабатываем,
скорее, уже не сайты, а RIA
3

4. RIA —
(исландск. Rich Internet Applica8on, насыщенное интернет-
приложение), иногда IIA — Installable Internet Application —
сайт, обладающий свойствами настольного приложения
4

5. Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)

6. Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)
1965
производительность
компьютеров удваивается
примерно каждые
два года

7. Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)
1965
производительность
компьютеров удваивается
примерно каждые
два года
~1995
медлительность программ
возрастает быстрее чем
производительность
компьютеров

8. Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)
1965
производительность
компьютеров удваивается
примерно каждые
два года
~1995
медлительность программ
возрастает быстрее чем
производительность
компьютеров
System 1
Windows 1.0

9. Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)
1965
производительность
компьютеров удваивается
примерно каждые
два года
~1995
медлительность программ
возрастает быстрее чем
производительность
компьютеров
Решения, придуманные
в 80-х оптимизированы
для выполнения на
слабых компьютерах,
поэтому в современном
контексте будут работать
очень эффективноSystem 1
Windows 1.0

10. Компонента курильщика 🚬
Интерактивная демонстрация
6

11. Битовые карты 🏏🂡🃁
7

12. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"

13. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
012345

14. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
202122232425

15. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
12481632

16. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
12481632
1008160 ++ + + +

17. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
12481632
=251008160 ++ + + +

18. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
12481632

19. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
12481632
"!!!"!

20. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
12481632
"!!!"!
0200032 ++ + + +

21. Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность
нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается
с нуля. Единица в разряде означает что итоговое число содержит двойку
в степени номера разряда
!""!!"
12481632
"!!!"!
0200032 ++ + + + =34

22. Битовые карты —
(яп. — bitmap) они же битовые массивы (кор. — bitset,
bitarray) последовательности бит, которые кодируют
не степени двойки, а любую другую информацию.
Хранятся в виде обычных чисел
9

23. Битовые карты
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых
картах может храниться не только число, но и любой другой набор данных

24. Битовые карты
• IP-адрес
192.168.1.1 / 255.255.255.0
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых
картах может храниться не только число, но и любой другой набор данных

25. Битовые карты
• IP-адрес
192.168.1.1 / 255.255.255.0
• цвет
#FACE8D
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых
картах может храниться не только число, но и любой другой набор данных

26. Битовые карты
• IP-адрес
192.168.1.1 / 255.255.255.0
• цвет
#FACE8D
• права пользователя
chmod -R 777 .
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых
картах может храниться не только число, но и любой другой набор данных

27. Битовые карты
• IP-адрес
192.168.1.1 / 255.255.255.0
• цвет
#FACE8D
• права пользователя
chmod -R 777 .
• карта уровня в игре или пиксели изображения
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых
картах может храниться не только число, но и любой другой набор данных

28. Битовые карты
• IP-адрес
192.168.1.1 / 255.255.255.0
• цвет
#FACE8D
• права пользователя
chmod -R 777 .
• карта уровня в игре или пиксели изображения
• состояние UX-компоненты
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых
картах может храниться не только число, но и любой другой набор данных

29. Интерактивная демонстрация. Кодирование состояний
в битах
11
Компонента здорового человека 🚭

30. Битовые операции —
логические операции над цепочками битов, в которых
биты выступают как значения true или false
12

31. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
0

32. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
0

33. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
10

34. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
110

35. Побитовое «или»
14
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний

36. Побитовое «или»
14
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
110

37. 1010
AND 1100
0
Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния

38. Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния
1010
AND 1100
0

39. Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния
1010
AND 1100
00

40. Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния
1010
AND 1100
000

41. Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния
1010
AND 1100
1000

42. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния

43. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния

44. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния

45. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния

46. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния
1010
AND 0010
= 0010

47. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния
1010
AND 0100
= 0000

48. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния

49. Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально
подходит для проверки состояния

50. Компонента здорового человека 🚭
Интерактивная демонстрация. Продолжение
17

51. Декларативный стиль
Мы описываем не последовательность шагов
(императивный стиль), а реакцию на изменение
состояния
18

52. Полученный код содержит всего пять (одну)
управляющих строк. Остальной код — статические
словари. Вне зависимости от размеров словарей
(количества состояний) размер управляющего кода
меняться не будет
19

53. Использование состояний
для описания поведения
20

55. Описание поведения
В качестве значений в словарях можно использовать не только обычные значения,
но и функции. В этом случае можно описывать поведение каждого состояния независимо

56. var Direction = {
RIGHT: 0x01
};
var DirectionBehaviour = {
0x01: function(character) {
return Object.assign({
left: character.left + character.hSpeed
}, character);
}
]);
Описание поведения
В качестве значений в словарях можно использовать не только обычные значения,
но и функции. В этом случае можно описывать поведение каждого состояния независимо

57. var Direction = {
RIGHT: 0x01,
TOP: 0x02
};
var DirectionBehaviour = {
0x01: function(character) {},
0x02: function(character) {}
};
Описание поведения
В качестве значений в словарях можно использовать не только обычные значения,
но и функции. В этом случае можно описывать поведение каждого состояния независимо

58. Даже Redux!
24

59. Даже Redux!
Можно использовать битовые маски как параметр type для управляющих объектов
action. Так, за одно обращение к хранилищу можно делать несколько операций
с данными

60. const ActionType = {
UPDATE_1: 0x01,
UPDATE_2: 0x02
};
store.dispatch({
type: ActionType.UPDATE_1 | ActionType.UPDATE_2
});
Даже Redux!
Можно использовать битовые маски как параметр type для управляющих объектов
action. Так, за одно обращение к хранилищу можно делать несколько операций
с данными

61. И кроме этого есть ещё
26

62. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
26

63. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
26

64. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
26

65. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
• сдвиг вправо с заполнением нулями >>>
26

66. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
• сдвиг вправо с заполнением нулями >>>
• битовые маски
когда одно состояние хранится в нескольких соседних
битах используются маски, которые показывают
единицами, в какие именно биты состояние записано
(IP-адрес и маска подсети)
26

67. Зависимости в форме
27

68. 🌳 Деревья
28

69. 🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся
узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
document
head body
#layoutmeta title
aside main footer

70. 🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся
узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
узел
document
head body
#layoutmeta title
aside main footer

71. 🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся
узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
корень
узел
document
head body
#layoutmeta title
aside main footer

72. 🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся
узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
корень
узел
потомки
document
head body
#layoutmeta title
aside main footer

73. 🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся
узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
корень
узел
лист
потомки
document
head body
#layoutmeta title
aside main footer

74. 🌳 Деревья
Интерактивная демонстрация. Использование деревьев
для описания зависимостей в форме
30

75. 🚶🌳 Обход дерева
Какими способами можно обходить дерево и на что
может повлиять изменение способа обхода
31

76. Деревья
32
document
head body
#layoutmeta title
aside main footer

77. Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько
способов перебора
элементов дерева:

78. Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько
способов перебора
элементов дерева:
• DFS (поиск в глубину)

79. Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько
способов перебора
элементов дерева:
• DFS (поиск в глубину)
• прямой

80. Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько
способов перебора
элементов дерева:
• DFS (поиск в глубину)
• прямой
• обратный

81. Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько
способов перебора
элементов дерева:
• DFS (поиск в глубину)
• прямой
• обратный
• симметричный

82. Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько
способов перебора
элементов дерева:
• DFS (поиск в глубину)
• прямой
• обратный
• симметричный
• BFS (поиск в ширину)

83. 33

84. Прямой поиск в глубину
(сербохорв. — Depth-first search, DFS) если у узла есть
потомки, посещаются сначала они, а только потом
соседний узел (всегда идём до самого конца)
34

85. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer

86. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
document

87. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
headdocument
head

88. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
head
meta
document
head
meta

89. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
head
meta
title
document
head
meta title

90. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
head
meta
title
body
document
head
meta title
body

91. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
head
meta
title
body
#layout
document
head
meta title
body
#layout

92. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
head
meta
title
body
#layout
aside
document
head
meta title
body
#layout
aside

93. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
head
meta
title
body
#layout
aside
main
document
head
meta title
body
#layout
aside main

94. Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
document
head
meta
title
body
#layout
aside
main
footer
document
head
meta title
body
#layout
aside main footer

95. 36

96. 36

97. 36

98. 36

99. 36

100. 36

101. 36

102. 36

103. 36

104. Поиск в ширину
(древнеарамейск. Breadth-first search, BFS) узлы посещаются
по уровням, будто срезаются слои с торта (смотрим
по верхам)
37

105. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer

106. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
document

107. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
headdocument
head

108. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
head
body
document
head body

109. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
head
body
meta
document
head
meta
body

110. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
head
body
meta
title
document
head
meta title
body

111. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
head
body
meta
title
#layout
document
head
meta title
body
#layout

112. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
head
body
meta
title
#layout
aside
document
head
meta title
body
#layout
aside

113. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
head
body
meta
title
#layout
aside
main
document
head
meta title
body
#layout
aside main

114. Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document
head
body
meta
title
#layout
aside
main
footer
document
head
meta title
body
#layout
aside main footer

115. 39

116. 39

117. 39

118. 39

119. 39

120. 39

121. 39

122. 39

123. 39

124. «Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет
в ближайшие несколько шагов (BFS)

125. «Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет
в ближайшие несколько шагов (BFS)

126. «Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет
в ближайшие несколько шагов (BFS)

127. «Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет
в ближайшие несколько шагов (BFS)

128. «Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет
в ближайшие несколько шагов (BFS)

129. «Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет
в ближайшие несколько шагов (BFS)
— Лошадью ходи,
век воли не видать!

130. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)

131. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)

132. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)

133. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник
сдавался!

134. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник
сдавался!

135. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник
сдавался!

136. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник
сдавался!

137. «Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Так-так, вот тут у меня
больше шансов на победу
— Ботвинник
сдавался!

138. ☀🔦 Анализ рынка разработки
Статистика требований к разработчикам на основе
вакансий «Моего Круга» с помощью библиотеки d3.js
42

139. Дерево требований к разработчикам
43
Листьями являются конкретные технологии, а узлами — группы
умения
сервер контроль версийклиент
верстка
less scss
... ...библиотеки
AngularReact

140. 44

141. 🌳 Преимущества деревьев
45

142. 🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
45

143. 🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
45

144. 🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
• быстро выполняются (нативный объект JS)
45

145. 🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
• быстро выполняются (нативный объект JS)
• не имеют чёткого формата описания, поэтому идеально
подстраиваются под задачу
45

146. Ищите решения, а не инструменты
Через 20 лет не будет ни Бэйбеля, ни Реакта, ни Вебпака,
ни Джаваскрипта. А деревья и битовые карты — будут
46

147. Что поизучать
47

148. Что поизучать
• github.com/htmlacademy/bitset.js
библиотека от HTML Academy для работы с битовыми
массивами в JS — обёртки для добавления, удаления,
проверки и получения объектов с состоянием
47

149. Что поизучать
• github.com/htmlacademy/bitset.js
библиотека от HTML Academy для работы с битовыми
массивами в JS — обёртки для добавления, удаления,
проверки и получения объектов с состоянием
• o0.github.io/trees
интерактивные демки, примеры для разных областей
применения, больше теории, исходники
47

150. Что поизучать
• github.com/htmlacademy/bitset.js
библиотека от HTML Academy для работы с битовыми
массивами в JS — обёртки для добавления, удаления,
проверки и получения объектов с состоянием
• o0.github.io/trees
интерактивные демки, примеры для разных областей
применения, больше теории, исходники
• github.com/thejameskyle/itsy-bitsy-data-structures
репозиторий, с интересным и подробным рассказом
про алгоритмы и структуры данных на JS
47

151. 🖖— Спасибо!

152. tutors@htmlacademy.ru
Наставничество — отличный способ найти себе
в команду новичка и воспитать его так, как считаешь
должным на готовой продуманной инфраструктуре или
просто поделиться опытом
49