В сообществе JavaScript существует консенсус в отношении того, что MeteorJS — отличный инструмент для повышения производительности серверной части. В этом сообщении блога я представлю и популяризирую этот стек, который направлен на то, чтобы сделать ваш опыт разработки максимально удобным.
Чтобы продолжить, вы можете проверить репозиторий GitHub с шаблоном. Там же можно прочитать о технических решениях.


Что и зачем этот стек?

Основная цель — сделать разработку максимально быстрой и эффективной. Для этого были выбраны следующие технологии:

  • Метеор — Фреймворк Fullstack, ориентированный на производительность, который использует RPC и сокеты для реактивности.
  • Реагировать— Минимальная библиотека пользовательского интерфейса для создания в Интернете.
  • Пользовательский интерфейс чакры— Библиотека React ориентирована на простоту и производительность.
  • Муравьиный — Наиболее часто используемая библиотека форм для React ориентирована на создание более простых для написания форм.
  • MongoDB — NoSQL и действительно мощный инструмент для прототипирования и создания готовых к использованию приложений из коробки.
  • метеоритное облако— Облачный провайдер, который делает развертывание сервера с включенной базой данных безболезненным.


Как устроен проект?

Прежде чем объяснять, этот шаблон вдохновлен работами Алекса Кондова: Дао узла а также Дао реакции.

Большинство приложений Meteor построены аналогично монорепозиториям с их подразделениями для серверной части и интерфейса, объявленными соответственно в ui а также api папки. У вас может быть общая папка для обмена кодом между интерфейсом и сервером. Например, если вы используете TypeScript, вы можете совместно использовать типы в своей кодовой базе.

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

Структура проекта


Бэкэнд-решения

В этом шаблоне мы решили использовать Mongo, поставляемый вместе с MeteorJS, и добавили несколько пакетов, чтобы сделать его еще более продуктивным. При этом мы решили использовать simple-schema а также percolate:migrationsПервый предназначен для проверки схем во время выполнения, а второй — для создания миграции базы данных.


Миграция базы данных

Есть вопросы о том, как структурировать миграцию?
Использовать api/db/migration.js как ваша ссылка.

Это та функция, которая иногда бывает полезной. Всякий раз, когда сервер запускается, он запускает приведенный ниже код, который находится в api/main.js:

import { Meteor } from 'meteor/meteor';
import { Migrations } from 'meteor/percolate:migrations';
import './db/migrations';
import './tasks/tasks.methods';
import './tasks/tasks.publications';
/**
 * This is the server-side entry point
 */
Meteor.startup(() => {
  Migrations.migrateTo('latest');
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

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


Схемы

Схемы — это способ убедиться, что данные, поступающие из внешнего интерфейса, соответствуют нашим ожиданиям, а также они очищены. Мы решили использовать simpl-schema и присоединяем его к нашей коллекции, как показано на api/tasks/tasks.collection.js. Это позволяет проверить все данные, поступающие в нашу базу данных, и следовать определенной нами структуре. Вы можете увидеть, как устроена задача, и, имея эту схему, мы можем начать создавать методы и публикации.

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


Подключение к серверу

Следуя идее иметь папку для каждой функции, и если она подключается к внешнему интерфейсу, нам нужно предоставить способ подключения. Метеор работает аналогично tRPC а также Blitz.js. Эта модель имеет серверные функции, которые вызываются через удаленный вызов процедур (RPC). В этом шаблоне вызовы, связанные с задачами, находятся в api/tasks/tasks.methods.js папка.

/**
 * Remove a task.
 * @param {{ taskId: String }}
 * @throws Will throw an error if user is not logged in or is not the task owner.
 */
export const removeTask = ({ taskId }) => {
  checkTaskOwner({ taskId });
  TasksCollection.remove(taskId);
};
...
Meteor.methods({
  insertTask,
  removeTask,
  toggleTaskDone,
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Итак, чтобы вызвать этот серверный метод, нам нужно сделать вызов его имени. Это будет выглядеть так:

onDelete={taskId => Meteor.call('removeTask', { taskId })}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Этот образец взят из ui/tasks/TaskItems.jsx.


Подписки

MeteorJS поддерживает подписки из коробки, которые можно увидеть в api/tasks/tasks.publications.js эти публикации вызываются аналогично методам RPC, но их значения являются реактивными. Для получения более подробной информации о том, как действовать и думать в реактивном программировании, см. Андре Стальцесть это суть введения реактивного программирования а также Крис Ковальимеет это репов котором подробно рассматривается теория реактивности.

Использование подписки, как вы можете видеть в наших документах, похоже на использование методов. В React мы используем данные метеора/реакции-метеора для того, чтобы иметь способ реагирования на вызов этих методов.
Хороший пример подписки вы можете найти в ui/tasks/TaskPage.jsx.


Фронтенд решения

Форма задачи


Реакция с Метеором ❤

Что касается нашего внешнего интерфейса, мы выбрали React за его продуктивную экосистему и простоту. В Meteor есть пакет для запроса данных с помощью хуков, что заставляет думать только о воплощении в жизнь решений. Для получения дополнительной информации вы можете проверить репозиторий реагирующих метеорных данныхдля более подробной информации об использовании лучших из них.


Формы

В качестве одной из ключевых частей интерфейса мы выбрали библиотеку, которая поможет нам справиться с этой частью. Formik — один из самых выразительных способов написания форм в React, хороший шаблон для создания такой формы находится в ui/tasks/TaskForm.jsx он также интегрируется с Meteor с помощью метода вызова. Хотите узнать больше и узнать, как создавать множество вещей с помощью Formik? Их документация.


Ядро продуктивности: Chakra-UI

Индикатор входа

Войти темно

Для наших компонентов пользовательского интерфейса мы выбрали пользовательский интерфейс Chakra из-за его производительности, которая соответствует тому, что Meteor делает в бэкэнде, создавая прекрасный поток с выдающимся опытом разработчика. Мы включили темный и светлый режимы. Это можно увидеть в тех конфигах в ui/App.jsx. Вы можете увидеть полный список компонентов Chakra-UI на их сайт.


Мы заинтересовали вас?

После всех этих технических объяснений того, почему мы выбрали этот замечательный стек, мы рекомендуем вам попробовать его! Вы можете кликните сюдачтобы увидеть шаблон. Если у вас есть какие-либо вопросы по поводу этого шаблона, вы можете связаться с нами по адресу метеор / метеор. Не забудьте также отметить нас на GitHub!