Итоги недели в мире фронтенда и обзоры новых сервисов: секреты идеального фронтенда

Оригинал публикации

Гидратация – это процесс, который JavaScript выполняет для взаимодействия с уже существующим HTML-кодом, загруженным в DOM через серверный рендеринг (SSR). Это подход позволяет быстро показать пользователю основное содержимое страницы, а затем добавить интерактивные элементы:

Процесс называется гидратацией, потому что JavaScript буквально оживляет HTML – подливает в сухой статический код живой воды интерактивности. 🙂

Большинство популярных JS-фреймворков поддерживают гидратацию. Возьмем, к примеру, фреймворк Next.js, предназначенный для работы с React – он поддерживает как серверный рендеринг, так и гидратацию. Гидратация в React – это процесс привязки React к уже существующему HTML, который был сгенерирован на сервере. Во время гидратации React добавляет обработчики событий к существующим элементам и берет на себя рендеринг приложения на стороне клиента.

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

Работающий пример можно посмотреть на CodePen:

Когда браузер загружает эту страницу, он получает пустой HTML-каркас:

Затем приложение рендерится на клиенте. Однако такой подход не идеален: если JavaScript вдруг не загрузится, сайт не будет работать. Это может произойти по разным причинам: ошибка в коде, проблемы с сетью, (не)преднамеренная блокировка JavaScript пользователем и т. д.

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

Если использовать Next.js с серверным рендерингом, то HTML-вывод будет выглядеть иначе – контент будет отображаться сразу в HTML:

Этот подход намного лучше, так как браузер может сразу отобразить контент, и любые автоматизированные запросы (например, от ботов или curl) будут успешными (что очень важно для SEO и соблюдения стандартов доступности).

После загрузки JavaScript происходит гидратация HTML. Во время гидратации обработчики событий, такие как onClick, будут добавлены к кнопкам, и они станут интерактивными. С одной стороны, добавление интерактивности во время второго рендера – не совсем идеальное решение, но с другой стороны – быстрая загрузка большого объема контента иногда бывает важнее.

Использование серверного рендеринга и гидратации связано с определенными сложностями:

Использование серверного рендеринга и гидратации сопряжено с несколькими потенциальными проблемами:

Основной минус гидратации – накладные расходы, поскольку она подразумевает восстановление обработчиков событий путем загрузки и повторного выполнения всех компонентов, которые были отрендерены на сервере. Таким образом, сайт отправляется клиенту дважды: сначала как HTML, а затем как JavaScript. Этот подход оправдан, если вам нужен и серверный рендеринг, и интерактивность. Но если вам не нужна никакая интерактивность вообще, то можно использовать SSR без всякой гидратации:

Оригинал публикации

Почему это важно: Неравномерные отступы и поля создают ощущение неаккуратности и неопытности. Равномерные отступы делают интерфейс более чистым и профессиональным.

Как это сделать: Используйте кратные значения, например, кратные 4 (4px, 8px, 12px, 16px):

Это создает ритм в вашем макете и делает его более аккуратным:

Почему это важно: Пользователи могут испытывать недоумение, когда открывают приложение и видят пустой экран. Это может произойти, если разработчики забывают продумать пустые состояния.

Как это сделать: Добавьте полезные сообщения или кнопки действий (CTA), чтобы направить пользователей на следующий шаг.

Почему это важно: Если приложение выполняет действие в фоновом режиме, дайте пользователям знать об этом, чтобы они не ломали голову, сработала ли кнопка и не зависло ли приложение.

Как это сделать: Используйте задержку при показе индикатора загрузки для быстрых операций, чтобы он не исчезал слишком быстро.

Почему это важно: Не все элементы на экране одинаково важны. Ваш интерфейс должен это отражать, чтобы пользователи понимали, что важно.

Как это сделать: Используйте разные размеры, цвета и толщину шрифтов, чтобы выделить ключевые элементы.

Почему это важно: Не нужно заполнять каждую часть экрана чем-то. Пустое, или, как его еще называют, негативное, пространство помогает вашему приложению «дышать» и позволяет пользователям сосредоточиться на самых важных элементах.

Как это сделать: Увеличьте расстояние между несвязанными элементами и уменьшите его между связанными.

Почему это важно: Ошибки неизбежно случаются, и важно, чтобы пользователи знали, что именно произошло. Вместо простого сообщения об ошибке, например, «Ошибка 404», нужно предоставить контекст и варианты решения проблемы.

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

Почему это важно: Если текст обрезается или кнопка неактивна, подсказка может предоставить дополнительную информацию, помогая пользователям понять, почему это происходит.

Как это сделать: Используйте подсказки, чтобы предоставить контекст или объяснить, почему кнопка неактивна и что пользователь может или должен сделать в связи с этим.

Почему это важно: Цвета играют важную роль в навигации по приложению. Правильные цвета помогают пользователям быстро понять контекст (например, красный для ошибок и зеленый для успеха), даже не вникая в текст сообщения.

Как это сделать: Следуйте установленным цветовым конвенциям, чтобы избежать путаницы у пользователей.

Почему это важно: Не перегружайте интерфейс иконками без необходимости – не каждому пункту меню, например, непременно нужна иконка. Каждая иконка должна иметь ясную цель и улучшать взаимодействие с пользователем.

Как это сделать: Делайте иконки простыми и узнаваемыми, чтобы они соответствовали действиям, которые они представляют.

Почему это важно: Не обязательно писать все с нуля. Существуют отличные UI-библиотеки – Ant Design, Shadcn UI, Material UI, Chakra UI и т. д., которые могут сэкономить время, усилия и придать вашему фронтенду стильный вид.

Как это сделать: Если вам нужно быстрое решение или ваше время ограничено, используйте готовые библиотеки. Но если вы строите что-то исключительно для обучения, смело погружайтесь в детали и создавайте свои собственные компоненты.

Больше советов о создании идеального UI/UX – в этом лонгриде профессионального дизайнера и фронтендера Адама Даннавэя.

Автор рассылки: Наталья Кайда