🌍 Привет мир! 👋
🌍 Привет мир! 👋
Cегодня поговорим про интересный архитектурный паттерн для frontend “Islands architecture”. Впервые идея данного паттерна была задокументирована создателем Preact.
🚀 Мотивация
Понимание Island Architecture дает важное представление о том, как работают современные фреймворки для создания высокопроизводительных веб-приложений, таких как Astro, Next.js, Nuxt.js, Vue 3 и ряд других. Этот подход помогает улучшить производительность, ускорить загрузку страниц и повысить гибкость в разработке.
Я уже неоднократно писал статьи про производительность и найти 🔎 их можно по хештегу #PERFORMANCE.
❓ Как работает Island Architecture
При данной архитектуре страница разделяется на изолированные, независимые части, называемые островками. Эти компоненты могут быть как статичными, так и динамическими.
✏️ Пример
📎 Когда страница запрашивается пользователем, сервер генерирует весь HTML для страницы, включая как статичный контент (компоненты), так и места для динамических компонентов.
📎 Статичный контент, такой как текст, изображения или макеты, генерируется на сервере и отправляется клиенту как готовая HTML-страница.
📎 Динамические части, такие как формы, виджеты, карты, или другие интерактивные элементы, отправляются на страницу как слоты. Эти части содержат минимальный HTML, который будет использоваться для гидратации.
❗️ Hydration - это момент, когда браузер загружает JavaScript-код, и этот код добавляет интерактивность.
✏️ Например: Кнопки начинают реагировать на клики, формы — на отправку, а элементы на странице становятся динамическими.
➖ Без гидратации: Страница просто показывает текст и картинки, но ничего нельзя нажать или изменить.
➖ После гидратации: Можно кликать по кнопкам, отправлять формы и взаимодействовать с элементами на странице.
💡 Статичные части страницы полностью отображаются сразу, а динамические компоненты, которые были отправлены как слоты, также отображаются, но являются неактивными так как в них нет JS.
❓ Что происходит с бандлами
1️⃣ Начальный (основной) бандл, содержит минимальный JavaScript, необходимый для гидратации динамических компонентов.
2️⃣ Динамические островки: Для каждого динамического компонента или "островка" создается отдельный бандл, который будет загружен и гидратирован только тогда, когда этот компонент нужен. Такой подход называется разделением кода (code splitting).
⚙️ Ленивая загрузка (Lazy Loading): Один из способов разделения бандлов в рамках островной архитектуры. JavaScript для каждого островка загружается только по мере необходимости, что минимизирует начальную нагрузку на браузер. Например, React.lazy (про который я писал ранее).
👉 Таким образом, бандлы загружаются по частям, только для тех элементов, которые требуют интерактивности, что значительно сокращает объем данных, загружаемых при первой загрузке страницы, и уменьшает время до первого рендера.
❗️Islands architecture❗️ не подходит для высокоинтерактивных страниц, таких как социальные сети, для которых вероятно потребуются тысячи островов.
💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍
#PERFORMANCE #ARCHITECTURE
Cегодня поговорим про интересный архитектурный паттерн для frontend “Islands architecture”. Впервые идея данного паттерна была задокументирована создателем Preact.
🚀 Мотивация
Понимание Island Architecture дает важное представление о том, как работают современные фреймворки для создания высокопроизводительных веб-приложений, таких как Astro, Next.js, Nuxt.js, Vue 3 и ряд других. Этот подход помогает улучшить производительность, ускорить загрузку страниц и повысить гибкость в разработке.
Я уже неоднократно писал статьи про производительность и найти 🔎 их можно по хештегу #PERFORMANCE.
❓ Как работает Island Architecture
При данной архитектуре страница разделяется на изолированные, независимые части, называемые островками. Эти компоненты могут быть как статичными, так и динамическими.
✏️ Пример
📎 Когда страница запрашивается пользователем, сервер генерирует весь HTML для страницы, включая как статичный контент (компоненты), так и места для динамических компонентов.
📎 Статичный контент, такой как текст, изображения или макеты, генерируется на сервере и отправляется клиенту как готовая HTML-страница.
📎 Динамические части, такие как формы, виджеты, карты, или другие интерактивные элементы, отправляются на страницу как слоты. Эти части содержат минимальный HTML, который будет использоваться для гидратации.
❗️ Hydration - это момент, когда браузер загружает JavaScript-код, и этот код добавляет интерактивность.
✏️ Например: Кнопки начинают реагировать на клики, формы — на отправку, а элементы на странице становятся динамическими.
➖ Без гидратации: Страница просто показывает текст и картинки, но ничего нельзя нажать или изменить.
➖ После гидратации: Можно кликать по кнопкам, отправлять формы и взаимодействовать с элементами на странице.
💡 Статичные части страницы полностью отображаются сразу, а динамические компоненты, которые были отправлены как слоты, также отображаются, но являются неактивными так как в них нет JS.
❓ Что происходит с бандлами
1️⃣ Начальный (основной) бандл, содержит минимальный JavaScript, необходимый для гидратации динамических компонентов.
2️⃣ Динамические островки: Для каждого динамического компонента или "островка" создается отдельный бандл, который будет загружен и гидратирован только тогда, когда этот компонент нужен. Такой подход называется разделением кода (code splitting).
⚙️ Ленивая загрузка (Lazy Loading): Один из способов разделения бандлов в рамках островной архитектуры. JavaScript для каждого островка загружается только по мере необходимости, что минимизирует начальную нагрузку на браузер. Например, React.lazy (про который я писал ранее).
👉 Таким образом, бандлы загружаются по частям, только для тех элементов, которые требуют интерактивности, что значительно сокращает объем данных, загружаемых при первой загрузке страницы, и уменьшает время до первого рендера.
❗️Islands architecture❗️ не подходит для высокоинтерактивных страниц, таких как социальные сети, для которых вероятно потребуются тысячи островов.
💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍
#PERFORMANCE #ARCHITECTURE
Хотите больше таких постов?
Подпишитесь на канал и читайте продолжение в Telegram.