Классическое программирование для фронтендеров

!!"!""🌲🌲🌲🌲🌲🌲👍

битовая карта

деревья

хорошо

Игорь Алексеенкоучилка в HTML Academy

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

2

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

3

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

4

Законы развития ПО

5

1960 1970 1980 1990 2000 2010

Закон Мура Закон Вирта (закон Пейджа)

Законы развития ПО

5

1960 1970 1980 1990 2000 2010

Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года

Законы развития ПО

5

1960 1970 1980 1990 2000 2010

Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года

~1995медлительность программвозрастает быстрее чемпроизводительностькомпьютеров

Законы развития ПО

5

1960 1970 1980 1990 2000 2010

Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года

~1995медлительность программвозрастает быстрее чемпроизводительностькомпьютеров

System 1Windows 1.0

Законы развития ПО

5

1960 1970 1980 1990 2000 2010

Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года

~1995медлительность программвозрастает быстрее чемпроизводительностькомпьютеров

Решения, придуманные в 80-х оптимизированы для выполнения на слабых компьютерах, поэтому в современном контексте будут работать очень эффективноSystem 1

Windows 1.0

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

6

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

7

Двоичная запись

8

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

!""!!"

Двоичная запись

8

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

!""!!"012345

Двоичная запись

8

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

!""!!"202122232425

Двоичная запись

8

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

!""!!"12481632

Двоичная запись

8

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

!""!!"12481632

1008160 ++ + + +

Двоичная запись

8

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

!""!!"12481632

=251008160 ++ + + +

Двоичная запись

8

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

!""!!"12481632

Двоичная запись

8

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

!""!!"12481632

"!!!"!

Двоичная запись

8

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

!""!!"12481632

"!!!"!0200032 ++ + + +

Двоичная запись

8

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

!""!!"12481632

"!!!"!0200032 ++ + + + =34

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

9

Битовые карты

10

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

Битовые карты

• IP-адрес192.168.1.1 / 255.255.255.0

10

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

Битовые карты

• IP-адрес192.168.1.1 / 255.255.255.0

• цвет #FACE8D

10

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

Битовые карты

• IP-адрес192.168.1.1 / 255.255.255.0

• цвет #FACE8D

• права пользователяchmod -R 777 .

10

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

Битовые карты

• IP-адрес192.168.1.1 / 255.255.255.0

• цвет #FACE8D

• права пользователяchmod -R 777 .

• карта уровня в игре или пиксели изображения

10

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

Битовые карты

• IP-адрес192.168.1.1 / 255.255.255.0

• цвет #FACE8D

• права пользователяchmod -R 777 .

• карта уровня в игре или пиксели изображения

• состояние UX-компоненты

10

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

Интерактивная демонстрация. Кодирование состояний в битах

11

Компонента здорового человека 🚭

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

12

Побитовое «или»

13

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

010OR 100 0

Побитовое «или»

13

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

010OR 100 0

Побитовое «или»

13

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

010OR 100 10

Побитовое «или»

13

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

010OR 100 110

Побитовое «или»

14

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

Побитовое «или»

14

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

010 OR 100 110

1010AND 1100 0

Побитовое «и»

15

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

Побитовое «и»

15

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

1010AND 1100 0

Побитовое «и»

15

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

1010AND 1100 00

Побитовое «и»

15

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

1010AND 1100 000

Побитовое «и»

15

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

1010AND 1100 1000

Побитовое «и»

16

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

Побитовое «и»

16

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

Побитовое «и»

16

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

Побитовое «и»

16

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

Побитовое «и»

16

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

1010 AND 0010 = 0010

Побитовое «и»

16

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

1010 AND 0100 = 0000

Побитовое «и»

16

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

Побитовое «и»

16

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

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

17

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

18

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

19

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

20

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

var Direction = { RIGHT: 0x01 };var DirectionBehaviour = { 0x01: function(character) { return Object.assign({ left: character.left + character.hSpeed }, character); }]);

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

var Direction = { RIGHT: 0x01, TOP: 0x02};var DirectionBehaviour = { 0x01: function(character) {}, 0x02: function(character) {} };

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

Даже Redux!

24

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

const ActionType = { UPDATE_1: 0x01, UPDATE_2: 0x02 };store.dispatch({ type: ActionType.UPDATE_1 | ActionType.UPDATE_2});

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

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

26

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

• исключающие или XOR, ^используется для переключения состояния (toggle)

26

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

• исключающие или XOR, ^используется для переключения состояния (toggle)

• побитовый сдвиг влево <<

26

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

• исключающие или XOR, ^используется для переключения состояния (toggle)

• побитовый сдвиг влево <<

• побитовый сдвиг вправо >>

26

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

• исключающие или XOR, ^используется для переключения состояния (toggle)

• побитовый сдвиг влево <<

• побитовый сдвиг вправо >>

• сдвиг вправо с заполнением нулями >>>

26

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

• исключающие или XOR, ^используется для переключения состояния (toggle)

• побитовый сдвиг влево <<

• побитовый сдвиг вправо >>

• сдвиг вправо с заполнением нулями >>>

• битовые маски когда одно состояние хранится в нескольких соседних битах используются маски, которые показывают единицами, в какие именно биты состояние записано (IP-адрес и маска подсети)

26

Зависимости в форме

27

🌳 Деревья

28

🌳 Деревья

29

Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево

document

head body

#layoutmeta title

aside main footer

🌳 Деревья

29

Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево

узел

document

head body

#layoutmeta title

aside main footer

🌳 Деревья

29

Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево

корень

узел

document

head body

#layoutmeta title

aside main footer

🌳 Деревья

29

Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево

корень

узел

потомки

document

head body

#layoutmeta title

aside main footer

🌳 Деревья

29

Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево

корень

узел

лист

потомки

document

head body

#layoutmeta title

aside main footer

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

30

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

31

Деревья

32

document

head body

#layoutmeta title

aside main footer

Деревья

32

document

head body

#layoutmeta title

aside main footer

Существует несколько способов перебора элементов дерева:

Деревья

32

document

head body

#layoutmeta title

aside main footer

Существует несколько способов перебора элементов дерева:

• DFS (поиск в глубину)

Деревья

32

document

head body

#layoutmeta title

aside main footer

Существует несколько способов перебора элементов дерева:

• DFS (поиск в глубину)

• прямой

Деревья

32

document

head body

#layoutmeta title

aside main footer

Существует несколько способов перебора элементов дерева:

• DFS (поиск в глубину)

• прямой

• обратный

Деревья

32

document

head body

#layoutmeta title

aside main footer

Существует несколько способов перебора элементов дерева:

• DFS (поиск в глубину)

• прямой

• обратный

• симметричный

Деревья

32

document

head body

#layoutmeta title

aside main footer

Существует несколько способов перебора элементов дерева:

• DFS (поиск в глубину)

• прямой

• обратный

• симметричный

• BFS (поиск в ширину)

33

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

34

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentdocument

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheaddocument

head

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheadmeta

document

head

meta

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheadmetatitle

document

head

meta title

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheadmetatitlebody

document

head

meta title

body

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheadmetatitlebody#layout

document

head

meta title

body

#layout

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheadmetatitlebody#layoutaside

document

head

meta title

body

#layout

aside

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheadmetatitlebody#layoutasidemain

document

head

meta title

body

#layout

aside main

Прямой обход в глубину

35

Сначала посещается узел, а потом его потомки

document

head body

#layoutmeta title

aside main footer

documentheadmetatitlebody#layoutasidemain footer

document

head

meta title

body

#layout

aside main footer

36

36