Download as PDF, PPTX
![var Direction = {
RIGHT: 0x01
};
var DirectionBehaviour = {
0x01: function(character) {
return Object.assign({
left: character.left + character.hSpeed
}, character);
}
]);
Описание поведения
В качестве значений в словарях можно использовать не только обычные значения,
но и функции. В этом случае можно описывать поведение каждого состояния независимо](https://image.slidesharecdn.com/2-classic-programming-161012103637/75/slide-56-2048.jpg)
Uploaded byBadoo Development
Классическое программирование для фронтендеров
Документ обсуждает концепцию битовых карт и их применение в современных веб-приложениях, подчеркивая, что многие проблемы фронтенд-разработки уже были решены в 80-х годах. Он также рассматривает законы развития технологий, такие как закон Мура, и описывает использование битовых операций для управления состояниями в программировании. В дополнение к этому, документ объясняет, как деревья и структуры данных могут быть использованы для представления зависимостей в веб-разработке.
More Related Content
Similar to Классическое программирование для фронтендеров
Классическое программирование для фронтендеров
- 1.
- 2. Многие современные проблемы фронтендеровбыли решены ещё в 80-х 😎 📼 💾☎👾 🚀 Просто мы об этом не знаем 👶 👶 👶 2
- 3. То, что мыразрабатываем, скорее, уже не сайты, а RIA 3
- 4. RIA — (исландск. RichInternet Applica8on, насыщенное интернет- приложение), иногда IIA — Installable Internet Application — сайт, обладающий свойствами настольного приложения 4
- 5. Законы развития ПО 5 19601970 1980 1990 2000 2010 Закон Мура Закон Вирта (закон Пейджа)
- 6. Законы развития ПО 5 19601970 1980 1990 2000 2010 Закон Мура Закон Вирта (закон Пейджа) 1965 производительность компьютеров удваивается примерно каждые два года
- 7. Законы развития ПО 5 19601970 1980 1990 2000 2010 Закон Мура Закон Вирта (закон Пейджа) 1965 производительность компьютеров удваивается примерно каждые два года ~1995 медлительность программ возрастает быстрее чем производительность компьютеров
- 8. Законы развития ПО 5 19601970 1980 1990 2000 2010 Закон Мура Закон Вирта (закон Пейджа) 1965 производительность компьютеров удваивается примерно каждые два года ~1995 медлительность программ возрастает быстрее чем производительность компьютеров System 1 Windows 1.0
- 9. Законы развития ПО 5 19601970 1980 1990 2000 2010 Закон Мура Закон Вирта (закон Пейджа) 1965 производительность компьютеров удваивается примерно каждые два года ~1995 медлительность программ возрастает быстрее чем производительность компьютеров Решения, придуманные в 80-х оптимизированы для выполнения на слабых компьютерах, поэтому в современном контексте будут работать очень эффективноSystem 1 Windows 1.0
- 10. Компонента курильщика 🚬 Интерактивнаядемонстрация 6
- 11.
- 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.
- 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.
- 68.
- 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.
- 77. Деревья 32 document head body #layoutmeta title asidemain footer Существует несколько способов перебора элементов дерева:
- 78. Деревья 32 document head body #layoutmeta title asidemain footer Существует несколько способов перебора элементов дерева: • DFS (поиск в глубину)
- 79. Деревья 32 document head body #layoutmeta title asidemain footer Существует несколько способов перебора элементов дерева: • DFS (поиск в глубину) • прямой
- 80. Деревья 32 document head body #layoutmeta title asidemain footer Существует несколько способов перебора элементов дерева: • DFS (поиск в глубину) • прямой • обратный
- 81. Деревья 32 document head body #layoutmeta title asidemain footer Существует несколько способов перебора элементов дерева: • DFS (поиск в глубину) • прямой • обратный • симметричный
- 82. Деревья 32 document head body #layoutmeta title asidemain footer Существует несколько способов перебора элементов дерева: • DFS (поиск в глубину) • прямой • обратный • симметричный • BFS (поиск в ширину)
- 83.
- 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.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 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.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 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.
- 141.
- 142. 🌳 Преимущества деревьев •сохраняются и передаются в виде строковых данных 45
- 143. 🌳 Преимущества деревьев •сохраняются и передаются в виде строковых данных • легко читаются 45
- 144. 🌳 Преимущества деревьев •сохраняются и передаются в виде строковых данных • легко читаются • быстро выполняются (нативный объект JS) 45
- 145. 🌳 Преимущества деревьев •сохраняются и передаются в виде строковых данных • легко читаются • быстро выполняются (нативный объект JS) • не имеют чёткого формата описания, поэтому идеально подстраиваются под задачу 45
- 146. Ищите решения, ане инструменты Через 20 лет не будет ни Бэйбеля, ни Реакта, ни Вебпака, ни Джаваскрипта. А деревья и битовые карты — будут 46
- 147.
- 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