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
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
Битовой картой называется последовательность бит (нулей и единиц). В битовых
картах может храниться не только число, но и любой другой набор данных
31. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
0
32. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
0
33. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
10
34. Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
110
36. Побитовое «или»
14
Складывает переданные значения и сохраняет включенные биты обоих операторов.
Идеально подходит для сложения нескольких состояний
010
OR 100
110
52. Полученный код содержит всего пять (одну)
управляющих строк. Остальной код — статические
словари. Вне зависимости от размеров словарей
(количества состояний) размер управляющего кода
меняться не будет
19
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) {}
};
Описание поведения
В качестве значений в словарях можно использовать не только обычные значения,
но и функции. В этом случае можно описывать поведение каждого состояния независимо
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. Так, за одно обращение к хранилищу можно делать несколько операций
с данными
62. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
26
63. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
26
64. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
26
65. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
• сдвиг вправо с заполнением нулями >>>
26
66. И кроме этого есть ещё
• исключающие или XOR, ^
используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
• сдвиг вправо с заполнением нулями >>>
• битовые маски
когда одно состояние хранится в нескольких соседних
битах используются маски, которые показывают
единицами, в какие именно биты состояние записано
(IP-адрес и маска подсети)
26
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
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
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
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
144. 🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
• быстро выполняются (нативный объект JS)
45
145. 🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
• быстро выполняются (нативный объект JS)
• не имеют чёткого формата описания, поэтому идеально
подстраиваются под задачу
45
146. Ищите решения, а не инструменты
Через 20 лет не будет ни Бэйбеля, ни Реакта, ни Вебпака,
ни Джаваскрипта. А деревья и битовые карты — будут
46
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
152. tutors@htmlacademy.ru
Наставничество — отличный способ найти себе
в команду новичка и воспитать его так, как считаешь
должным на готовой продуманной инфраструктуре или
просто поделиться опытом
49