Продолжаем исследование 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, кое-где сократил длинные вступления и подведения итогов.

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

Скринкастов на сайте уже стало много. Свои комментарии под ними искать не очень удобно.

Чтобы вы больше не теряли свою переписку с полезными вопросами и ответами в кабинете теперь есть ссылка "Мои комментарии":

https://deworker.pro/cabinet

А в ближайшем эпизоде напишем полноценную инфраструктуру Feature Toggles к фронтенду и бэкенду для более удобной разработки по принципам CI/CD.

Многие из вас интересовались, какая цветовая схема для PhpStorm используется в наших скринкастах. Тема сделана вручную специально для скринкастов. Делимся ей в нашем новогоднем дайджесте.

Новый мегаэпизод готов!

При рассмотрении философий CI/CD мы вместо Feature Branches говорили о подходе Trank Based Development для скрытой разработки новой функциональности в основной Git-ветке.

Сегодня это сделаем на практике. Добавим к проекту инфраструктуру полноценной работы с Feature Flags для фронтенда на ReactJS и бэкенда на PHP.

И при разработке компонента для бэкенда рассмотрим и применим принцип ISP из SOLID.