Релиз SvelteKit 1.0. Что нового в SvelteKit?

Вышел релиз SvelteKit 1.0. На сегодняшний день это рекомендуемый способ создания приложений Svelte. Для создания проекта достаточно запустить npm create svelte@latest.

Что такое SvelteKit?

SvelteKit — это фреймворк для создания веб-приложений на основе Svelte, фреймворка для создания UI компонентов, который разработчики любят за его производительность и простоту использования. Если вы использовали UI фреймворки, такие как Svelte, вы знаете, что они значительно упрощают создание пользовательских интерфейсов, в отличии от прямого изменения DOM.

Особенности SvelteKit

По умолчанию SvelteKit использует навигацию на стороне клиента после начальной загрузки страницы, отображаемой сервером. Это обеспечивает более быстрые переходы между страницами, состояние, которое сохраняется между страницами (например, положение прокрутки боковой панели), и загрузку меньшего количества данных. Это также позволяет избежать повторного запуска сторонних скриптов, таких как аналитика, при каждой загрузке страницы. SvelteKit позволяет вам использовать один язык вместо двух тесно связанных приложений (одно для создания HTML, другое для обработки взаимодействия на стороне клиента). Поскольку SvelteKit работает везде, где работает JavaScript, вы можете развернуть свое приложение как традиционный NodeJS сервер или использовать serverless функции. С помощью SvelteKit можно создавать приложения с персонализированными данными без снижения производительности и без layout shift после запроса данных, который происходит после загрузки страницы.

Переходные приложения (transitional apps)

SvelteKit вводит такое понятие как переходное приложение (transitional apps). Что такое переходное приложение? В переходных приложениях представлены элементы как традиционной, так и современной архитектуры. Этот термин заимствован из понятия «переходный дизайн» в дизайне интерьера. Переходные приложения, как и многостраничные приложения, обрабатываются на стороне сервера для быстрой начальной загрузки, устойчивы, поскольку по умолчанию работают без JS, и обеспечивают согласованность благодаря встроенным функциям специальных возможностей. Но, как и одностраничные приложения, они также имеют единую кодовую базу, быструю навигацию, персистентность элементов и управление состоянием на стороне клиента.

1. Что такое Svelte и как он устроен?

В этом уроке проинициализируем default проект на Svelte и рассмотрим структуру default проекта. Смотреть на Rutube

2. Как устроен Компонент в Svelte?

В этом уроке рассмотрим компоненты Svelte, пропс (props, $$props, $$restProps, export let prop), реактивность SvelteJS, блоки script и style, изоляцию стилей и :global() Смотреть на Rutube

3. Жизненный цикл Svelte компонента

В этом видео рассматриваем методы жизненного цикла компонентов Svelte, а именно onMount, onDestroy, beforeUpdate, afterUpdate, а также функция tick. Смотреть на Rutube

4. HTML шаблоны в Svelte

В этом уроке рассмотрим cинтаксис HTML шаблонов Svelte, а именно if, each, await, key, а также html и debug. Смотреть на Rutube

5. Как работать с событиями в Svelte?

В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директиву on, модификаторы событий, переброс событий, createEventDispatcher и т.д. Смотреть на Rutube

6. Байндинги и Привязки - Svelte Bindings

В этом уроке рассмотрим привязки в Svelte, синтаксис и директиву bind:, привязки к компонентам и т.д. Смотреть на Rutube

7. Хранилище Svelte Store

В этом уроке рассмотрим store в Svelte и разновидности хранилищ: writable store (хранилище для записи), readable store (хранилище только для чтения), derived store (производные хранилища) и custom store (пользовательские хранилища). Смотреть на Rutube

8. Анимации и переходы в Svelte - Motion, Transition and Animation

В этом видео рассматриваем анимации в Svelte, а именно анимации значений (Svelte motion), анимации переходов (Svelte Transition), Svelte Animate, директивы transition, in, out и многое другое. Смотреть на Rutube

9. Действия и директива use - Svelte Actions

В этом видео рассматриваем Действия в Svelte, для чего они нужно и как ими пользоваться. Добавляем в проект директиву use, отправляем события из Действия и реализовываем функции действий - destroy и update. Смотреть на Rutube

10. Слоты - Svelte slots. Context Модуль - Svelte module context

В этом видео рассматриваем слоты в Svelte и работу с script c context="module". Смотреть на Rutube

11. API контекста - Svelte Context API

В этом видео рассматриваем возможности контекста Svelte, функции setContext, getContext и hasContext, а также применение CSS классов по условию. Смотреть на Rutube

12. Специальные элементы - Svelte Special elements

В этом видео рассматриваем специальные элементы в Svelte. Смотреть на Rutube Исходный код проекта