Вот как вы можете вывести свой JAMStack на новый уровень с помощью FaunaDB и React.js

JAMstack (JavaScript, API, разметка) приятно работать для статических сайтов и динамических одностраничных приложений (SPA). Мы используем JavaScript для интерактивности, разметку для шаблонов и API для серверных процессов или действий с базой данных. Даже самое простое динамическое приложение использует базу данных для хранения своей информации. Именно здесь на помощь приходит FaunaDB. В этой статье я покажу вам, как повысить эффективность вашего ноу-хау JAMstack с помощью FaunaDB.

Почему FaunaDB

  • Быстро и хорошо масштабируется. Архитектура FaunaDB позволяет масштабировать экземпляр базы данных в соответствии с требованиями и балансировкой нагрузки. Как и в случае с CDN, ваши данные будут распределены между множеством экземпляров FaunaDB по всему миру, поэтому ваши пользователи и серверы всегда будут иметь доступ к ближайшему экземпляру. Любое изменение будет воспроизведено на всех экземплярах.
  • FaunaDB поддерживает транзакции и следует соглашению ACID (атомарность, согласованность, изоляция, долговечность). Если вам интересно, прочтите этот пост, чтобы подробнее узнать, как работает FaunaDB.
  • Гарантия безопасности. После фиксации транзакции гарантируется, что любая последующая транзакция - независимо от того, какая реплика ее обрабатывает - прочитает все данные, записанные предыдущей транзакцией. Другие системы NoSQL и даже большинство систем SQL не могут гарантировать глобальную согласованность реплик.
  • Простота использования. Используя FaunaDB в качестве хранилища данных для нашего JAMStack, нам не нужно думать о согласованности, масштабировании, репликации, избыточности и т. д. FaunaDB и React.js прекрасно работают вместе и их легко настраивать. Мы можем сосредоточиться на основном приложении вместо того, чтобы выполнять кропотливую работу по настройке нашей среды. Вдобавок ко всему, создание быстрых прототипов с использованием ранее упомянутого стека совершенно бесплатно.
  • DBaaS. Экономьте время, используя уже существующую инфраструктуру, которая позволяет вам масштабироваться. Затем вы можете использовать это время для работы над своим приложением. Вместо того, чтобы тратить время на развертывание собственного кластера базы данных, используйте «База данных как услуга» (DBaaS).

Эта страница содержит больше информации о концепциях FaunaDB и позволяет вам глубже погрузиться в эти концепции.

Без лишних слов, давайте приступим к изучению нашего JAMstack, в котором мы используем FaunaDB и React.

Начало работы с FaunaDB

Во-первых, вы должны зарегистрироваться на Fauna. Посетите страницу регистрации, и должен появиться следующий экран регистрации.

Установите FaunaDB Shell

После настройки учетной записи откройте терминал и установите FaunaDB Shell. Если у вас компьютер, вы можете использовать:

Использование NPM

npm i -g fauna-shell

Если у вас не установлен NPM, вы можете следовать этому руководству здесь, чтобы настроить его.

Если у вас Mac, вы можете использовать Homebrew:

brew install fauna-shell

Войдите в свою учетную запись FaunaDB

Создание экземпляра FaunaDB

Создать новую базу данных с помощью FaunaDB очень просто. Нажмите кнопку Новая база данных на панели управления или щелкните здесь. Как только вы окажетесь в разделе, дайте базе данных имя и нажмите "Сохранить".

Создайте свой секретный ключ FaunaDB для базы данных

Ключ используется для доступа к базе данных для действий create, read, update и delete (CRUD).

Система ключей FaunaDB

Доступ к API FaunaDB использует секреты, соответствующие ключам доступа, которые удостоверяют, что соединения имеют определенные разрешения. Система ключей доступа применяется как к соединениям на уровне администратора и на уровне сервера, так и к соединениям на уровне объекта и на уровне пользователя.

Более подробную информацию о ключах и безопасности FaunaDB можно найти здесь, в документации.

Использование ключа FaunaDB

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

Выполните следующую команду

export FAUNADB_SERVER_SECRET=FaunaDBSecretHere

Замените FaunaDBSecretHere значением секрета, который вы скопировали на предыдущем шаге.

export - это команда Bash для установки переменной среды для Bash. Все переменные, установленные с помощью этой команды, будут унаследованы всеми процессами, создаваемыми этим Bash.

Добавьте /scripts/bootstrap-faunadb.js в корневой каталог проекта. Это идемпотентный сценарий, который можно запустить миллион раз и получить тот же результат (одна база данных задач).

Затем добавьте команду начальной загрузки к сценариям npm в вашем package.json файле:

{
  "scripts": {
    "bootstrap-faunadb": "node ./scripts/bootstrap-faunadb.js"
  }
}

Теперь мы можем запустить команду bootstrap, чтобы настроить нашу базу данных FaunaDB в нашей учетной записи FaunaDB.

npm run bootstrap-fauna

Теперь мы готовы приступить к использованию FaunaDB! Если вы столкнулись с проблемами или заблудились, загляните в репозиторий Github для этого руководства.

Настройка приложения Create-React-App

Чтобы начать работу, создайте новое приложение React с помощью следующей команды:

npx create-react-app faunadb-react-app && cd faunadb-react-app && npm start

(npx поставляется с npm 5.2+ и выше, см. инструкции для более старых версий npm.)

Затем откройте http: // localhost: 3000, чтобы увидеть ваше приложение.

Если вам интересно, вот репозиторий create-react-app - используйте его, чтобы узнать больше о настройке.

Настройка FaunaDB для местного развития

Установка зависимостей

  • faunadb Пакет NPM - официальный драйвер JavaScript для FaunaDB.
npm i faunadb

Настройка файла .Env

Создайте файл .env и поместите туда секретный ключ FaunaDB. Это безопасный способ использования нашего токена без каких-либо возможных утечек безопасности.

FAUNADB_SERVER_SECRET=

Подключение к базе данных FaunaDB

Создайте каталог fauna. Это каталог, в котором будут находиться все функции, связанные с FaunaDB.

mkdir fauna

Прежде чем мы сможем начать делать запросы, нам нужно установить соединение с базой данных. Давайте сделаем это.

fauna/db.js

const faunadb = require('faunadb');

/* configure faunaDB Client with our secret */
const q = faunadb.query
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SERVER_SECRET
})
export { q, client }

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

Затем создайте файл fauna/get-all-products.js в нашем каталоге fauna. Здесь мы будем выполнять наши запросы FaunaDB.

На данный момент в базе данных FaunaDB есть фиктивные данные для демонстрационных целей.

Обратите внимание на специфический синтаксис FaunaDB здесь. Он называется F QL (Fauna Query Language).

Язык запросов фауны (FQL)

Язык запросов Fauna (FQL) - это собственный API для запросов к FaunaDB.

Язык ориентирован на выражения: все функции, управляющие структуры и буквальные возвращаемые значения. Так, например, легко сгруппировать несколько результатов, объединив их в Массив или Объект. Или вы можете сопоставить коллекцию и вычислить результат - возможно, получить больше данных - для каждого члена.

FaunaDB поддерживает собственный GraphQL

FaunaDB имеет поддержку GraphQL API первого уровня. API-интерфейс FaunaDB GraphQL должен работать с большинством библиотек GraphQL.

Зайдите сюда для получения дополнительной информации о том, как использовать FaunaDB с поддержкой GraphQL.

Вызов запроса FaunaDB внутри компонента React

Обратите внимание, что мы используем React Hooks. Если это новое понятие, я писал об этом раньше.

И если мы посмотрим в наш браузер, мы должны увидеть распечатанные данные.

Отличная работа! Вы добрались до конца. Далее мы собираемся использовать все эти знания для создания полезных приложений.

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

Заключение

Следите за обновлениями в следующей главе, где мы будем использовать FaunaDB для создания приложения для создания заметок, чтобы продемонстрировать некоторые из его интересных функций.

Спасибо за чтение, надеюсь, вы узнали что-то новое и выросли как разработчик. Надеюсь, вы попробуете FaunaDB, Netlify и React и увидите, насколько хорошо они работают вместе.

Вот исходный код стартового набора. Проверьте это и дайте нам знать, если вы видите способы улучшить его.

Отдельное спасибо команде FaunaDB team и официальной документации React за техническую поддержку при написании этой статьи.