Deworker Pro

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

Возвращаемся к аукциону 👍🏼 За время наших похождений в мир React вышли новые Composer 2, Xdebug 3, Psalm 4, Cucumber 7 и PHP 8. Также обновились базовые Docker-образы Nginx, NodeJS и PostgreSQL. Так что сейчас самое время перейти на свежий софт и в следующем эпизоде заняться полезной интеграцией PHPUnit, CodeSniffer и Psalm в новый PhpStorm. А потом (когда на него перейдут все пакеты) встретить PHP 8. Очень ждём :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начинаем новую мини-серию скринкастов по исследованию принципов и устройства React. В первом эпизоде поговорим о переводе статической вёрстки на JavaScript и о разделении кода на компоненты: Рендер страницы в JavaScript

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

Про обучение: где заканчиваются сверхспособности и начинается труд? В понедельник 3 августа в 17:00 на канале ХудоБедно будем обсуждать онлайн-обучение в целом и разные походы в частности. Вот пара вопросов из предварительного секретного списка: ▪️Зачем скачивать бесплатно, если можно заплатить автору? ▪️Как совмещать запись скринкастов с работой и расти самому? Здесь не будет правильного и неправильного мнения. Только личный опыт и видение.