Blitz.js — это полноценный JavaScript-фреймворк, основанный на Next.js. Он предназначен для обеспечения производительной, масштабируемой и удобной для разработчиков среды для создания веб-приложений. Благодаря своим уникальным функциям он привлек разработчиков и с момента своего появления в 2020 году получил более 12 000 звезд GitHub.
Поскольку Blitz.js построен на основе Next.js, разработчики могут получить доступ ко всем инструментам, необходимым для создания полнофункционального приложения. Кроме того, они могут использовать такие функции, как автоматическое разделение кода, рендеринг на стороне сервера, встроенную авторизацию и аутентификацию, а также построитель запросов, предоставляемые Next.js.
Тем не менее, наиболее привлекательной особенностью Blitz.js является его подход Zero-API, который устраняет необходимость создания отдельного уровня API во внешнем интерфейсе. Поэтому в этой статье я подробно расскажу о подходе Zero-API, включая его преимущества и шаги, необходимые для его реализации с помощью Blitz.js.
Что такое подход с нулевым API?
Источник: https://blitzjs.com/
Подход Zero-API — это метод создания веб-приложений с полным стеком, устраняющий необходимость в отдельном уровне API. Вместо этого он использует запросы на стороне сервера, автоматически генерируемые платформой на основе схемы, для обработки функций на стороне сервера. Этот подход на основе RPC интегрирует функции на стороне сервера непосредственно в кодовую базу Next.js, позволяя разработчикам создавать все приложение в единой кодовой базе и пользоваться унифицированным, безопасным для типов опытом разработки как для клиентского, так и для серверного кода.
Blitz.js специально разработан для подхода Zero-API и предлагает интуитивно понятную среду разработки. С помощью Blitz.js разработчики могут оптимизировать свой рабочий процесс и повысить эффективность, упростив процесс создания и обслуживания полнофункциональных веб-приложений.
Преимущества подхода с нулевым API
Подход Zero-API имеет несколько преимуществ для создания полнофункциональных веб-приложений.
1. Упрощенная разработка
Подход Zero-API упрощает процесс разработки программного обеспечения, устраняя необходимость в отдельном уровне API. Все приложение можно развернуть как единое целое вместо того, чтобы требовать отдельного развертывания кода на стороне клиента и на стороне сервера.
2. Уменьшенная сложность кода:
Интегрируя серверную функциональность непосредственно в клиентскую кодовую базу, подход Zero-API снижает общую сложность кода, облегчая разработчикам понимание и работу с кодовой базой. Это повышает качество кода, минимизирует вероятность ошибок и упрощает процесс исправления ошибок.
3. Улучшенная производительность
Подход Zero-API повышает производительность приложений за счет уменьшения количества HTTP-запросов, необходимых для извлечения данных, поскольку запросы направляются непосредственно в серверный код без прохождения через дополнительный уровень API. Это может привести к более быстрому времени загрузки и лучшему взаимодействию с пользователем.
4. Безопасность
Подход Zero-API повышает безопасность по сравнению с традиционными подходами API. В традиционных настройках API многие конечные точки открыты для общественности, что увеличивает риск того, что злоумышленник обнаружит и воспользуется уязвимостью. Однако при подходе Zero-API логика на стороне сервера доступна только для аутентифицированных пользователей и не отображается как отдельные конечные точки.
Кроме того, Blitz.js включает встроенное решение для аутентификации, которое легко интегрирует OAuth в процесс разработки. По умолчанию Blitz.js создает компоненты регистрации, входа и сброса пароля, а также мутации для входа, регистрации, выхода и сброса пароля. Эти компоненты расположены в каталоге src/pages/articles, и вы можете загрузить эти компоненты страницы, когда URL-адрес /auth/{page-name} загружается в браузере.
5. Гибкость
Подход Zero-API обеспечивает гибкий подход к созданию полнофункциональных веб-приложений. В зависимости от своих потребностей разработчики могут интегрировать серверную функциональность непосредственно в кодовую базу или использовать отдельный уровень API.
Внедрение подхода Zero API с помощью Blitz.js
Теперь давайте посмотрим, как мы можем реализовать подход Zero API с помощью Blitz.js.
Шаг 1 — Создание проекта Blitz.js
Во-первых, вам нужно установить Blitz.js с помощью NPM или Yarn.
// NPM
npm install -g blitz
// Yarn
yarn global add blitzЗатем выполните следующую команду в CMD, чтобы создать приложение Bitz.js:
blitz new my-blitz-appПосле завершения работы мастера создания приложения перейдите в папку проекта, запустите команду blitz dev, откройте веб-браузер и перейдите к localhost:3000. Логотип Blitz появится на странице приветствия.
Если вы посмотрите на базу кода, вы увидите кучу папок и файлов по сравнению с традиционным проектом React или Angular. Вот самые важные папки и файлы в вашем проекте Blitz.js, которые вам нужно знать:
src/— содержит установочные файлы Blitz (blitz-client.tsиblitz-server.ts), запросы, мутации и некоторые ваши компоненты.src/pages/— папка основных страниц содержит все ваши страницы и маршруты API.src/core/- Основное место для размещения комплектующих, крючков и т.п.db/— содержит конфигурацию базы данных, модели и миграции.public/— содержит статические активы.next.config.js— Расширенная пользовательская настройка Blitz и Next.js.
Подробнее о файловой структуре можно узнать здесь.
Шаг 2 — Настройка подключения к базе данных
В Blitz.js Prisma по умолчанию использует базу данных SQLite, а модели баз данных определяются в файлеschema.prisma. Чтобы настроить подключение к базе данных, откройте файл schema.prisma и обновите свойства provider и url. Если вы хотите использовать такую базу данных, как MongoDB, вам просто нужно изменить файл provider.
...
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
...Свойство generator client указывает клиентскую библиотеку, которую Prisma будет использовать для подключения к базе данных и выполнения запросов. Prisma поставляется с клиентской библиотекой по умолчанию, prisma-client-jsдля всех основных баз данных.
По умолчанию в файле schema.prisma определены 3 модели, представляющие таблицы в базе данных. После настройки подключения к базе данных Prisma предоставит объекты Prisma для каждой определенной модели, например prisma.user, prisma.session и prisma.token. Эти объекты имеют такие методы, как find(), findFirst(), update() и delete(), которые позволяют получать доступ к соответствующим таблицам и изменять их.
Шаг 3 — Создание новой модели
Вы можете определить новые модели для своего приложения в файле schema.prisma. Например, приведенный ниже код определяет новую модель с именем Article.
model Article {
id Int @id @default(autoincrement())
name String
}Затем запустите команду blitz prisma migrate dev, чтобы синхронизировать базу данных с новой моделью.
Вы можете использовать новую модель статьи, импортировав файл db/index.js. Объект db в этом файле будет включать в себя модель статьи, и вы можете получить доступ к методам create, edit, get и delete объекта статьи, как показано ниже:
// Create new article
db.article.create({data: {name: 'Blitz.js'}}).
// Edit article
db.article.update(id, data).
// Get articles
db.article.find({}).
// Delete a article
db.article.delete().Шаг 4 — Создание страниц
Теперь вам нужно создать страницы для модели статьи. Для этого вы можете использовать приведенную ниже команду командной строки Blitz.js.
blitz g all articleПриведенная выше команда создаст набор новых файлов в папках src\pages\articles и src\articles.
Как видите, Blitz.js автоматически генерирует все файлы, необходимые для выполнения основных операций CRUD с моделью статьи.
src/pages/articles— эта папка содержит маршруты страниц для модели статьи.src/pages/articles/index.js— этот компонент страницы отображается, когда URL-адрес/articlesзагружается в браузер. Он включает в себя функции для извлечения статей из базы данных.
src/pages/articles/new.js— этот компонент страницы отображается, когда URL-адрес/articles/newзагружается в браузер. Он включает в себя функции для создания новой статьи в базе данных.src/articles/components/ArticleForm.js- Эта форма отображается в файлеarticles/new.js. Он включает в себя поле ввода для ввода названия статьи и кнопку отправки.
pages/articles/[articleId].js- Этот компонент страницы отображается, когда URL-адрес/articles/[articleId]загружается в браузер. Он будет отображать детали одной статьи.
pages/articles/[articleId]/edit.js— этот компонент страницы отображается, когда URL-адрес/articles/[articleId]/editзагружается в браузер. Это позволит редактировать детали одной статьи.
В конце каждой страницы вы увидите строку кода, подобную этой:
NewArticlePage.authenticate = trueСвойство аутентификации используется для аутентификации маршрутов страниц. Если установлено значение true, пользователи должны пройти аутентификацию перед доступом к странице.
Шаг 4 — Понимание мутаций и запросов
Папка src/articles/mutations содержит все изменения модели статьи. Например, файл src/articles/mutations/createArticle.js содержит функции для создания новой статьи.
export default resolver.pipe(resolver.zod(CreateArticle), resolver.authorize(), async (input) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const article = await db.article.create({
data: input,
})
return article
})Папка src/articles/querie содержит все файлы преобразователя запросов для модели статей. Например, файл src/articles/queries/getArticle.js содержит запрос на возврат одной статьи.
export default resolver.pipe(
resolver.zod(GetArticle),
resolver.authorize(),
async ({ id }) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const article = await db.article.findFirst({
where: {
id,
},
})
if (!article) throw new NotFoundError()
return article
}
)Аналогично страницам, мутациям и преобразователям запросов также по умолчанию включена авторизация. resolver.authorize() гарантирует, что пользователи без надлежащей авторизации не смогут выполнять какие-либо изменения или запросы к вашей модели. Итак, если вы просто делаете приложение без авторизации, вам нужно удалить эту функцию.
Шаг 5 — Запустите приложение
Наконец, запустите приложение с помощью команды blitz dev и перейдите к localhost:3000/articles, чтобы увидеть приложение в действии.
Вы можете найти полный пример кода этого приложения в этом репозитории GitHub.
Заключение
Подход Zero-API с Blitz.js упрощает веб-разработку, предоставляя комплексную и простую в использовании структуру, которая автоматизирует многие утомительные задачи, с которыми сталкиваются разработчики. С помощью Blitz.js разработчики могут быстро формировать проект и создавать страницы, модели, мутации и преобразователи запросов с помощью интерфейса командной строки. Кроме того, мы изучили файлы и папки в проекте Blitz.js и поняли их функции. В целом подход Zero-API с Blitz.js — это мощный инструмент для быстрого создания надежных веб-приложений.
Создавайте приложения React с повторно используемыми компонентами, как Lego
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
