Важные приёмы при работе с Meteor

Russian (Pусский) translation by Anton L (you can also view the original English article)

Meteor является проектом с открытым исходным кодом, представляет из себя платформу для разработки веб-приложений, веб-приложений написанных полностью на JavaScript.

Meteor предоставляет инструменты для разработки веб-приложений, отлично подходит для стартапов и в основном для любых новых проектов. Логика приложения пишется на одном языке, результат работает на разных платформах (iOS, Android, десктоп) , также имеются hot push обновления поддерживаемые по умолчанию.

Это значит, что вы можете обновить приложение на устройстве пользователя, при этом не нужно ждать одобрения App Store. Ряд пакетов доступен благодаря npm, также у Meteor есть своя библиотека под названием Atmosphere, довольно любопытный инструмент, с которым приятно работать.

Быстрая разработка с Meteor

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

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

NPM + Atmosphere пакеты

Любой пакет из npm доступен в Meteor, так что если вам нравится использовать инструменты на вроде Grunt, Browserify, Webpack, Bootstrap, React, jQuery и Angular, у вас не возникнет проблем при работе с Meteor.

Для поиска новых пакетов:

Для npm пакетов, используйте npmjs.com.
Для пакетов Meteor, используйте atmospherejs.com.

Для установки npm пакета в Meteor, просто запустите:

1	$ meteor npm install --save browserify

Запуск данной команды обновит ваш package.json добавив зависимости, также будет скачен пакет в локальную директорию node_modules/ вашего приложения.

Контроль версий

Важное замечание: советую вам не добавлять node_modules/ в гит хранилище, в случае если над приложением будет работать другой разработчик, скажите ему, чтобы он запустил meteor npm install, тем самым будут установлены все необходимые пакеты.

Аккаунты пользователей

Пакет accounts-ui позволяет пользователям залогиниться и зарегистрироваться в приложении, также имеется поддержка oAuth, связанная с Meteor аккаунтами.

Популярный запрос - для соответствия бренду, кастомизация подтверждений (sendVerificationEmail) или приглашений (sendEnrollmentEmail), чтобы их стиль соответствовал остальной теме приложения.

Отличный способ создать HTML письмо в Meteor - использовать пакет pretty emails от yogiben.

1	meteor add yogiben:pretty-email

Теперь вы можете изменить подтверждающие письмо всего парой строк:

1	PrettyEmail.defaults.verifyEmail =
2	heading: 'Yo - You Need to activate your account on mega mushrooms'
3	buttonText: 'Activate'
4	...

Для добавления информации о вашей компании, вы можете настроить PrettyEmail.options следующим образом:

PrettyEmail.options =
  from: 'support@mycompany.com'
  logoUrl: 'http://mycompany.com/logo.png'
  companyName: 'myCompany'
  companyUrl: 'http://mycompany.com'
  companyAddress: '123 Street, ZipCode, City, Country'
  companyTelephone: '+1234567890'
  companyEmail: 'support@mycompany.com'
  siteName: 'mycompany'

Чтобы послать email, используйте следующие методы:

1	Accounts.sendVerificationEmail Meteor.userId()
2	Accounts.sendResetPasswordEmail Meteor.userId()
3	Accounts.sendEnrollmentEmail Meteor.userId()

Если вы хотите добавить шаблон, вы можете сделать это кастомизировав следующие опции:

PrettyEmail.send 'call-to-action',
  to: 'myuser@myuser.com'
  subject: 'You got new message'
  heading: 'Your friend sent you a message'
  message: 'Click the button below to read the message'
  buttonText: 'Read message'
  buttonUrl: 'http://mycompany.com/messages/2314'
  messageAfterButton: "I come after the button!"

Изменение стилей также не составит труда:

PrettyEmail.style =
  fontFamily: 'Helvetica'
  textColor: '#606060'
  buttonColor: '#FFFFFF'
  buttonBgColor: '#007FFF

Вот пример письма - активации, которое получит пользователь в своём емейл клиенте.

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

Поддержка Ratchet, Materialize и Bootstrap

Имеется пакет для аккаунтов пользователя, каждой из этих популярных фронтенд библиотек, также как и Ionic. Каждый из них может быть полностью настроен, как вы этого захотите.

Ratchet: meteor add useraccounts:ratchet
Ionic: meteor add useraccounts:ionic
Bootstrap: meteor add useraccounts:bootstrap
Materialize: meteor add useraccounts:materialize

UI

Как и в случае с аккаунтами пользователя, имеется пакет для популярных фронтенд библиотек, таких как Bootstrap, Angular, React и шаблонизатор Blze, и множество других, к примеру Semantic UI.

Поиск на atmosphere даёт много результатов; вот некоторые из моих любимых:

Angular пакеты: angularui
Интеграция Semantic UI: Semantic-UI-Meteor
Компоненты Blaze (компоненты для неоднократного применения): blaze-components
Компоненты Ionic: meteoric:ionic
Фреймворк Ratchet: pcjpcj2:ratchet

React + Bootstrap

Вам нужно установить пакет npm React, с помощью команды:

1	$ npm install --save react react-dom
2	$ npm install --save react-bootstrap

Теперь, для пакета метеор, запустите meteor add universe:react-bootstrap.

Теперь можно использовать Bootstrap компоненты в вашем React JSX:

const buttonsInstance = (
  <div>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="large">Large button</Button>
      <Button bsSize="large">Large button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary">Default button</Button>
      <Button>Default button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="small">Small button</Button>
      <Button bsSize="small">Small button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
      <Button bsSize="xsmall">Extra small button</Button>
    </ButtonToolbar>
  </div>
);

ReactDOM.render(buttonsInstance, mountNode);

Переходы между страницами

Если вы используете Iron Router, тогда вы можете воспользоваться пакетом meteor-transitioner. Во время работы с шаблоном Blaze, добавьте следующую конструкцию вокруг {{yield}}:

1	{{#transitioner}}
2	{{> yield}}
3	{{/transitioner}}

Теперь настройте переход между роутами:

Transitioner.transition({
    fromRoute: 'fromRouteName',
    toRoute: 'toRouteName',
    velocityAnimation: {
        in: animation,
        out: animation
    }
})

Больше информации о переходах, можно найти здесь README.

Mongo

Для редактирования базы данных mongo в браузере, инструмент Mongol один из лучших, что мне приходилось использовать. Как только вы установите Mongol, командой:

1	$ meteor add msavin:mongol

Нажмите Control-M и у вас будет доступ к вашим коллекциям, с полностью доступным в браузере CRUD.

Я считаю, что использование Mongol невероятно полезно во время отладки приложений, или изменения данных.

Расширения браузера

Для пользователей Chrome, имеется плагин Mongo под названием MiniMongo, который позволяет просматривать базу данных Meteor во вкладке инструментов разработчика.

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

Развёртывание на сервере

Используя замечательный бесплатный инструмент mup, вы можете отправить ваш сайт на Digital Ocean VPN за несколько минут.

Конфигурация очень простая и вам понадобится только ваше приложение, данные SSH, и возможно SSL сертификат, на тот случай если будет использоваться HTTPS.

Чтобы настроить mup, начните с создания директории для развёртывания:

1	$ cd meteor-app
2	$ mkdir .deploy
3	$ cd .deploy

Установите mup:

1	$ npm install -g mup

Инициализируйте директорию:

1	$ mup init

Теперь вам надо настроить процесс развёртывания настроив файл mup.js, который был создан на предыдущей стадии.

module.exports = {
  servers: {
    one: {
      host: '1.2.3.4',
      username: 'root',
      // pem: '/home/user/.ssh/id_rsa',
      // password: 'password',
      // or leave blank to authenticate using ssh-agent
      opts: {
        port: 22,
      },
    }
  },

  meteor: {
    name: 'app',
    path: '../app',
    // lets you add docker volumes (optional)
    volumes: {
      // passed as '-v /host/path:/container/path' to the docker run command
      '/host/path': '/container/path',
      '/second/host/path': '/second/container/path'
    },
    docker: {
      // Change the image to 'kadirahq/meteord' if you
      // are using Meteor 1.3 or older
      image: 'abernix/meteord:base' , // (optional)
      imagePort: 80, // (optional, default: 80)

      // lets you add/overwrite any parameter on
      // the docker run command (optional)
      args: [
        '--link=myCustomMongoDB:myCustomMongoDB', // linking example
        '--memory-reservation 200M' // memory reservation example
      ],
      // (optional) Only used if using your own ssl certificates.
      // Default is "meteorhacks/mup-frontend-server"
      imageFrontendServer: 'meteorhacks/mup-frontend-server',
      // lets you bind the docker container to a
      // specific network interface (optional)
      bind: '127.0.0.1',
      // lets you add network connections to perform after run
      // (runs docker network connect <net name> for each network listed here)
      networks: [
        'net1'
      ]
    },

     // list of servers to deploy, from the 'servers' list
    servers: {
      one: {}, two: {}, three: {}
    },

    buildOptions: {
      // skip building mobile apps, but still build the web.cordova architecture
      serverOnly: true,
      debug: true,
      cleanAfterBuild: true, // default
      buildLocation: '/my/build/folder', // defaults to /tmp/<uuid>

      // set serverOnly: false if want to build mobile apps when deploying

      // Remove this property for mobileSettings to use your settings.json
      // (optional)
      mobileSettings: {
        yourMobileSetting: 'setting value'
      },
      server: 'http://app.com', // your app url for mobile app access (optional)
       // adds --allow-incompatible-updates arg to build command (optional)
      allowIncompatibleUpdates: true,
    },
    env: {
      // PORT: 8000, // useful when deploying multiple instances (optional)
      ROOT_URL: 'http://app.com', // If you are using ssl, this needs to start with https
      MONGO_URL: 'mongodb://localhost/meteor'
    },
    log: { // (optional)
      driver: 'syslog',
      opts: {
        'syslog-address': 'udp://syslogserverurl.com:1234'
      }
    },
    ssl: {
      // Enables let's encrypt (optional)
      autogenerate: {
        email: 'email.address@domain.com',
        domains: 'website.com,www.website.com' // comma separated list of domains
      }
    },
    deployCheckWaitTime: 60, // default 10
    // lets you define which port to check after the deploy process, if it
    // differs from the meteor port you are serving
    // (like meteor behind a proxy/firewall) (optional)
    deployCheckPort: 80,

    // Shows progress bar while uploading bundle to server (optional)
    // You might need to disable it on CI servers
    enableUploadProgressBar: true // default false.
  },

  mongo: { // (optional)
    port: 27017,
    version: '3.4.1', // (optional), default is 3.4.1
    servers: {
      one: {},
    },
  },
};

Теперь настройте сервер:

1	$ mup setup

Развёртывание:

1	$ mup deploy

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

Если хотите узнать больше о конфигурации SSL, пожалуйста прочитайте данный гайд.

Кэширование

Meteor идёт с appcache, который закэширует приложение после первой загрузки, но не для использования оффлайн.

Если вам нужно кэширование оффлайн вам понадобится GroundMeteor. Это хранилище на стороне клиента, которое работает с LocalCollection.

К примеру, мы можем просматривать и хранить коллекцию локально:

local = new Ground.Collection('offlineCache');

local.observeSource(Data.find());

Meteor.setTimeout(() => {
  // Stop observing - keeping all documents as is
  local.stopObserver();
}, 1000);

Вот пример, контент Data.find() публикации будет закэширован в оффлайн Ground Collection.

Кэши хранилищ ключей

Для кэширования памяти хранилища ключей, вы можете использовать memcache package или redis package, они позволят вам иметь доступ к кэшированным данным на сервере.

Предполагается, что memcache или redis сервер уже запущены, после этого ключ может быть сохранён в memcache.

var memcached = new Memcached( [ 'localhost:11211', 'localhost:11212'] );

  memcached.set( "key", "value", 2, function (err, res) {
    console.log("memcached set action response", err, res);
  });

Или в Redis коллекцию:

var redisCollection = new Meteor.RedisCollection("redis");

Meteor.publish("movies", function () {
  return redisCollection.matching("movies-*");
});

Очень хорошая реализация redis, так как она может быть использована для передачи через publish/subscribe архитектуру Meteor.

Инструменты разработчика

Помимо инструментов которые я упоминал ранее, расширение похожее на Firebug доступно в Chrome, оно делает отладку Meteor гораздо легче. Вы можете просматривать данные, которые были переданы от сервера к клиенты используя вкладку DDP и изучить ваш шаблон Blaze с помощью Blaze inspector.

IDE

Для разработки в редакторе Sublime text, кастомная версия Tern.js предоставляет автодополнение для Meteor. Скачать можно на GitHub.

JetBrains предоставляет автоматическую интеграцию с проектами Meteor, с подсветкой синтаксиса и отладкой. Atom также обладает несколькими пакетами для синтаксиса, сниппетов кода и автодополнения.

Шаблона (Boiler Plates)

Если вы хотите начать с приложения, которое уже настроено, взгляните на yogiben's starter. Главный разработчик Meteor также создал отличный base starter. Если хотите использовать React, можете взглянуть на генератор для Yeoman.

Далее для запуска приложения, Meteor Kitchen предоставит отличный графический интерфейс для конфигурации роутов.

Панели администратора

Если вы используете Yogiben's Meteor Starter, вы можете убедится, что панель администратора будет хорошо работать. Всё остальные проекты, которые используют mongo и blaze должны подойти, хотя приложения с React Router могут иметь конфликты с Iron Router.

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

Метеор для метеоритов

Перед тем как мы закончим, давайте я расскажу вам немного о проекте Meteor. Meteor официально был выпущен в январе 2012, результат проекта Y Combinator incubator, который получил $11.2 миллиона инвестиций от компании Andreessen Horowitz.

Изначально он работал с пакетным менеджером Meteorite (mrt в командной строке), данный элемент был всегда частью ядра Meteor. С релизом Meteor 0.9, произошли изменения к лучшему, было решено использовать пакеты Atmosphere.

Очень просто добавить пакеты в приложение Meteor - meteor add mrt:moment.

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

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

Работая полностью на JavaScript означает что Meteor может взаимодействовать с огромным количеством существующих JS библиотек, также как и Node библиотеками, теперь, после интеграции с npm. Тем самым Meteor становится передовым фреймворком.

Видно перспективу и прогресс в веб-разработке, подумайте о той мощности которая оказывается в ваших руках во время работы с Meteor, у вас есть доступ к npm и atmosphere пакетам. Это значительное изменение, совсем не так как было раньше, большой простор разработки, по сравнению с эрой до jQuery, до npm, до Bower, во времена Flash, NotePad/Dreamweaver и PHP3. Я работал в командах из десяти разработчиков, делая работу которая, звучит невероятно, может быть выполнена за неделю одним или двумя разработчиками с Meteor.

С этими инструментами в вашем распоряжении, ещё не было лучшего времени для технически мыслящих веб-предпринимателей. Создание приложений вашей мечты своими силами, оставит невероятные впечатления.

К примеру, сегодня я создал CMS с базой данной, с системой пользователей и панелью администратора, с Facebook и Google+ oAuth. Я развернул это на новом сервере, чтобы поделиться с другими людьми для отладки, и видел как данные менялись в реальном времени.

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

Заключение

Meteor быстрый и мощный движок для веб-приложений, который вам позволит сразу приступить к разработке приложения.

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

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

Чтобы получить поддержку касательно проблем связанных с определённым проектом, вы можете поискать решение на GitHub или создать issue в репозитории для разработчиков, которые помогут вам.

Если вам нужно больше советов о Meteor, можете задать их на официальном форуме.