В нашей базе скринкастов внезапное большое пополнение.

Изначально я в фоне в рамках проекта по Slim готовил один эпизод "Что есть React" с принципами работы самой библиотеки React и её экосистемы.

Но за два месяца надобавлял туда столько материала, что в итоге получилось около полусотни коммитов.

Так что вместо банального поверхностного рассмотрения мы эту тему работы фронтенд-фреймворков расковыряем полностью. Это будет интереснее и полезнее.

И для удобства выделим это в отдельную мини-серию скринкастов Что есть React. Эпизоды будут короткими и будут выкладываться часто, так что это не займёт много времени. Так что приступим!

Начинаем новую мини-серию скринкастов по исследованию принципов и устройства React.

В первом эпизоде поговорим о переводе статической вёрстки на JavaScript и о разделении кода на компоненты:

Рендер страницы в JavaScript

Продолжаем серию про React. Добавляем странице динамику и переходим на иммутабельный подход. Эмулируем подгрузку лотов из API с обновлением цен в реальном времени по WebSocket:

Динамика и иммутабельный flow

Оформили вышенаписанное про React в виде полного анонса в блоге:

Продолжаем исследование React. Сегодня у нас Виртуальный DOM и синхронизация UI. Напишем с вами более продвинутый рендер, чтобы решить проблемы производительности рендера из предыдущего эпизода.

Начинаем вести свой видеоканал. Сегодня у нас обещанные ранее ответы на вопросы:

Также видео доступно в блоге:

Продолжаем написание своего ReactJS. Сегодня мы переводим генерацию виртуального DOM-дерева со встроенных Node-элементов на облегчённый формат JSON:

Страсти накалились и пора тушить :) Мы с вами уже разобрали работу виртуальных элементов и рендер представления. Сегодня займёмся упрощением кода компонентов и перейдём на настоящий React. И для красоты и удобства подключим Babel и внедрим синтаксис JSX:

Продолжаем исследование React. Сегодня займёмся усовершенствованием работы с состоянием. Вместо примитивной структуры мы сделаем полноценный объект-хранилище. После этого автоматизируем вызов перерендера страницы через подписку на события.

Продолжаем исследование React. В предыдущем эпизоде мы придумали удобное хранилище состояния. А в этом эпизоде сделаем работу с ним более удобнее, доработав экшены. Отделим декларацию действия от его реализации, сделав код компонентным и тестируемым. И после этого рассмотрим и подключим библиотеку Redux.

Когда мы разобрались с действиями пришло время добавить интерактивность. Сегодня сделаем кнопки добавления лотов в избранное. И на них построим архитектуру Flux. Разберёмся с классическим MVC для фронтенда и с упрощённым Web-MVC для бэкенда.

Продолжаем путь к совершенству нашего приложения. Сегодня решим проблему каскадной передачи состояния в виде props-ов через всё дерево. Напишем тесты и введём понятие презентационных и контейнерных компонентов. И переведём код на передачу состояния через контекст React. А в следующем эпизоде попробуем это отрефакторить для избавления от копипасты.

Мы нашли удобный способ подключать компоненты к хранилищу, передаваемому через контекст, через connected-компоненты. Теперь мы можем обобщить этот процесс, создав универсальный настраиваемый коннектор. Заодно избавимся от перерендера целого приложения. Доработаем метод dispatch, чтобы он умел работать с асинхронными экшенами. В итоге получим более аккуратный код.

Вот мы и сделали приложение на React. Но загрузка лотов производится даже когда мы не выводим их на странице. Использование Redux порой может быть лишним. И загрузка данных из API может быть сложнее.

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

Наш фронтенд почти готов. Сегодня закроем его эпичным эпизодом о разных способах маршрутизации. Дополним нюансами подгрузки цен, отрефакторим маршрутизатор и посмотрим, что в итоге у нас получилось.

И после исследования работы React уже можем продолжить проект аукциона на Slim.

Мы это сделали! В честь завершения серии про исследование React публикуем пост с итогами в блоге

Возвращаемся к аукциону 👍🏼

За время наших похождений в мир React вышли новые Composer 2, Xdebug 3, Psalm 4, Cucumber 7 и PHP 8. Также обновились базовые Docker-образы Nginx, NodeJS и PostgreSQL.

Так что сейчас самое время перейти на свежий софт и в следующем эпизоде заняться полезной интеграцией PHPUnit, CodeSniffer и Psalm в новый PhpStorm. А потом (когда на него перейдут все пакеты) встретить PHP 8. Очень ждём :)

У нас подключено много инструментов для тестирования и анализа кода, но мы пока запускаем всё отдельно в консоли. Будет удобнее, если это будет работать прямо в IDE, чтобы все ошибки подсвечивались сразу, а не находились потом в консоли.

Для этого сегодня проведём интеграцию PHPUnit, CodeSniffer и Psalm прямо в PhpStorm. И заодно подключим плагины Psalm для упрощения описания типов для сервисов контейнера и для классов с тестами. Так разрабатывать будет интереснее.

Чем заниматься в новогоднюю ночь – дело фантазии каждого. Может кому-то нравится в это время деплоить...

Если под утро вам вдруг станет грустно, то можете провести это время с пользой и через Ansible поднять свой локальный кэширующий прокси-реестр DockerHub для своего Jenkins :)

Каникулы проведены с пользой. На них занялся уборкой:

Исправил опечатки в коде аукциона по issues. Доработал некоторые эпизоды: улучшил команду deploy в эпизоде о Jenkins, перешёл везде на вызов docker-compose build с флагом --pull, кое-где сократил длинные вступления и подведения итогов.

Видеоролики тоже исправлены и перезалиты.