В чем дело со SvelteKit?

Мы переосмысливаем, как создавать приложения Svelte. Вот что вам нужно знать...

Если вы посещали в прошлом месяце Svelte Summit то, возможно, видели мой доклад «Футуристическая веб-разработка», в котором я наконец ответил на один из наиболее часто задаваемых вопросов о Svelte: когда Sapper достигнет версии 1.0?

Ответ: никогда.

Это была ирония - как объясняется в докладе, на самом деле это больше похоже на переписывание легаси Sapper в сочетании с ребрендингом - но это вызвало много новых вопросов от сообщества, и пришло время прояснить, что вы можете ожидать от преемника Sapper, SvelteKit.

'Futuristic Web Development' from Svelte Summit

Что такое сапер?

Sapper — это фреймворк приложения (или «метафреймворк»), построенный на основе Svelte (который представляет собой компонентный фреймворк). Его задача - упростить создание приложений Svelte с использованием всех современных передовых методов, таких как рендеринг на стороне сервера (SSR) и разделение кода, а также предоставить структуру проекта, которая делает разработку продуктивной и увлекательной. Он использует маршрутизацию на основе файловой системы (как популяризировано Next и принято многими другими фреймворками, хотя и с некоторыми улучшениями) - файловая структура вашего проекта отражает структуру самого приложения.

Хотя домашняя страница и документация Svelte предлагают вас degit репозиторий sveltejs/template чтобы начать создание приложения, Sapper уже давно является нашим рекомендуемым способом создания приложений; этот пост в блоге (на момент написания!) рендерится с помощью Sapper.

Почему мы переходим на что-то новое?

Во-первых, различие между sveltejs/template и sveltejs/sapper-template сбивает с толку, особенно новичков в Svelte. Наличие единого рекомендуемого способа создания приложений с помощью Svelte принесет огромные преимущества: мы упростим адаптацию, уменьшим нагрузку на обслуживание и поддержку и потенциально можем начать исследовать новые возможности, которые открываются при наличии предсказуемой структуры проекта. (Эта последняя часть намеренно расплывчата, потому что потребуется время, чтобы полностью понять, что это за возможности.)

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

В чем же отличие?

Первое отличие в том, что вам необходимо использовать сборщик модулей, например webpack или Rollup для создания приложений. Эти инструменты отслеживают график зависимостей вашего приложения, анализируя и преобразуя код по пути (например, превращая компоненты Svelte в модули JS), чтобы создавать пакеты кода, которые могут работать где угодно. Как первоначальный создатель Rollup, я могу засвидетельствовать, что это удивительно сложная проблема с дьявольскими крайними случаями.

Вам определенно нужен был сборщик несколько лет назад, потому что браузеры изначально не поддерживали import, но сегодня это гораздо менее актуально. Прямо сейчас мы наблюдаем рост разделенного рабочего процесса разработки, который радикально проще: вместо того, чтобы с нетерпением объединять ваше приложение, сервер разработки может обслуживать модули (преобразованные в JavaScript, если необходимо) по запросу, что означает, что запуск происходит практически мгновенно. каким бы большим ни стало ваше приложение.

Snowpack находится в авангарде этого движения, и именно этим движет SvelteKit. Он удивительно быстр и имеет прекрасный опыт разработки (горячая перезагрузка модулей, наложения ошибок и т. Д.), И мы тесно сотрудничаем с командой Snowpack над такими функциями, как SSR. Горячая перезагрузка модуля особенно важна, если вы привыкли использовать Sapper с Rollup (который никогда не имел первоклассной поддержки HMR из-за его архитектуры, которая отдает приоритет наиболее эффективному выходу).

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

Другое отличие в том, что серверное приложение нуждается в сервере. Sapper фактически имеет два режима — sapper build, которая создает автономное приложение, которое должно запускаться на сервере Node, и sapper export который превращает ваше приложение в набор статических файлов, подходящих для размещения на таких сервисах, как GitHub Pages.

Статические файлы могут быть какими угодно, но запуск сервера Node (а также его мониторинг / масштабирование и т. д.) не так прост. В настоящее время мы наблюдаем переход к бессерверным платформам, в которых вам как автору приложения не нужно думать о сервере, на котором работает ваш код, со всей сопутствующей сложностью. Вы можете запускать приложения Sapper на бессерверных платформах благодаря таким вещам, как vercel-sapper, но это, конечно, не то, что вы бы назвали идиоматическим.

SvelteKit полностью охватывает бессерверную парадигму и будет запущен с поддержкой всех основных бессерверных провайдеров, с «адаптерным» API для нацеливания на любые платформы, которые мы официально не обслуживаем. Кроме того, мы сможем выполнять частичный предварительный рендеринг, что означает, что статические страницы могут быть созданы во время сборки, а динамические - по запросу.

Когда я смогу начать использовать это?

Если вы чувствуете себя смелым, можете начать прямо сейчас:

npm init svelte@next

Это создаст основу для нового проекта и установит интерфейс командной строки @sveltejs/kit, который предоставляет инструменты для разработки и создания приложения.

Но мы не рекомендуем это делать! Документов нет, и мы не сможем предложить какую-либо поддержку. Это также может часто ломаться.

Работа ведется в частном монорепозитории, пока мы все еще находимся в режиме исследования. Мы планируем подготовить общедоступную бета-версию и объявить о ней здесь, как только мы закроем несколько проблем - репозиторий останется закрытым в это время, но мы создадим место для сбора отзывов от YOLO. После этого мы будем работать над выпуском 1.0, который будет включать открытие репо.

Я не собираюсь давать никаких твердых обещаний относительно сроков, потому что я не люблю нарушать обещания. Но я думаю, что мы говорим о неделях, а не о месяцах.

Что делать, если я не хочу использовать SvelteKit?

Всегда можно будет использовать Svelte как отдельный пакет или через интеграцию сборщика, например rollup-plugin-svelte. Мы думаем, что очень важно, чтобы вы могли приспособить Svelte к своему рабочему процессу, пусть даже и эзотерическому, и использовать сторонние фреймворки приложений, такие как Elder.js, Routify, Plenti, Crown, JungleJS и другие.

TypeScript?

Не волнуйтесь, мы не запустимся без полной поддержки TypeScript.

Как я могу перенести мои существующие приложения Sapper?

По большей части, перенос кодовой базы Sapper должен быть относительно простым.

Есть некоторые неизбежные изменения (возможность работать на бессерверных платформах означает, что нам нужно заменить пользовательские файлы server.js и функции (req, res) => {...} более переносимыми эквивалентами), и мы пользуемся возможностью чтобы исправить несколько недостатков дизайна, но в целом приложение SvelteKit будет хорошо знакомо пользователям Sapper.

Подробные руководства по миграции будут сопровождать запуск 1.0.

Как я могу внести свой вклад?

Следите за объявлениями о том, когда мы запустим публичную бета-версию и откроем репо. (Кроме того, теперь у нас есть место OpenCollective, где вы можете внести финансовый вклад в проект, если он был для вас ценен. Большое, большое спасибо тем из вас, кто уже сделал это.)

Где я могу узнать больше?

Следите за @sveltejs и @SvelteSociety в Twitter, и заходите на svelte.dev/chat. Вам также следует подписаться на Svelte Radio, где Кевин и его со-ведущие будут расспрашивать меня об этом проекте в следующем эпизоде ​​(и в период с настоящего момента до следующей недели, когда мы его запишем, reply to this Twitter thread с вашими дополнительными вопросами).