Эй, разработчики! Да, я использовал 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 . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.