На передовой веб-разработки

Миллионы нюансов и сотни часов на изучение. Здесь, в Evrone, мы занимаемся заказной разработкой и точно знаем, какой колоссальный объём информации приходится перерабатывать Frontend-разработчикам, чтобы обладать актуальными знаниями и быть на острие технологий. Экономим ваше время: наливайте чашечку кофе и читайте про самое интересное в нашем дайджесте.

Ход конём от Vercel

Несколько дней назад создатели Next.js, компания Vercel выложили свой Platforms Starter Kit, представляющий собой глобальный шаблон для создания fullstack-приложений с поддержкой пользовательских доменов. Суть в использовании следующей связки:

• Next.js в качестве React-фреймворка
• Tailwind в роли CSS-фреймворка
• Prisma используется для реализации ORM
• PlanetScale в качестве масштабируемой БД (MySQL)
• NextAuth.js для аутентификации
• Vercel как платформа для развёртывания

Основная прелесть подхода — возможность обслуживания разных клиентов в разных доменах с использованием одной и той же кодовой базы. Vercel позиционирует этот шаблон как оптимальный для быстрого построения платформ с большим количеством контента, интернет-магазинов и B2B2C. Исходный код доступен в репозитории проекта. Также есть отличный гайд по запуску.

Отказ от gatsby-recipes в Gatsby.js

«Не каждая птица долетит до середины Днепра»‎ и не каждая программа способна выйти из альфы и дожить до релиза. Увы, но это коснулось и gatsby-recipes, представленного в начале 2020 года. Этот инструмент был создан с целью автоматизации стандартных задач по созданию сайтов.

Базовый посыл к созданию gatsby-recipes был в том, чтобы уменьшить порог входа в Gatsby.js. Разработчики получили возможность выполнять определенные задачи автоматически с помощью человекочитаемых скриптов, базирующихся на формате MDX (компоненты Markdown + React). 

Идея была хороша, но привела к появлению большого количества зависимостей в gatsby-cli и в целом потребовала слишком серьёзных изменений. Это и послужило причиной отказа от поддержки gatsby-recipes в Gatsby.js v4.5 и его перевода в статус deprecated.

Сильно расстраиваться не стоит, так как инструмент остается в монорепозитории проекта и его в целом до сих пор можно использовать, но на свой страх и риск. 

Тренд на Micro Frontends

Идея разделения одностраничного приложения на разделы, каждый из которых может разрабатываться отдельно независимыми командами, возникла давно и уже успешно реализуется во множестве проектов. Такая архитектура «‎из коробки»‎ позволяет использовать разные фреймворки и библиотеки не глобально, а под каждый конкретный раздел. Ещё один бонус — возможность масштабирования для команд разработки.

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

Начать работу с Micro Frontends достаточно просто. В этой статье рассказано о том, как развернуть свой собственный проект с такой архитектурой, используя Nx Workspace и Angular CLI. Авторы используют AWS, развёртывая каждое приложение в отдельном S3-бакете, но в целом этот трюк можно провернуть с любым S3-совместимым объектным хранилищем.

 

htmx — old-fashioned интерактивность

Мы видели многое, но вот библиотеку с собственным японским трёхстишием в репозитории встречаем впервые:

javascript fatigue:
longing for a hypertext
already in hand

Хайку стали демократической революцией в японской поэзии 17-го века. Такой же трюк совершает htmx: дает доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events прямо из HTML. Библиотека достаточно самостоятельна и не имеет зависимостей от какого-либо фреймворка или языка. Минимальная реализация в заархивированном виде (htmx.min.js.gz) занимает всего лишь 11 Кб.

В целом htmx можно рассматривать как HTML «на стероидах», с помощью которого можно создавать современные пользовательские интерфейсы. Реализуется это через дополнительные атрибуты в HTML-тегах для получения динамического содержимого и обновлений.

Меньше путаницы, меньше кода на JS, отсутствие сборки — такой приоритет поставил перед собой разработчик htmx и преуспел. Наверное, если бы Мацуо Басё был фронтенд-разработчиком, то он точно бы оценил такой подход. Впрочем, время покажет.

Как работает Flexible Box Layout

Создание адаптивных макетов — задача, с которой сталкивается абсолютное большинство фронтенд-разработчиков. И если в далеком прошлом у нас главенствовала простая табличная разметка, то затем стало активнее использоваться свойство float. Наконец всё пришло к таким двум системам, как CSS Flexible Box Layout (aka Flexbox) и CSS Grid Layout (aka Grid). Несмотря на кажущуюся простоту, в них легко запутаться, что регулярно демонстрируют юные фронтенд-падаваны на собеседованиях.

Прежде всего стоит запомнить, что Flexbox необходим для распределения элементов и свободного пространства внутри содержащего его элемента. Работает он только в одном направлении — либо только строка, либо только столбец. У него нет возможности работать в двух направлениях (как в Grid). 

Имеется одна главная направленная ось, вдоль которой будут выкладываться все элементы. Свободное пространство между элементами при этом исчезает. Ещё есть поперечная направленная ось, которая отвечает за выкладку строк (для многострочных flex-контейнеров). Выравнивание элементов и порядок их отображения задается соответствующими свойствами, такими как justify-content (по основной оси) и align-items/align-self (по поперечной оси).

Для каждого элемента можно задать базовый размер (flex-basis). Оперируя коэффициентами роста (flex-grow) и сжатия (flex-shrink), можно менять характеристики flex-элементов, влияя на их длину и ширину. Таким образом, заполняется максимум свободного пространства в основном измерении. 

Чтобы визуально понять суть Flexbox, cоветуем заглянуть в подборку GIF-анимации, иллюстрирующей поведение элементов. Ну а для закрепления материала вполне можно почитать про основные понятия Flexbox на портале разрабочиков Mozilla.

 

Конкурсы для разработчиков