SvelteKit - новый Svelte Framework, заменяющий SapperJS

Принятие бессерверной парадигмы!

Автор Payal Mittal

В предыдущем блоге мы подробно узнали о SapperJS - JavaScript-фреймворке, построенном на Svelte.js и вдохновленном Next.js-.

Для тех, кто не читал его, это обязательное условие, поскольку я неоднократно упоминал об этом в этом блоге.

Этот блог посвящен SvelteKit - преемнику Sapper.js.

После многих лет работы с Sapper команда Svelte немного переосмыслила и решила переписать его. Позже его переименовали в SvelteKit.

Причина перехода на SvelteKit заключалась в том, что, поскольку Sapper был запущен в 2017 году, команда сочла его устаревшим, потому что за эти годы Интернет сильно изменился. Поэтому они решили переписать его в соответствии с современной сетью.

Большинство концепций такие же, как у Sapper, поэтому мы собираемся обсудить, что здесь отличается, а остальное вы можете узнать из документации -

Представляем SvelteKit

Официальная документация определяет SvelteKit как «фреймворк приложений на базе Svelte - создавайте большие приложения с меньшими размерами».

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

Сначала SvelteKit был расширен Snowpack, но позже был заменен на Vite.js из-за его надежных функций, таких как разделение кода и рендеринг на стороне сервера. Он облегчает разукрупненную разработку, такую ​​как Snowpack, и включает все функции, которые ранее были предоставлены Snowpack, такие как мгновенная перезагрузка горячего модуля, быстрый запуск и простое кэширование.

Что еще более замечательно, SvelteKit имеет встроенную поддержку общих плагинов, таких как Babel, Stylus, TypeScript, SASS, SCSS и т. Д. С использованием пакета svelte-preprocess. Он использует Rollup, чтобы сделать ваше приложение максимально быстрым и компактным.

Он следует той же концепции, что и Sapper, поскольку каждая страница приложения является компонентом Svelte, и каждая страница создается путем добавления файлов в каталог src/routes. Вы даже можете перенести существующее приложение Sapper на SvelteKit.

Чем он отличается от SapperJS?

Я собираюсь объяснить здесь некоторые концепции, чтобы увидеть, чем здесь отличается от Sapper. Тогда пошли ...

Адаптеры

SvelteKit следует парадигме «сначала бессерверные» и может создавать бессерверные приложения. Для этого он использует «адаптер» для интеграции с бессерверными платформами, такими как Vercel, Begin и Netlify.

Чтобы обеспечить бесперебойную и бесперебойную работу платформы с ними, SvelteKit предоставляет API-интерфейсы адаптеров для каждой платформы.

Теперь, что именно делают адаптеры?

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

Официально в магазине SvelteKit есть следующие адаптеры:

• Для Vercel: adapter-vercel
• Для Netlify: adapter-netlify
• Для Cloudflare Workers: adapter-cloudflare-workers
• Чтобы создать автономное приложение Node: adapter-node

Хотя Sapper нужен сервер Node, вы можете создать приложение узла, используя adaptor-node в SvelteKit.

Маршрутизация

Как и Sapper, SvelteKit также является маршрутизатором на основе файловой системы, а структура кода определяется содержимым каталога src/routes. Он имеет два типа маршрутов - Страницы и Конечные точки.

Маршрутизация страниц такая же, как и в Sapper, но маршрутизация конечных точек - это другое название маршрутизации сервера. Как и серверные маршруты, конечные точки также представляют собой модули, записанные в файлах .js или .ts, которые возвращают функции, соответствующие HTTP-запросам.

Конечные точки находятся на стороне сервера и могут обращаться к выборке для получения данных от внешних API. Функция возвращает объект response в форме { status, headers, body } в ответ на HTTP-запрос.

SvelteKit также поддерживает расширенную маршрутизацию, такую ​​как динамические параметры. Если вы хотите перейти, скажем, к пользовательскому маршруту, который содержит переменную идентификатора пользователя (и другие, сколько вам нужно) и отображает сведения о пользователе.

Маршрут будет выглядеть так:

localhost:3000/user/[user id]

Все, что вам нужно сделать, это создать папку с именем user и вставить файлы для динамических параметров, в данном случае ‘[userID].svelte’. Скобка указывает, что переменная внутри является динамическим параметром. Вы можете получить доступ к динамическому параметру в $app/stores пакете.

Макеты

Макеты также используются для трассировки! Компонент макета может заключать в себя другие компоненты в виде тега <slot> для содержимого страницы. Тег <slot/> в основном указывает, где дочерние компоненты размещаются внутри родительского компонента макета.

Вам нужно создать src/routes/__layout.svelte файл, и вы можете добавить столько слотов, сколько хотите для стилей, разметки и поведения.

Например, если мы добавим столбик nav-

<!-- src/routes/__layout.svelte -->
<nav>
 <a href=".">Home</a>
 <a href="about">About</a>
 <a href="settings">Settings</a>
</nav>
<slot></slot>

Мы можем создать отдельные страницы для /, /about и /settings, как указано ниже:

<!-- src/routes/index.svelte -->
<h1>Home</h1>
<!-- src/routes/about.svelte -->
<h1>About</h1>
<!-- src/routes/settings.svelte -->
<h1>Settings</h1>

Вы сможете перемещаться между тремя страницами, навигация будет видна для каждой страницы, и только <h1> будет заменяться каждый раз.

Загрузка

Это идентично функции «Предварительная загрузка» в Sapper. Каждая страница приложения может экспортировать специальную функцию, называемую load функцией, которая запускается до визуализации компонента и извлекает данные, относящиеся к странице в onMount. Если сначала выполняется на стороне сервера, а затем на стороне клиента.

• Он получает ввод в виде объекта { page, fetch, session, context }.
• Возвращаемое значение передается на страницу как prop. Если вы вернете Promise, SvelteKit не отобразит страницу, пока она не разрешится.

Функция load страницы входа также используется для определения того, аутентифицирован ли пользователь или нет, и переходит на защищенные страницы только после успешной аутентификации.

Другие концепции, такие как SSR и предварительный рендеринг, такие же, как у Sapper, но некоторые из них - нет, и я не включил их в этот блог (это сделало бы блог слишком длинным), вы можете проверить их здесь -

Начало работы

Создание приложения SvelteKit-

Вы можете начать создавать свое приложение, запустив:

npm init svelte@next my-app
cd my-app
npm install
npm run dev

Производственная сборка-

npm run build

Это создает оптимизированную производственную сборку в папке .svelte/build и запускает указанный адаптер.

npm run start

Эта команда запустит ваше приложение и запустит его как приложение узла, если вы используете адаптер узла.

Итог

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

Хотя SvelteKit доступен в публичной бета-версии, вы можете столкнуться с некоторыми проблемами, и найти решение будет сложно. Радует то, что команда постоянно публикует ежемесячные сообщения, в которых вы можете видеть, что было недавно добавлено в структуру, а что было исправлено или удалено.

Спасибо, что зашли и прочитали этот блог! Если вам понравилось, не забудьте оставить несколько аплодисментов.