Фото NASA на Unsplash

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

В lea.online мы часто создавали похожие реализации в разных приложениях при управлении коллекциями, методами, публикациями, загрузкой файлов и http-маршрутами. Мы также решили абстрагировать некоторые из этих повторяющихся паттернов и опубликовали их как пакеты Meteor под свободной лицензией, чтобы вы тоже могли извлечь пользу из наших усилий. 💪

Разделение кода

Meteor поддерживает возможность написать код один раз и использовать его на сервере и на клиенте. Он также поддерживает точное разделение кода во время сборки, что позволяет вам указать, предназначен ли код только для сервера или только для клиента. Обе функции вместе позволяют создавать изоморфный код, что означает, что объект «выглядит» одинаково (одни и те же функции/api), но может быть реализован так, чтобы вести себя по-разному, специально для каждой среды.

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

// returns a value only on a given architecture
export const onServer = x => Meteor.isServer ? x : undefined
export const onClient = x => Meteor.isClient ? x : undefined

// execute a function and return it's value only on a given architecture
export const onServerExec = fn => Meteor.isServer ? fn() : undefined
export const onClientExec = fn => Meteor.isClient ? fn() : undefined

Пример разделения кода с помощью прямого присваивания:

import { onServer, onClient } from 'utils/arch'

export const Greeting = {
  name: onServer('John Doe'), // will be undefined on the client
  age: onClient(42) // will be undefined on the server 
}

Обратите внимание, что этот пример является изоморфным. На сервере name будет присутствовать, а на клиенте нет. И наоборот с age.

Примером изоморфного кода, использующего разделение кода с выполнением функций, может быть:

import { onServerExec, onClientExec } from 'utils/arch'

export const Greeting = {}

Greeting.name = undefined

onServerExec(() => {
  Greeting.name = 'John Doe'
})

onClientExec(() => {
  Greeting.name = 'Anonymous'
})

Замечательно то, что вы можете использовать import внутри этих вызовов функций и все равно предотвратить утечку в другую среду!

Бонус: создание изоморфной обертки

Приведенные выше абстракции можно развить еще больше, чтобы обернуть присваивания в одну строку:

export const isomorphic = ({ server, client }) => {
  if (Meteor.isServer) return server
  if (Meteor.isClient) return client
}

export const isomorphicExec = ({ server, client }) => {
  if (Meteor.isServer) return server()
  if (Meteor.isClient) return client()
}

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

export const Greeting = {
  name: isomorphic({
    server: 'John Doe',
    client: 'Anonymous'
  }),

  lang: isomorphicExec({
    server: () => Meteor.settings.defaultLang,
    client: () => window.navigator.language
  })
}

Когда использовать какой из них?

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

Фабрика коллекций

Ссылка на GitHub: https://github.com/leaonline/collection-factory
Packosphere: https://packosphere.com/leaonline/collection-factory

Создание коллекций Mongo в Meteor уже настолько быстро и просто, насколько это вообще возможно. Кроме того, вы можете захотеть прикрепить схему к данной коллекции, прикрепить хуки или определить коллекцию как локальную.

Чтобы достичь всего этого одновременно, вы можете использовать возможности нашего пакета lea.online collection factory. Добавьте следующие пакеты в свой проект:

$ meteor add leaonline:collection-factory aldeed:collection2
$ meteor npm install --save simpl-schema

Два других пакета (simpl-schema и aldeed:collection2) позволяют проверять любые входящие данные на уровне коллекции (вставка/обновление/удаление), обеспечивая дополнительный уровень безопасности при работе с данными. Обратите внимание, что они совершенно необязательны.

Пример использования

Давайте рассмотрим определение коллекции как объект с name (представляющий имя коллекции) и schema (представляющий схему структуры данных коллекции):

export const Todos = {
  name: 'todos'
}

Todos.schema = {
  userId: String,
  title: String,
  isPublic: Boolean,
  items: Array,
  'items.$': Object,
  'items.$.text': String,
  'items.$.checked': Boolean
}

Как видите, здесь нет кода для фактического создания (инстанцирования) коллекции, как и для создания новой схемы. Но он выглядит читабельным и понятным. Именно здесь и вступает в игру фабрика:

// imports/api/factories/createCollection
import { createCollectionFactory } from 'meteor/leaonline:collection-factory'
import SimpleSchema from 'simpl-schema'

export const createCollection = createCollectionFactory({ 
  schemaFactory: definitions => new SimpleSchema(definitions) 
})

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

// server/main.js
import { Todos } from '../imports/api/Todos'
import { createCollection } from '/path/to/createCollection'

const TodosCollection = createCollection(Todos)
TodosCollection.insert({ foo: 'bar' }) // throws validation error, foo is not in schema

Экземпляры коллекций

Отделение определения от реализации — это то, что делает ваш код тестируемым и сопровождаемым. Вы даже можете пойти на шаг дальше и получить доступ к этим коллекциям независимо (decoupled) от локальной переменной коллекции.

Для этого вам нужно добавить пакет Mongo Collection Instances (dburles:mongo-collection-instances):

$ meteor add dburles:mongo-collection-instances

Books = new Mongo.Collection('books');
Mongo.Collection.get('books').insert({ name: 'test' });

Mongo.Collection.get('books').findOne({ name: 'test' });

$ meteor add dburles:mongo-collection-instances

Обертка:

export const getCollection = ({ name }) => Mongo.Collection.get(name)

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

const TodosCollection = getCollection(Todos)

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

Фабрика методов

Ссылка на GitHub: https://github.com/leaonline/method-factory
Packosphere: https://packosphere.com/leaonline/method-factory

Центральной концепцией Meteor является определение конечных точек в стиле rpc, называемых методами Meteor. Их могут вызывать любые подключенные клиенты, что делает их удобным способом взаимодействия с сервером, но также и легким вектором атаки. Вокруг методов существует множество концепций для проверки входящих данных или ограничения доступа.

Мы опубликовали leaonline:method-factory как способ легкого определения методов в основном декларативным способом. Для этого он расширяет концепцию mdg:validated-method несколькими абстракциями:

import { createMethodFactory } from 'meteor/leaonline:method-factory'
import SimpleSchema from 'simpl-schema'

export const createMethod = createMethodFactory({
  schemaFactory: definitions => new SimpleSchema(definitions) 
})

Если у вас не установлена Simple Schema, вам нужно добавить ее через npm:

$ meteor npm install --save simpl-schema

Определить метод для нашего Todos очень просто:

Todos.methods = {
  create: {
    name: 'todos.methods.create',
    schema: Todos.schema, // no need to write validate function
    isPublic: false, // see mixins section
    run: onServer(function (document) {
      document.userId = this.userId // don't let clients decide who owns a document
      return getCollection(Todos.name).insert(document)
    })
  }
}

Создание метода аналогично ранее упомянутой фабрике коллекций:

import { Todos } from '/path/to/Todos'
import { createMethod } from '/path/to/createMethod'

Object.methods(Todos).forEach(options => createMethod(options))

И, наконец, вызов метода на клиенте также очень прост:

import { Todos } from '/path/to/Todos'

const insertDoc = {
  title: 'buy groceries',
  isPublic: false,
  items: [
    { text: 'bread', checked: false },
    { text: 'butter', checked: false },
    { text: 'water', checked: false },
  ]
}

Meteor.call(Todos.methods.create.name, insertDoc)

Добавление ограничений с помощью миксинов

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

export const checkPermissions = options => {
  const { run, isPublic } = options

  // check if we have an authenticated user
  options.run = function (...args) {
    const env = this

    // methods, flagged as isPublic have no permissions check
    if (!isPublic && !env.userId) {
      throw new Meteor.Error('permissionDenied', 'notLoggedIn')
    }

    // if all good run the original function
    return run.apply(env, args)
  }

  return options
}

// note: replace the console. calls with
// your custom logging library

export const logging = options => {
   const { name, run } = options
   const logname = `[${name}]:`

   options.run = function (...args) {
     const env = this
     console.log(logname, 'run by', env.userId)

     try {
       run.apply(env, args)
     } catch (runtimeError) {
       console.error(logname, 'error at runtime')
       throw runtimeError
     }
   }

   return options
}

Вот как выглядит обновленная фабрика методов с использованием миксинов:

import { createMethodFactory } from 'meteor/leaonline:method-factory'
import SimpleSchema from 'simpl-schema'
import { checkPermissions } from '/path/to/checkPermissions'
import { logging } from '/path/to/loggin'

export const createMethod = createMethodFactory({
  schemaFactory: definitions => new SimpleSchema(definitions),
  mixins: [checkPermissions, logging]
})

Теперь эти миксины применяются ко всем методам автоматически, без необходимости назначать их каждому методу самостоятельно! Обратите внимание, что пакет также позволяет прикреплять миксины только к одному определению метода. Если вы хотите прочитать всю документацию по API, вам следует ознакомиться с репозиторием:

$ meteor add leaonline:method-factory

import { createMethodFactory } from 'meteor/leaonline:method-factory'
const createMethod = createMethodFactory() // no params = use defaults
const fancyMethod = createMethod({ name: 'fancy', validate: () => {}, run: () =>

Фабрика публикаций

Ссылка на GitHub: https://github.com/leaonline/publication-factory
Пакосфера: https://packosphere.com/leaonline/publication-factory

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

Мы создали удобную абстракцию для публикаций, чтобы иметь аналогичный API, как у фабрики методов (или как ValidatedMethod). Она также позволяет передавать миксины как методы и даже повторно использовать миксины! Давайте создадим нашу фабрику публикаций:

import { createPublicationFactory } from 'meteor/leaonline:publication-factory'
import { checkPermissions } from '/path/to/checkPermissions'
import { logging } from '/path/to/loggin'

const createPublication = createPublicationFactory({
  schemaFactory: definitions => new SimpleSchema(definitions),
  mixins: [checkPermissions, logging]
})

Затем добавим публикацию к нашему Todos, которая публикует один список todos:

Todos.publications = {
  my: {
    name: 'todos.publications.my',
    schema: {
      limit: {
        type: Number,
        optional: true
        min: 1
      }
    },
    run: onServer(function ({ limit = 15 } = {}) {
      const query = { userId: this.userId }
      const projection = { limit }
      return getCollection(Todos).find(query, projection)
    })
  }
}

Конвейер создания такой же, как и тот, который мы используем для наших методов:

import { Todos } from '/path/to/Todos'
import { createPublication } from '/path/to/createPublication'

Object.values(Todos.publications).forEach(options => createPublication(options))

На этом этапе есть несколько преимуществ:

1. У вас есть читабельный и (в основном) описательный способ определения того, что Todos на самом деле публикует.
2. Вы можете повторно использовать миксины, которые вы использовали в фабрике методов.
3. Вы можете легко компоновать эти методы фабрики вместе (что мы и сделаем в последнем разделе).

Для получения дополнительной информации о пакете вам следует ознакомиться с документацией на репозитории GitHub:

$ meteor add leaonline:publication-factory

import { createPublicationFactory } from 'meteor/leaonline:publication-factory'
import { MyCollection } from '/path/to/MyCollection'
const createPublication

Ограничение скорости

Ссылка на GitHub: https://github.com/leaonline/ratelimit-factory
Пакосфера: https://packosphere.com/leaonline/ratelimit-factory

Каждый раз, когда вы используете методы и публикации, вы должны использовать DDP-ограничитель скорости Meteor, чтобы предотвратить перегрузку ресурсов сервера массивными вызовами тяжелых методов или публикаций.

Вы также можете прочитать больше об ограничении скорости в официальной документации Meteor.

С помощью нашей фабрики ratelimiter мы предоставляем быстрый и эффективный способ включить ограничение скорости в ваши методы, публикации и внутренние компоненты Meteor:

$ meteor add leaonline:ratelimit-factory

Затем добавьте определения метода или публикации в rateLimiter:

import { Todos } from '/path/to/Todos'
import { 
  runRateLimiter,
  rateLimitMethod,
  rateLimitPublication
} from 'meteor/leaonline:ratelimit-factory'

// ...

Object.values(Todos.publications).forEach(options => {
  createPublication(options)
  rateLimitPublication(options)
})

Object.values(Todos.methods).forEach(options => {
  createMethod(options)
  rateLimitMethod(options)
})

runRateLimiter(function (reply, input) {
  // if the rate limiter has forbidden a call
  if (!reply.allowed) {
    const data = { ...reply, ...input }
    console.error('rate limit exceeded', data)
  }
})

Под капотом весь пакет использует DDPRateLimiter, поэтому вы также можете добавить numRequests и timeInterval к вашим определениям метода или публикации, чтобы получить более тонкие ограничения скорости.

Конечные точки HTTP

Ссылка на GitHub: https://github.com/leaonline/http-factory
Пакосфера: https://packosphere.com/leaonline/http-factory

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

В lea.online мы попытались абстрагировать этот процесс, чтобы сделать его похожим на определение методов или публикаций в довольно описательной форме (как показано в вышеприведенных разделах). Результатом стала наша HTTP-фабрика:

$ meteor add leaonline:http-factory
$ meteor npm install --save body-parser

import { WebApp } from 'meteor/webapp'
import { createHTTPFactory } from 'meteor/leaonline:http-factory'
import bodyParser from 'body-parser'

WebApp.connectHandlers.urlEncoded(bodyParser /*, options */) // inject body parser

export const createHttpRoute = createHTTPFactory({ 
  schemaFactory: definitions => new SimpleSchema(definitions)
 })

Теперь давайте определим конечную точку HTTP на нашем Todos:

Todos.routes = {}

Todos.routes.allPublic = {
  path: '/todos/public',
  method: 'get',
  schema: {
    limit: {
      type: Number,
      optional: true,
      min: 1
    }
  },
  run: onServer(function (req, res, next) {
    // use the api to get data instead if req
    const { limit = 15 } = this.data()
    return getCollection(Todos)
      .find({ isPublic: true }, { limit })
      .fetch()
  })
}

Создание конечных точек при запуске, опять же, так же просто, как и с другими фабриками:

import { Todos } from '/path/to/Todos'
import { createHttpRoute } from '/path/to/createHttpRoute'

Object.values(Todos.routes).forEach(options => createHttpRoute(options))

Вызов конечной точки может быть сделан с помощью fetch, классического XMLHttpRequest или библиотеки http Meteor (использованной в примере):

import { Todos } from '/path/to/Todos'

HTTP.get(Todos.routes.allPublic.path, { params: { limit: 5 }}, (err, res) => {
  console.log(res.content) // [{...}, {...}, {...},{...}, {...}]
})

Это лишь очень малая часть того, что вы можете сделать с помощью этого пакета! Подробнее об API и документации можно прочитать в репозитории GitHub:

Файлы и GridFs

Ссылка на GitHub: https://github.com/leaonline/grid-factory
Packosphere: https://packosphere.com/leaonline/grid-factory

В Meteor нет встроенной концепции для загрузки файлов, но есть отличные пакеты, такие как Meteor-Files (ostrio:files).

Он поддерживает загрузку файлов в несколько хранилищ, таких как FileSystem, S3, Google Drive или встроенные GridFs от Mongo. Последний вариант является очень хитрым решением, но обеспечивает отличный способ загрузки файлов в базу данных без необходимости регистрировать (и оплачивать) внешний сервис или возиться с путями и ограничениями файловой системы.

К счастью, мы создали пакет с полной интеграцией GridFs для Meteor-Files:

$ meteor add leaonline:files-collection-factory ostrio:files
$ meteor npm install --save mmmagic mime-types # optional

Вторая строка является необязательной, это

import { MongoInternals } from 'meteor/mongo'
import { createGridFilesFactory } from 'meteor/leaonline:grid-factory'
import { i18n } from '/path/to/i8n'
import fs from 'fs'

const debug = Meteor.isDevelopment
const i18nFactory = (...args) => i18n.get(...args)
const createObjectId = ({ gridFsFileId }) => new MongoInternals.NpmModule.ObjectID(gridFsFileId)
const bucketFactory = bucketName => 
  new MongoInternals.NpmModule.GridFSBucket(MongoInternals.defaultRemoteCollectionDriver().mongo.db, { bucketName })
const defaultBucket = 'fs' // resolves to fs.files / fs.chunks as default
const onError = error => console.error(error)

export const createFilesCollection = createGridFilesFactory({ 
  i18nFactory, 
  fs, 
  bucketFactory, 
  defaultBucket, 
  createObjectId, 
  onError, 
  debug 
})

Теперь предположим, что в нашем приложении Todos будет несколько пользователей, работающих над списками, и мы хотим, чтобы они предоставили фотографию профиля, тогда мы можем создать новую коллекцию FilesCollection с хранилищем GridFs следующим образом:

const ProfileImages = createFilesCollection({
  collectionName: 'profileImages',
  bucketName: 'images', // put image collections in the 'images' bucket
  maxSize: 3072000, // 3 MB max in this example
  validateUser: function (userId, file, type, translate) {
    // is this a valid and registered user?
    if (!userId || Meteor.users.find(userId).count() !== 1) {
      return false
    }

    const isOwner = userId === file.userId
    const isAdmin = ...your code to determine admin
    const isAllowedToDownload =  ...other custom rules

    if (type === 'upload') {
      return Roles.userIsInRole(userId, 'can-upload', 'mydomain.com') // example of using roles
    }

    if (type === 'download') {
      return isOwner || isAdmin || isAllowedToDownload // custom flags
    }

    if (type === 'remove') {
     // allow only owner to remove the file
     return isOwner || isAdmin
    }

    throw new Error(translate('unexpectedCodeReach'))
  }
})

С помощью этой короткой установки вы сэкономите много времени и усилий, которые вы бы потратили, пытаясь запустить всю эту установку GridFs.

Подробнее об API читайте в репозитории:

Композиция всех инструментов

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

import { createCollection } from 'path/to/createCollection'
import { createFilesCollection } from 'path/to/createFilesCollection'
import { createMethod } from 'path/to/createMethod'
import { createPublication } from 'path/to/createPublication'
import { createHttpRoute } from 'path/to/createHttpRoute'

export const createBackend = definitions => {
  const collection = createCollection(definitions)

  // files collections could be indicated by a files property
  if (definitions.files) {
    createFilesCollection({ collection, ...definition.files })
  }

  // there will be no op if no methods are defined
  Object.values(definitions.methods || {}).forEach(options => {
    createMethod(options)
    rateLimitMethod(options)
  })

  // there will be no op if no publications are defined
  Object.values(definitions.publications || {}).forEach(options => {
    createMethod(options)
    rateLimitMethod(options)
  })

  // there will be no op if no publications are defined
  Object.values(definitions.routes || {}).forEach(options => {
    createRoute(options)
  })
}

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

Несколько заключительных замечаний

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

Мы надеемся, что эти инструменты помогут вам повысить производительность! 🚀

Я регулярно публикую статьи о Meteor и JavaScript на dev.to. Если вам нравится то, что вы читаете, и вы хотите поддержать меня, вы можете отправить мне чаевые через PayPal.

Вы также можете найти (и связаться со мной) на GitHub, в Twitter и LinkedIn.

Следите за последними разработками Meteor, посетив их блог, а если вы также увлечены Meteor, как и я, и хотите показать его миру, вам стоит заглянуть в магазин Meteor merch.