Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых

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

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

деревья

хорошо

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

https://htmlacademy.ru




































Многие современные проблемы фронтендеров были решены ещё в 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


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






































5

1960 1970 1980 1990 2000 2010



System 1Windows 1.0






































5

1960 1970 1980 1990 2000 2010



Решения, придуманные в 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


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

10







































• IP-адрес192.168.1.1 / 255.255.255.0



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

10







































• IP-адрес192.168.1.1 / 255.255.255.0



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

• состояние 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







































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

26








































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

26









































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

26









































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

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

26





































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

27





































🌳 Деревья

28





































🌳 Деревья

29

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

document

head body

#layoutmeta title

aside main footer





































🌳 Деревья

29


узел

document

head body

#layoutmeta title

aside main footer





































🌳 Деревья

29


корень

узел

document

head body

#layoutmeta title

aside main footer





































🌳 Деревья

29


корень

узел

потомки

document

head body

#layoutmeta title

aside main footer





































🌳 Деревья

29


корень

узел

лист

потомки

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



• прямой





































Деревья

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



• прямой


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

• 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









































































36









































































36









































































36









































































36









































































36









































































36









































































36









































































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

37





































Обход в ширину

38

Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа

document

head body

#layoutmeta title

aside main footer






































38


document

head body

#layoutmeta title

aside main footer

document document






































38


document

head body

#layoutmeta title

aside main footer

document headdocument

head






































38


document

head body

#layoutmeta title

aside main footer

document headbody

document

head body






































38


document

head body

#layoutmeta title

aside main footer

document headbody meta

document

head

meta

body






































38


document

head body

#layoutmeta title

aside main footer

document headbody metatitle

document

head

meta title

body






































38


document

head body

#layoutmeta title

aside main footer

document headbody metatitle#layout

document

head

meta title

body

#layout






































38


document

head body

#layoutmeta title

aside main footer

document headbody metatitle#layoutaside

document

head

meta title

body

#layout

aside






































38


document

head body

#layoutmeta title

aside main footer

document headbody metatitle#layoutasidemain

document

head

meta title

body

#layout

aside main






































38


document

head body

#layoutmeta title

aside main footer

document headbody metatitle#layoutasidemain footer

document

head

meta title

body

#layout

aside main footer





































39









































































39









































































39









































































39









































































39









































































39









































































39









































































39









































































39









































































«Лёгкий компьютер» в играх

40

Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет в ближайшие несколько шагов (BFS)






































40







































40







































40







































40







































40


— Лошадью ходи, век воли не видать!





































«Сложный компьютер» в играх

41

Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)






































41







































41







































41


— Ботвинник сдавался!






































41








































41








































41








































41


— Так-так, вот тут у меня больше шансов на победу






































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

42





































Дерево требований к разработчикам

43

Листьями являются конкретные технологии, а узлами — группы

умения

сервер контроль версийклиент

верстка

less scss

... ...библиотеки

AngularReact





































44









































































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

45






































• сохраняются и передаются в виде строковых данных

45







































• легко читаются

45








































• быстро выполняются (нативный объект JS)

45








































• быстро выполняются (нативный объект JS)

• не имеют чёткого формата описания, поэтому идеально подстраиваются под задачу

45





































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

46





































Что поизучать

47






































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

47





































https://github.com/htmlacademy/bitset.js

http://o0.github.io/trees/

https://github.com/thejameskyle/itsy-bitsy-data-structures



• o0.github.io/treesинтерактивные демки, примеры для разных областей применения, больше теории, исходники

47










































• o0.github.io/treesинтерактивные демки, примеры для разных областей применения, больше теории, исходники

• github.com/thejameskyle/itsy-bitsy-data-structuresрепозиторий, с интересным и подробным рассказом про алгоритмы и структуры данных на JS

47








































🖖— Спасибо!





































[email protected]Наставничество — отличный способ найти себе в команду новичка и воспитать его так, как считаешь должным на готовой продуманной инфраструктуре или просто поделиться опытом

49





































http://[email protected]

Documents

Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых