Динамика и иммутабельный flow
Наше приложение мы успешно сверстали. Но оно пока не делает ничего интересного. Исправим это.
Сделаем нашу статическую страницу динамической. Добавим таймер для виджета часов. Сделаем отложенную загрузку лотов по API. Реализуем обновление цен в реальном времени по примеру работы с WebSocket-уведомлениями.
Рассмотрим проблемы классического подхода прямого изменения DOM-элементов и перейдём на иммутабельные компоненты. Уберём лишние зависимости и переведём фронтенд на однонаправленный поток управления.
- 00:00:56 - Постановка задачи
- 00:01:53 - Добавление таймера
- 00:02:39 - Прямое изменение значения
- 00:05:21 - Усложнение виджета
- 00:08:41 - Проблема копипасты логики
- 00:09:27 - Унификация рендеринга
- 00:12:02 - Пересоздание компонента
- 00:15:47 - Перегенерация страницы
- 00:18:23 - Унификация процедуры render
- 00:19:04 - Способы модификации состояния
- 00:21:49 - Достоинства и недостатки подхода
- 00:23:55 - Отложенная загрузка лотов
- 00:26:11 - Получение данных по API
- 00:29:53 - Эмуляция API-клиента
- 00:33:41 - Обновление цен в реальном времени
- 00:35:05 - Эмулятор WebSocket-клиента
- 00:38:19 - Обзор Control Flow
- 00:43:30 - Проблемы сброса и производительности
Дальше займёмся решением проблем производительности и реализацией настоящей реактивности.
Скрытый контент
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram
Спасибо, Дмитрий! Первый раз, первым оставил след )
Очень понравился скрин каст. Классно, что теперь и по джс идет изложение в стиле Дмитрия. Надеюсь, что и про тайп скрипт когда-то пару слов скажете. Спасибо.
Спасибо, за урок! Да, весьма интересный вопрос, только тайп скрипт может дать соблюдение строгости написания кода и крутые подсказки в шторме, но с другой стороны, возрастет сложность проекта и восприятие кода будет малость усложнено, тоже интересно по какому пути пойдет Дмитрий.
Да, про TypeScript скажу.
Спасибо.
Спасибо! Очень нравятся ваши уроки!
21:08 я давно в JS не заглядывал. Синтаксический сахар синтаксического сахара. Комбо-вомбо :)
Дмитрий, спасибо, очень своевременно! Меня уже начал немного бесить фронтенд, но теперь я вижу и в нём логичные приёмы!
Вопрос не по теме урока, но не нашёл куда: доработайте пожалуйста сайт чтобы он запоминал какие видео я посмотрел а какие нет. Захожу не так часто - много времени уходит понять что я смотрел а что нет. Учитывая что я ещё часто не по порядку смотрю а только интересные темы.
Добавил в планы по доработке. Спасибо!
Суперское объяснение 👍 Спасибо за то, что Вы делаете!
Я не думал что в этом плеере можно ускорить воспроизведение. Гораздо понятнее когда x2 )
айкон))
Пожалуйста, прикладывайте исходный файл каждого урока - чтобы можно было разобраться в процессе, попрактиковать.
Пробовал переписывать - но это отнимает уйму времени, и крайне неудобно.
Спасибо!
P.S. В рамках данной серии уроков JSFiddle, думаю, будет предостаточно
Частично решено: в коммитах проекта на Github есть изменения :)
А можете, пожалуйста, скинуть ссылочку на проект на Github?
В конце урока есть "Исходный код на GitHub" при наличии подписки Deworker есть. Боюсь, если продублирую - нарушу правила.
В Репозитории есть "105 commits"(комбинация CTRL+F в Firefox для поиска по тексту) - там есть исходный код уроков и шагов в них.
Унификация рендеринга - очень красиво.
Вы убрали прямое упоминания Виджета. Просто остался "сигнал" о изменении и вызов тонкого метода ререндеринга.
Ничего лишнего, всё просто и читаемо. Восхитительно!
Или войти через: