Я давно являюсь поклонником Svelte и начинал каждый проект, который придумал в 2020 году, с sveltejs/template. Работая над этими идеями, я обнаружил собственную альтернативу Firebase под названием Appwrite.
❓ Что такое Appwrite?
Appwrite — это сервер с открытым исходным кодом, работающий по принципу "бэкенд как услуга", который абстрагирует и упрощает сложные и повторяющиеся задачи разработки с помощью очень простого в использовании REST API. Цель Appwrite — помочь вам разрабатывать приложения быстрее и безопаснее.
Если вы раньше не слышали об Appwrite, вам действительно стоит проверить! 👀
Если вы спросите себя, почему вы должны использовать Appwrite вместо чего-то вроде Firebase, я записал свои причины здесь.
⬅ Вернуться к теме
Увлекшись этой концепцией, я начал вносить свой вклад в Appwrite, стал частью его сообщества, а в 2021 году стал полноправным основным участником.
Использование Javascript SDK сработало сразу, но не очень соответствовало компонентному подходу Svelte. Так что я сел, вдохновленный sveltefire, и разработал набор компонентов, которые чувствуют себя как дома в проектах Svelte. В результате появился проект svelte-appwrite
.
Хватит говорить, давайте начнем со сравнения кода между appwrite
и svelte-appwrite
:
Короткое не всегда лучше, за исключением этого случая. Давайте посмотрим на более короткий вариант, svelte-appwrite
:
Этот небольшой фрагмент обрабатывает инициализацию и аутентификацию по электронной почте с помощью проекта Appwrite всего несколькими строками.
🧬 Разбираем
<Appwrite {...config}>
Компонент <Appwrite />
инициализирует SDK для вашего проекта Appwrite и должен обертывать каждый компонент svelte-appwrite
. Вы можете просто распространять конфигурацию следующим образом:
<User let:user let:actions>
Компонент <User/>
запрашивает вошедшего в систему пользователя и предоставляет вам 2 let:directives:
- пусть: пользователь
- пусть: действия
Директива user
предоставляет вам текущего пользователя, вошедшего в систему, а actions
со следующим набором функций:
reload()
logout()
logoutFrom(session: string)
logoutAll()
По умолчанию все внутри компонента <User />
отображается только тогда, когда пользователь вошел в систему. Используя слот error
, мы можем показывать контент, когда пользователь не вошел в систему.
<AuthEmail let:authorize on:success>
Последний компонент, который мы использовали, позволяет пользователям аутентифицироваться по электронной почте с помощью предоставленного метода authorize(email, password)
. Этот компонент также может генерировать события success
и failure
.
Как видно из приведенного выше примера, событие on:success
указывает на функцию reload()
из <User />
. Таким образом, когда произойдет успешный вход в систему, компонент извлечет пользователя из Appwrite и отобразит слот по умолчанию.
Больше компонентов вы можете найти здесь.
👆 Заключение
Конечно, есть еще много компонентов, которые охватывают все функции (кроме команд, которые скоро появятся) Appwrite. Эта библиотека позволяет быстро запускать идеи с помощью Svelte. Если у вас есть какие-либо отзывы, которыми вы хотели бы поделиться со мной, я буду рад прочитать ваши комментарии!
Чтобы поддержать это утверждение, в ближайшие недели будет опубликована серия руководств, в которых я представлю все аспекты этой библиотеки и самого Appwrite, создав клон Instagram.
Ссылки
- "Исходный код"
- Пакет npm
Первоначально опубликовано на https://dev.to 12 января 2021 г.