Это решает проблемы с производительностью в больших приложениях. Разработчики тратят меньше времени на boilerplate, а пользователи получают сверхбыстрые интерфейсы. Давайте разберем, как это работает на примерах.

Сигналы: основа новой реактивности

Сигналы в Svelte 5.1 - это простые функции, которые хранят состояние и автоматически отслеживают зависимости. Вместо глобального трекинга, как раньше, они обновляют только используемые части UI. Это похоже на signals из Solid.js, но встроено прямо в Svelte без внешних библиотек.

Возьмем счетчик: раньше нужен был writable store с подпиской, теперь const count = signal(0). При изменении count обновляется только текст с этим значением. На сервере сигналы сериализуются для SSR, а на клиенте гидратируются без ошибок. Это снижает размер бандла и ускоряет запуск.

• Создание сигнала: const count = signal(0); - готово, никаких импортов.
• Чтение: Просто count() в шаблоне или JS, Svelte подпишется автоматически.
• Обновление: count.update(n => n + 1) или count.set(5) для прямой установки.
• Нюанс: Сигналы мутабельны только в обновлениях, чтобы избежать race conditions.

Руны: реактивность без компилятора

Руны - это ключевые слова вроде $state, $derived и $effect, которые добавляют реактивность прямо в JS. Они не требуют компиляции на этапе сборки, работают в рантайме. $state создает сигнал, $derived вычисляет значения на основе зависимостей, $effect запускает сайд-эффекты.

Пример: $state({ count: 0 }) для объекта, Svelte превратит свойства в сигналы. Измените count, и шаблон обновится. Для производных: const double = $derived(count() * 2). Эффекты: $effect(() => console.log(count())) - логирует при изменениях. Это делает код предсказуемым и переносимым.

• $state: Для мутабельного состояния, работает с примитивами и объектами.
• $derived: Вычисляемые значения, пересчитываются только при изменении зависимостей.
  1. Пример: const total = $derived(items().length * price());.
• $effect: Сайд-эффекты, как подписки или логи.
• Важно: Руны работают везде - в компонентах, утилитах, даже вне Svelte.

Преимущество: Нет магических $ префиксов в шаблонах, все явно.

Примеры сверхбыстрого UI

В реальных приложениях сигналы ускоряют списки и формы. Для todo-листа: массив в $state, добавление через push, UI обновляется точечно. Формы: bind:value с сигналами валидирует на лету без библиотек. Анимации встроены, transition работает с сигналами из коробки.

Сравним с React: там useState + useEffect, в Svelte - одна руна. В списке из 1000 элементов только измененный рендерится. На мобильных устройствах разница в FPS огромна. Интеграция с SvelteKit позволяет сигналы на сервере для API.

• Список задач:
  • $state(todos = []);
  • todos.push({ text: input(), done: false });;
  • Шаблон: {#each $todos as todo} ... {/each}.
• Форма с валидацией: $derived(isValid = email().includes('@')).
• Эффект для API: $effect(() => fetch(/api/${id()})).

Совет: Для больших состояний группируйте в proxy-объекты с $state.

Взгляд на производительность и будущее

Сигналы делают Svelte 5.1 лидером по скорости UI - тесты показывают в 2-3 раза меньше операций DOM. Без компилятора код работает в любом JS-окружении, от браузера до Node. Это открывает двери для серверных компонентов и edge computing.

Остается экспериментировать с комбинациями рун в утилитах. Следующий шаг - полная совместимость с Web Components. Такие изменения меняют подход к фронтенду навсегда.