Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Meteor
Code

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

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (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, просто запустите:

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

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

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

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

Meteor accounts-ui

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

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

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

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

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

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

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

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

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

Pretty Emails activation email

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

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

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

  • Ratchetmeteor add useraccounts:ratchet
  • Ionicmeteor add useraccounts:ionic
  • Bootstrapmeteor add useraccounts:bootstrap
  • Materializemeteor add useraccounts:materialize

UI

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

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

React + Bootstrap

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

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

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

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

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

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

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

Mongo

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

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

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

Mongol for debugging

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кэширование

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

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

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

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

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

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

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

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

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

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

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

Reviewing a Blaze Template

IDE

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

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

Шаблона (Boiler Plates)

Yeoman

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

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

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

AdminLTE theme admin panel from Yogiben

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

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

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

Meteor Preview 052

Перед тем как мы закончим, давайте я расскажу вам немного о проекте 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, можете задать их на официальном форуме.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.