Я давно являюсь поклонником 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.

Ссылки

Первоначально опубликовано на https://dev.to 12 января 2021 г.