Front-end

• Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.

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

• Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.

• Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.

Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами.

innerHTML

Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML-строках, что делает его безопасным при работе с непроверенным содержимым.

innerHTML + template

Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML-структуру, включая элементы, связанные с таблицами – <tr> и <td>.

insertAdjacentHTML

Как и innerHTML, этот метод обрабатывает только допустимые HTML-узлы и не выполняет скрипты.

DOMParser

Этот метод работает медленнее остальных, поскольку он разбирает строку, создавая полный HTML-документ, и только потом извлекает узел из документа. Он также может обрабатывать только допустимые узлы HTML и не выполняет скрипты.

Range.createContextualFragment

Самый простой, но не безопасный метод – выполняет скрипты. Поэтому при его использовании необходимо очищать данные для защиты от XSS – например, с помощью DOMPurify.

🦮 Интерактивные гайды

Гайд по SVG

SVG-графика предоставляет нам стандартизированный способ создания изображений и иконок, которые можно отображать в любом размере без потери качества изображения. Но разобраться в методах SVG не так-то просто. На помощь придет интерактивный справочник SSSVG.

К слову, возможности SVG простираются за пределы создания векторных картинок и лого: энтузиасты умудрились сделать «Тетрис» в виде одного SVG-файла.

Гайд по :has() в CSS

Псевдокласс :has() открывает новые возможности для творческих экспериментов в CSS, позволяя создавать сложные и интерактивные дизайны без использования JavaScript. Это первый родительский селектор, позволяющий стилизовать элемент в зависимости от его содержимого. Все невероятные возможности :has() продемонстрированы в интерактивном гайде CSS :has() Interactive Guide.

🪚 Инструменты

Plasmic – опенсорсный визуальный конструктор для создания сайтов и веб-приложений на React со множеством функций:

• Можно интегрировать с существующими React-проектами.

• Можно использовать как CMS.

• Позволяет подключать разные источники данных и бэкенд-сервисы.

• Совместим с Next.js и Gatsby.

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

article-extractor – эта библиотека Node.js извлекает текст статей, метаданные и ссылки на изображения по URL.

Turndown – Node.js-библиотека для конвертирования HTML в Markdown. Отлично работает в связке с предыдущим инструментом.

15 полезных расширений VS Code для фронтендера

• Auto Rename Tag – при переименовании HTML-тега автоматически обновляет парный тег.

• Code Spell Checker – находит опечатки в именах переменных и других идентификаторах.

• DotEnv – добавляет цветовое оформление и улучшает читаемость файлов с переменными окружения.

• Docker – добавляет вкладку для удобной работы с контейнерами, если вы используете Docker.

• ESLint – выявляет проблемы в коде (нарушения форматирования или потенциальные ошибки) на лету.

• Figma – позволяет встраивать и просматривать файлы дизайна Figma прямо в VS Code.

• GitHub Copilot – предлагает AI-генерируемые подсказки во время набора кода.

• Copilot Chat – предоставляет окно чата в стиле ChatGPT прямо в редакторе.

• GraphQL – набор расширений, упрощающих работу с GraphQL.

• Import Cost – показывает размер импортируемых пакетов, помогая выявить потенциальное раздувание кода.

• Live Server – запускает локальный сервер с автоматической перезагрузкой, что удобно для предварительного просмотра изменений.

• Live Share – позволяет программировать в команде с другими разработчиками, работая в одном редакторе в реальном времени.

• Markdown Preview Enhanced – предоставляет живой предпросмотр Markdown-файлов во время редактирования.

• Notes – удобный блокнот для хранения заметок по проекту, инструкций по настройке и т. д.

• Hinty – предоставляет динамические подсказки в реальном времени. Помогает избегать повторения распространенных ошибок и соблюдать стандарты написания кода в команде.

⚛️ Как выбрать оптимальную стратегию рендеринга

Рендеринг – это процесс превращения кода в контент. За годы развития интернета эта технология прошла долгий путь – от формирования простейших HTML-страниц на стороне сервера до динамического обновления интерактивных приложений без перезагрузки. Сейчас в ходу несколько методов рендеринга:

• Генерация статических сайтов (предварительно генерирует HTML-страницы во время сборки приложения).

• Генерация на стороне сервера (генерирует полный HTML для страницы при каждом запросе).

• Генерация на стороне клиента (использует JavaScript для рендеринга контента в браузере пользователя).

• Инкрементальная статическая регенерация (позволяет обновлять отдельные страницы после сборки сайта).

• Частичный пререндеринг (экспериментальный подход, который стремится автоматически оптимизировать стратегии рендеринга).

Эти методы по-разному подходят к оптимизации работы приложения, SEO и пользовательского опыта. Их можно комбинировать – это позволяет по максимуму использовать сильные стороны, нивелировать недостатки и обеспечить оптимальный баланс производительности, свежести данных и интерактивности. Разработчики Vercel (эта компания создала Next.js) написали подробную статью о преимуществах и недостатках каждого подхода и о том, как их лучше комбинировать.

Генератор статических сайтов (SSG)

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

Преимущества:

• Самая быстрая загрузка страниц.

• Отличные показатели SEO.

• Самая низкая нагрузка на сервер.

• Низкие затраты на инфраструктуру.

Недостатки:

• Увеличенное время сборки для сайтов с большим количеством страниц.

• Обновление контента требует новой сборки и развертывания.

Рендеринг на стороне сервера (SSR)

Идеально подходит для персонализированных дашбордов, лент соцсетей и визуализации данных в реальном времени.

Преимущества:

• Всегда отдает свежий, актуальный контент.

• Показатели SEO и времени загрузки данных лучше, чем при рендеринге на стороне клиента.

Недостатки:

• Загрузка происходит медленнее, чем при использовании SSG или ISR.

• Показатель времени до первого байта (TTFB) может быть неудовлетворительным.

• Потребляет больше серверных ресурсов.

Инкрементальная статическая регенерация (ISR)

Подходит для случаев, когда сборка с SSG занимает слишком много времени. Используется для страниц продуктов в e-commerce, новостных порталов и крупных контентных сайтов.

Преимущества:

• Сохраняет быструю загрузку страниц, как у SSG.

• Позволяет обновлять контент по требованию без полной пересборки.

• Эффективно масштабируется на большое количество страниц.

• Может быть экономичнее, чем SSR, в некоторых случаях.

Недостаток:

• Требует тщательного управления стратегиями инвалидации кэша.

Рендеринг на стороне клиента (CSR)

Подходит для интерактивных элементов страницы, требующих немедленной обратной связи, админ-панелей с данными в реальном времени и приложений типа Notion, которые непрерывно синхронизируют вводимые пользователем данные с сервером.

Преимущества:

• Самый интерактивный пользовательский опыт.

• Плавные переходы между состояниями приложения.

• Взаимодействие с внешними данными в реальном времени.

Недостатки:

• Начальная загрузка может быть медленнее из-за необходимости загрузки JavaScript-бандла.

• Оптимизация Core Web Vitals может быть сложной.

• Требует тщательного управления состоянием на клиенте.

Частичный пререндеринг (PPR)

PPR призван объединить преимущества других стратегий рендеринга и потенциально может стать стандартным подходом для веб-приложений в будущем.

Преимущества:

• Мгновенная загрузка страницы (как у SSG).

• Плавная потоковая передача динамического контента.

• Улучшенная производительность с меньшими затратами на разработку.

Недостатки:

• Все еще находится в стадии исследований и разработки.

• Может потребовать рефакторинга кода для включения в существующий проект.

Выбор стратегии рендеринга

При выборе стратегии рендеринга нужно учитывать следующие факторы.

Как часто обновляется контент?

• Статический контент лучше всего обрабатывать генератором статических сайтов.

• Для вывода периодически обновляемого контента отлично подходит инкрементальная статическая регенерация.

• Обновление контента в реальном времени требует серверного или клиентского рендеринга.

Для повышения производительности нужно стремиться к максимальному использованию SSG и ISR, прибегая к SSR только в случае необходимости получения абсолютно свежих данных.

Насколько важно продвижение страницы в поисковых системах?

• Хотя Google может рендерить JavaScript на стороне клиента, ключевые показатели Core Web Vitals все еще сильно влияют на ранжирование.

• Высоких показателей CWV легче добиться на статических и серверных страницах, чем на страницах с клиентской загрузкой внешних данных.

Насколько активно пользователь будет взаимодействовать со страницей?

• Если страница в основном статическая с минимальным взаимодействием, используйте SSG или ISR с небольшим количеством клиентского JavaScript.

• В противном случае может потребоваться SSR (с гидратацией на стороне клиента).

Каковы требования к скорости загрузки?

• Для максимально быстрой начальной загрузки используйте SSG или ISR с редкой инвалидацией.

• Чтобы сбалансировать свежесть данных и скорость, используйте ISR или SSR (для актуальных данных).

• CSR может обеспечить данные в реальном времени, но часто за счет начальной загрузки.

Нужно ли персонализировать контент?

• Если вам нужен персонализированный контент, скорее всего, потребуется SSR или CSR.

• ISR может работать в случаях, когда можно кэшировать персонализированный контент, например, настройки веб-приложения.

• SSG не позволяет персонализировать контент.

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

P.S. Если кто-то скажет, что React или Angular лучше, можете смело кидать в них помидорами. Vue - он как Чак Норрис в мире фронтенда, только лучше! 😎

Кто уже юзает Vue? Делитесь впечатлениями в комментах!

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

А что насчёт зарплат? Ну, скажем так – на хлеб с икрой хватает 😉

Если у вас есть вопросы – задавайте в комментариях. Буду рад поделиться опытом!

P.S. А вы бы хотели стать фронтендером?

Хотите, чтобы я что-то добавил или изменил в статье?

Angular: Танк от Google

Angular - это как швейцарские часы: сложный механизм, но работает как часы (простите за каламбур).

Плюсы:

• Мощный, как трактор "Беларусь"

• Сложноват для новичков (но если освоите - цены вам не будет)

• Документация подробная, как инструкция к стиральной машине

• Инструментов больше, чем в гараже у Кулибина

• Популярен в корпорациях (как костюмы и галстуки)

В итоге, что выбрать?

• React - если хотите быть как крутые стартаперы из Кремниевой долины

• Vue.js - если хотите быстро создать что-то красивое и не сломать мозг

• Angular - если вы любите сложные механизмы и работаете в большой компании

А вы, друзья, какой фреймворк предпочитаете? Делитесь в комментариях! И да пребудет с вами сила JavaScript!

P.S. Не забудьте поставить плюсик, если статья была полезной. Ваша поддержка вдохновляет меня на новые посты!