Новое видео в базе знаний
Бесшовный деплой с Docker Swarm

Ничто не предвещало, но неожиданно появилась возможность сходить на онлайн-интервью MoreView с Антоном Моревым. Поэтому приглашаем вас в гости завтра вечером.

Обсудим PHP, JS, etc. и ошеломительное человеческое стремление к прекрасному. Поговорим о подходах к разработке, важности качества проектов и о вариантах архитектуры.

Наверняка у кого-то из вас припасена пара каверзных вопросов. Приходите на прямой эфир, и там мы вместе с вами развернём горячую дискуссию. И кто-то из вас по традиции сможет выиграть пиццу:

https://www.youtube.com/watch?v=3IG1WPsmxJo

Интервью получилось интересным. Спасибо всем вам! И спасибо тем, кто задавал вопросы! Но я ответил не на все, так что решил продолжить. Об этом подробнее в нашем посте в блоге.

Новое free видео в базе знаний
Обновление пакетов при CI/CD

Время от времени в проекте желательно обновлять пакеты через Composer и Yarn. Иногда это происходит без ошибок. К счастью, у нас в этот раз оказалось не так :) Это хороший повод рассмотреть все нюансы обновления.

Про обучение: где заканчиваются сверхспособности и начинается труд?

В понедельник 3 августа в 17:00 на канале ХудоБедно будем обсуждать онлайн-обучение в целом и разные походы в частности.

Вот пара вопросов из предварительного секретного списка:

▪️Зачем скачивать бесплатно, если можно заплатить автору?

▪️Как совмещать запись скринкастов с работой и расти самому?

Здесь не будет правильного и неправильного мнения. Только личный опыт и видение.

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

Изначально я в фоне в рамках проекта по 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.