Эй, разработчики! Да, я использовал SvelteKit для производства.

Я разработчик Django, изучаю много нового в Интернете, и Svelte довольно новый. Недавно я перенес свое веб-приложение на основе Django в SvelteKit с веб-приложением на основе Django Rest Framework.

В процессе разработки, честно говоря, я меньше мучился, знаете почему? Из-за простоты Svelte… и функций, которые он предоставляет из коробки, просто слишком круто.

Сегодня я расскажу вам о некоторых хороших функциях Svelte, о том, как я использовал Django Rest Framework со SvelteKit, почему SvelteKit является для меня «лучшим» внешним интерфейсом/JS-фреймворком с полным стеком, и почему я использовать его в моих новых инди-проектах?

Я начну с классных встроенных функций, которые есть у Svelte, с его особенностями.

  • Эффекты перехода и анимации по условию буквально с 1 строчкой кода
  • svelte-add упрощает добавление расширений, пакетов и библиотек; например, Tailwind CSS.
  • Svelte чрезвычайно прост, и он очень заботится о «DX» [Опыт разработчика].
  • Svelte очень быстр в рендеринге с минимальным размером сборки.
  • Svelte предоставляет встроенные или настраиваемые адаптеры, которые можно использовать для развертывания веб-приложения.
  • Со всеми функциями вы действительно владеете кодом, вы не теряете контроль
  • Части HTML, CSS и JS работают вместе в одном файле .svelte, что значительно упрощает написание кода, а также улучшается читаемость.

И список продолжается. Итак, вот несколько основных причин, по которым я считаю Svelte потрясающим.

Более того, SvelteKit предоставляет дополнительные функции, чтобы процесс разработки проходил гладко; как во фронтэнде, так и в бэкенде.

В чем разница между Svelte и SvelteKit? Kit не создан поверх Svelte, но это серверная веб-инфраструктура, в которой Svelte используется в качестве уровня представления или, скажем, обработчика компонентов.

Теперь, как я уже говорил, я собираюсь рассказать о том, «как я использовал DRF [Django Rest Framework] со SvelteKit?»

Как я использовал DRF [Django Rest Framework] со SvelteKit?

Прежде чем я расскажу о верхней теме, я хочу поговорить с вами кое о чем: «Почему я использовал SvelteKit для веб-разработки?» Ну, если честно, это было круто. И чтобы пояснить, вот несколько причин, по которым я использовал SvelteKit…

  • SvelteKit предоставляет form-actions, с помощью которого я могу легко и безопасно отправлять защищенные формы на основе авторизации.
  • SvelteKit хорошо работает с Tailwind CSS, так как для этой задачи у него есть svelte-add. Несмотря на то, что Tailwind CSS IntelliSense не работал с самой последней версией.
  • Svelte предоставляет красивые встроенные переходы, эффекты и анимацию, которые я могу легко использовать в своем проекте SvelteKit.
  • SvelteKit имеет hooks.server.ts, который выполняется при каждом вызове HTTP, где мы можем написать нашу логику/алгоритм аутентификации. И hooks.server.ts может возвращать значения для всех компонентов и может быть очень легко захвачена.
  • В SvelteKit есть +page.server.ts и +page.ts, где я могу написать несколько load функций и «форм-действий». Функция load выполняется на сервере до загрузки страницы в браузере. В основном он используется для отправки данных на страницу на основе SSR [Server Side Rendering].
  • Svelte имеет простую обработку контекста/хранилища, [writables в Svelte]

так что да, именно поэтому я использовал SvelteKit.

Итак, изначально у меня уже был рабочий проект Django, использующий PostgreSQL в качестве базы данных. У меня был код, и я настроил его, чтобы сделать его совместимым [работающим] с Django Rest Framework.

Мне пришлось добавить несколько сериализаторов и несколько новых полей в модели для новых функций. Я сделал это и протестировал его с помощью PostMan, а также с классом APITestCase, предоставленным DRF.

Теперь очередь аутентификации. Для аутентификации я использовал библиотеку под названием Django Simple JWT, которая работала очень хорошо. TokenObtainPairView, TokenRefreshView, TokenVerifyView используются для URL-адресов login/, refresh/ и verify/ соответственно.

Я использовал +page.server.ts для запроса к серверной части Django и возврата ответа на интерфейс SvelteKit. По сути, SvelteKit действует как серверная часть для хранения файлов cookie и токенов JWT, а средняя часть достигает фактического API и возвращает ответ во внешний интерфейс.

Я сделаю описательную статью о том, «как аутентифицировать/авторизовать SvelteKit с помощью Django».

После завершения разработки пришло время выполнить миграцию/развертывание с системы на основе Django на систему на основе SvelteKit/Django Rest Framework.

Пока я настраивался для миграции, сервер AWS Lightsail внезапно заклинил, и мне пришлось перезапустить серверную систему. После перезагрузки сервера он потерял кластер БД PostgreSQL. Я пытался восстановить его в течение двух дней... Безуспешно. Я потерял базу данных с более чем 3000 пользователей, в которой хранится более 7400 URL-адресов.

Вы можете придумать резервную копию/снимок, я сделаю новую историю на тему «Как я потерял БД 3000+ пользователей?»

Наконец, я только что создал новый экземпляр БД PostgreSQL с новой таблицей. И подключил его к бэкенду DRF. И я развернул приложение SvelteKit, используя pm2 с @sveltejs/adapter-node, что прошло очень хорошо.

А для серверной части Django использовались nginx и gunicorn для его размещения.

Итак, это конечный продукт, он называется Xoomato URL guard. Это обычно для издателей AdSense, которые хотят безопасно делиться своими сайтами в социальных сетях.

Продолжение следует…

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.