Convex лучше, чем Firebase?

Convex сложен в настройке, особенно для не-React разработчиков, но после этого предлагает отличный UX и возможности для масштабирования. Firebase прост в настройке и управлении, но становится более сложным при масштабировании.

Я создавал приложение для списка задач множество раз. То, что кажется очень простым, может невероятно быстро усложниться, когда приходится изучать новый стек, создавать собственный бэкенд или мыслить иначе, чем вы привыкли.

Кратко (TL;DR)

Convex крайне сложен в настройке, особенно для пользователей, не использующих React. Пакет аутентификации работает ТОЛЬКО для React и его пришлось писать с нуля, что является большим минусом. В нем отсутствуют базовые функции, и он излишне усложнен.

Тем не менее, как только Convex правильно настроен для разработки и продакшна, реальный опыт разработчика оказывается потрясающим, открывая большой потенциал для масштабирования реального noSQL-приложения с меньшим количеством препятствий.

Firebase проще в настройке, управлении и развертывании, но кривая обучения растет, когда вам нужно управлять безопасностью и масштабированием. С Convex все наоборот благодаря экосистеме, ориентированной в первую очередь на TypeScript.

Предварительные требования ✅

Я предполагаю, что у вас есть базовые знания Nuxt 4, Tailwind и Firebase. Я сосредоточусь на Convex.

Что такое Convex?

Convex — это noSQL-база данных, которая позволяет потреблять данные в реальном времени на клиенте в любом удобном для вас виде. Она НЕ поддерживает полноценные реляционные данные, но вы можете запрашивать несколько документов одновременно, прямо рядом с самими данными, эмулируя соединение (join).

Все написано на TypeScript, поэтому вам не нужно беспокоиться о сложных правилах безопасности. Вместо триггерных функций вы напрямую прописываете всю сложность внутри самой мутации, которая живет на сервере Convex. Аутентификация скудна, но если вы используете Google или GitHub с React, у вас не должно возникнуть проблем.

Что такое Firebase?

Firebase — это облачная платформа с noSQL-базой данных, аутентификацией, правилами безопасности, облачными функциями и т.д. Возможно, это самая простая в изучении база данных, особенно если вам не нужны сложные схемы или масштабирование. У нее невероятные возможности запросов для noSQL, уступающие только MongoDB.

Как только вам потребуется усиленная безопасность, более сложное моделирование данных или тестирование, кривая обучения резко возрастает. Она работает «из коробки» во всех фреймворках.

Настройка приложения Convex

Создание нового проекта Convex

Войдите в Convex и создайте новый проект.

📝 Обратите внимание, что по умолчанию у вас есть база данных для продакшна и разработки.

📝 Также вам не нужно беспокоиться об автопаузе вашего бесплатного проекта, поэтому ниже я привел демо, которое может быть бесплатным вечно.

Создание приложения Nuxt

Установка Tailwind

Не используйте этот пакет. Следуйте официальному руководству Tailwind для Nuxt.

Установка Convex

Я изменяю официальное быстрое руководство по Nuxt Convex.

• Установите библиотеку Convex один раз в вашем новом проекте.
• Добавьте URL Convex.
• Настройте деплой для разработки на Convex.

📝 Это будет запускаться в фоновом режиме постоянно, чтобы ваше приложение работало.

Вы должны увидеть переменную в .env.local:

• Настройка аутентификации Convex.

📝 Возможно, вам придется вручную установить @convex-dev/auth или @auth/core.

4б. (Необязательно)

Мне пришлось создать этот файл. Он также может называться http.js, если его нет. Опять же, настройка аутентификации не интуитивна, и я столкнулся с несколькими проблемами.

• Настройка GitHub

Войдите в свой аккаунт GitHub. Затем перейдите в Настройки (Settings) → Настройки разработчика (Developer Settings) → Приложения OAuth (OAuth Apps) и создайте новое приложение.

Скопируйте секретный ключ и ключ клиента. Не забудьте сохранить секретный ключ, так как вы больше никогда не сможете его получить!

📝 Ваши переменные окружения существуют на сервере convex, поэтому это НЕ переменные окружения вашего приложения!

• Определите схему ваших задач.
• Предоставьте доступ к запросам вашей базы данных.
• Функция запроса возвращает все задачи определенного пользователя. Мы используем наш индекс by_user для фильтрации и сортировки по _creationTime (внутренняя переменная) в порядке убывания.
• Мы создаем новую задачу пользователя.
• Мы обновляем выполненную задачу пользователя.
• Мы удаляем задачу пользователя.

🎇 Все это безопасно, находится близко к базе данных и работает чрезвычайно быстро. Тот факт, что нам приходится выполнять несколько вызовов базы данных, в данном случае пренебрежимо мал!

Создание нашего приложения

Хотя папка convex создается на нашем сервере, она там не живет. Остальной код на самом деле живет в нашем приложении.

Композаблы (Composables)

Если вы читали хоть одну из моих статей, вы знаете, что я твердо убежден: ваш основной код ВСЕГДА должен быть отделен от компонента — в композабле, а не внутри самого компонента.

• useConvexQuery прост, имеет состояния загрузки (pending) и ошибки (error) и может передаваться непосредственно в наше приложение.
• useConvexQuery более сложен. Мы хотим, чтобы наши приложения реагировали мгновенно, поэтому мы должны добавить стратегию оптимистичного обновления, как в Firebase.
• Существует опция optimisticUpdate, которая дает вам доступ к localStore.getQuery и localStore.setQuery. Мы можем устанавливать наши элементы оптимистично, и Convex автоматически откатит изменения, если возникнет проблема.

app.vue

Мы показываем спиннер загрузки или кнопку входа.

AddTask.vue

Опять же, с нашим композаблом все, что нам действительно нужно сделать, это показать кнопку ввода и ошибку.

TaskList.vue

Мы можем легко показать нашу задачу, управлять их удалением с помощью кнопки и переключать состояние выполнения.

LoginWithGithub.vue

Конечно, мы должны показать наш вход через GitHub.

И спиннер загрузки.

⚠️ Нет композабла для Convex

Convex создан для React. У них нет возможности входа или выхода из системы нативно за пределами React!!! Если вы не любите React так же сильно, как и я, вам придется собирать рабочие функции клиентской аутентификации из их кодовой базы React. Это работает, но это просто сгенерированный некачественный код. Будем надеяться, что они исправят это по крайней мере для Nuxt и SvelteKit.

📝 Эти функции просто обрабатывают вход и выход, состояния загрузки и аутентификации.

👎 Больше всего меня беспокоит то, что этот код не обязательно должен быть специфичным для React. Он просто устанавливает некоторые состояния хранилища и т. д. Он не делает ничего особенного, так как это уже обрабатывается в ядре кода. Это чисто клиентский код, даже не SSR. Хуже всего то, что это легко можно было сделать независимым от фреймворка. Вместо этого мы получили еще одну базу данных только для React. ☹️ Люди ненавидят JSX, такое бывает; они просто мирятся с этим.

Вердикт

Что говорит Convex

Начнем со сравнения от Convex:

Однако я считаю это в лучшем случае неполным, а в худшем — неверным. Вот как должна выглядеть таблица, если оставить только эти функции:

noSQL НИКОГДА не является реляционной, и вы можете эмулировать это с помощью любой базы данных разными способами. Обе они поддерживают локальную разработку, которая работает по-разному.

Транзакции и схемы доступны в обеих. Поддержка React определенно есть в обеих, но у Convex НЕТ первоклассной поддержки для Nuxt или SvelteKit, что, по моему мнению, в наши дни является обязательным, особенно если вам нужна аутентификация.

Я также утверждаю, что благодаря конвейерным операторам, Firebase теперь может обрабатывать связи намного лучше, чем Convex когда-либо сможет.

В чем выигрывает Convex

• Ориентированность на разработчиков TypeScript и React
• Возможность писать триггеры прямо на TypeScript
• Лучшая обработка безопасности напрямую
• Лучшая обработка внешних ключей и времени создания

В чем выигрывает Firebase

• Очень зрелая экосистема для поддержки и функций
• Работает со всеми фреймворками
• Бесшовная установка и очень простое использование
• Имеет множество возможностей запросов и хелперов для масштабирования

📝 Convex обрел определенную популярность после того, как Theo начал использовать его для своего приложения t3.chat. Тео активно работает с React и TypeScript, так что в этом есть смысл.

Финал

Convex, похоже, преуспевает там, где Firebase не хватает возможностей. Многие люди используют Firebase Security Rules неправильно или вообще не используют, так как их сложно поддерживать. С Supabase RLS возникает та же проблема.

Convex — это просто TypeScript. Настройка ужасна, но после этого опыт разработчика становится очень интуитивным, как только вы во всем разберетесь. Я вполне вижу, что это действительно поможет вам быстро создать масштабируемый продукт.

Firebase для меня все еще побеждает, но в основном из-за своей зрелости.

Вот что я хотел бы увидеть в Convex, чтобы он стал более серьезным претендентом для моих нужд:

• Первоклассная поддержка SvelteKit, NextJS и Nuxt. Не все используют React.
• Первоклассная поддержка аутентификации. Код, написанный только для React, можно легко изменить для поддержки всех фреймворков. В документации должна быть показана настройка после завершения. Это также должно включать серверную аутентификацию с использованием cookie и т. д.
• Convex — это база данных NoSQL, и ее документация не должна путать связи. Не совсем понятно, как вы моделируете данные. Плюсом для Convex также является то, как они объясняют, что выполнение нескольких вызовов await для базы данных может осуществляться близко к базе данных в рамках транзакции для эмуляции соединения... Я просто хотел бы, чтобы они не путали это с соединением. Это нормально, что это NoSQL.
• Упрощенное управление .env, так как возникает путаница с тем, где они находятся, особенно при работе с производственной и разработческой базами данных, а также с локальным и производственным хостингом.
• Примеры для случаев, когда вам не нужен режим реального времени и вы хотите загружать данные только на сервере. Это не менее важно.

Я думаю, что по мере взросления Convex может стать действительно потрясающим, но он еще не совсем дотягивает до уровня, когда все работает по принципу «подключи и работай», как у Firebase.

Репозиторий: GitHubДемо: Vercel Functions