Рассмотрим как устроены компонентные системы в популярных платформах управления сайтами на примере Astro, Next.js, Laravel (Blade), WordPress (Gutenberg) и Bitrix. Сравним на одном сценарии, сходства и отличия в том как в них устроено переиспользование UI компонентов и сборка страниц.
За последние 10–12 лет веб-разработка радикально изменилась. Если раньше страница собиралась из разрозненных HTML-блоков и CSS-классов, то сегодня почти все серьёзные проекты строятся вокруг компонентов — переиспользуемых, изолированных и предсказуемых единиц интерфейса.
Компонентная система — это не просто «удобный способ писать код». Это архитектурный подход, который влияет на скорость разработки, поддерживаемость, масштабируемость и даже на то, как контент-менеджеры работают с сайтом.
В этой статье разберём:
- как эволюционировали подходы к компонентам;
- как устроены компонентные системы в популярных платформах;
- на конкретном примере покажем разницу между ними.
От BEM к современным системам
BEM (Block, Element, Modifier) был одним из первых системных ответов на хаос в CSS. Он дал чёткие правила именования:
<button class="button button--primary button--large">
<span class="button__icon">→</span>
Купить
</button>
BEM хорошо решал проблему конфликтов стилей и позволял создавать относительно независимые блоки. Но у него были ограничения:
- многословный HTML;
- сложность создания настоящей дизайн-системы;
- отсутствие логики и состояния внутри «компонента».
Сегодня на смену пришли два основных направления:
- Utility-first + семантические обёртки Tailwind CSS + DaisyUI / Flowbite / Shadcn/ui. Стили пишутся через утилиты, а поверх них появляются готовые компоненты.
- Настоящие компоненты с логикой React/Vue/Svelte-компоненты, Blade-компоненты, Astro-компоненты, Gutenberg-блоки, Bitrix-компоненты.
Современная компонентная система обычно включает:
- переиспользование;
- изоляцию стилей и логики;
- возможность передачи параметров (props);
- слоты / области контента;
- единый источник правды для дизайн-системы.
Как устроены компонентные системы на разных платформах
Рассмотрим пять популярных решений и покажем, как в них реализуется одна и та же задача:
Есть страница с секцией Hero.
Кнопка должна быть общей для всего сайта (единый внешний вид, единое поведение).
Сама секция Hero — просто разметка страницы, а не отдельный сложный компонент.
1. Astro JS & Daisy UI
Astro — одна из самых «чистых» компонентных систем. Компоненты по умолчанию серверные и очень лёгкие.
Компонент кнопки (Button.astro):
---
interface Props {
href?: string;
variant?: 'primary' | 'secondary';
size?: 'sm' | 'md' | 'lg';
}
const { href, variant = 'primary', size = 'md' } = Astro.props;
---
<a href={href} class:list={['btn', `btn-${variant}`, `btn-${size}`]}>
<slot />
</a>
Страница с Hero:
---
import Button from '../components/Button.astro';
---
<section class="hero">
<h1>Современный сайт</h1>
<p>Компонентная архитектура</p>
<Button href="/catalog" variant="primary" size="lg">
Перейти в каталог
</Button>
</section>
Сильные стороны: простота, производительность, отличная композиция.
Слабые: меньше «магии» для сложных интерактивных интерфейсов (хотя острова решают эту задачу).
2. Next JS (React + Shadcn/UI)
Самый популярный стек для сложных приложений.
Кнопка обычно берётся из Shadcn/ui (или пишется своя):
import { Button } from "@/components/ui/button"
import Link from "next/link"
export function SiteButton({ href, children, ...props }) {
return href ? (
<Button asChild {...props}>
<Link href={href}>{children}</Link>
</Button>
) : (
<Button {...props}>{children}</Button>
)
}
На странице:
<section className="hero">
<h1>Современный сайт</h1>
<p>Компонентная архитектура</p>
<SiteButton href="/catalog" size="lg">
Перейти в каталог
</SiteButton>
</section>
Здесь компонент — полноценный React-элемент с типизацией, возможностью клиентской логики и отличной интеграцией с дизайн-системой.
3. Laravel (Blade Components)
Один из самых элегантных серверных подходов на PHP.
Компонент (resources/views/components/button.blade.php):
@props(['href' => null, 'variant' => 'primary', 'size' => 'md'])
<a href="{{ $href }}" {{ $attributes->merge(['class' => "btn btn-{$variant} btn-{$size}"]) }}>
{{ $slot }}
</a>
В шаблоне страницы:
<section class="hero">
<h1>Современный сайт</h1>
<p>Компонентная архитектура</p>
<x-button href="/catalog" variant="primary" size="lg">
Перейти в каталог
</x-button>
</section>
Синтаксис <x-button> очень близок к React/Vue, но всё выполняется на сервере.
4. WordPress (Gutenberg / Block Themes)
В современном WordPress компонент = блок. Однако в отличие от компонентов выше, тут блок может не только вставляться в код, но и использоваться в редакторе контента и конструкторе страниц сайта без кода.
Образуется магия интеграции Code-driven + Content-driven. Хотите пишите кодом, хотите редактируйте контент прямо на сайте без кода. Это ключевое преимущество WordPress.
Кнопку можно сделать:
- кастомным блоком;
- переиспользуемым блоком (Reusable Block / Pattern);
- через
theme.json+ стили.
Пример вызова кастомного блока в шаблоне:
<!-- wp:group {"className":"hero"} -->
<div class="hero">
<!-- wp:heading -->
<h1>Современный сайт</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Компонентная архитектура</p>
<!-- /wp:paragraph -->
<!-- wp:mytheme/button {"text":"Перейти в каталог","url":"/catalog/","variant":"primary"} /-->
</div>
<!-- /wp:group -->
Плюс WordPress — пользователи и контент-менеджеры могут собирать страницы сайта из блоков без участия разработчика.
Минус — более высокий порог входа при создании сложных переиспользуемых компонентов для разработчиков.
5. Bitrix CMS
Bitrix имеет собственную, довольно «тяжёлую», но мощную компонентную систему.
Компонент кнопки (local/components/my/button/):
// component.php
$arResult["TEXT"] = $arParams["TEXT"] ?? "Кнопка";
$arResult["URL"] = $arParams["URL"] ?? "#";
$arResult["VARIANT"] = $arParams["VARIANT"] ?? "primary";
$arResult["SIZE"] = $arParams["SIZE"] ?? "md";
$this->IncludeComponentTemplate();
// template.php
<a href="<?= htmlspecialcharsbx($arResult["URL"]) ?>"
class="btn btn-<?= htmlspecialcharsbx($arResult["VARIANT"]) ?> btn-<?= htmlspecialcharsbx($arResult["SIZE"]) ?>">
<?= htmlspecialcharsbx($arResult["TEXT"]) ?>
</a>
Шаблон страницы (Hero — обычная секция):
<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Главная");
?>
<section class="hero">
<div class="container">
<h1 class="hero__title">Современный сайт на Bitrix</h1>
<p class="hero__subtitle">Компонентная архитектура с общей кнопкой</p>
<div class="hero__actions">
<?$APPLICATION->IncludeComponent(
"my:button",
"",
[
"TEXT" => "Перейти в каталог",
"URL" => "/catalog/",
"VARIANT" => "primary",
"SIZE" => "lg",
]
);?>
</div>
</div>
</section>
<?php require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); ?>
В Bitrix компонент — это полноценный PHP-модуль с параметрами, шаблонами и кэшированием. Секции страниц при этом чаще всего остаются обычной разметкой.
Сравнительная таблица
| Платформа | Тип компонента | Синтаксис вставки | Уровень изоляции | Удобство для контент-менеджера | Производительность |
|---|---|---|---|---|---|
| Astro | .astro-файл | <Button /> | Высокий | Средний | Отличная |
| Next.js | React-компонент | <Button /> | Максимальный | Низкий (нужен код) | Высокая |
| Laravel | Blade-компонент | <x-button> | Высокий | Низкий | Высокая |
| WordPress | Gutenberg-блок / Pattern | <!-- wp:... --> | Средний | Высокий | Средняя |
| Bitrix | PHP-компонент | IncludeComponent() | Средний | Средний | Средняя |
Выводы и рекомендации
Главный принцип современной компонентной архитектуры остаётся одним:
Общие элементы интерфейса (кнопки, поля, карточки, модалки) должны существовать в одном месте.
Секции страниц могут быть простой разметкой, которая эти компоненты использует.
Именно такой подход — разделение на переиспользуемые компоненты и секции страниц — позволяет проектам оставаться поддерживаемыми годами, а не превращаться в монолитный спагетти-код.
Рекомендации:
- Если нужна максимальная производительность и современный DX — Astro или Next.js.
- Если проект на PHP и важна чистота серверного кода — Laravel Blade Components.
- Если сайт активно наполняется редакторами — WordPress с block-темой.
- Если уже есть экосистема Bitrix — используйте её компонентную систему, но выносите общие элементы (кнопки, карточки, формы) в отдельные компоненты.
