Мгновенное создание Web-приложений с помощью Meteor

Построение отзывчивых Web-приложений в рекордное время – от концепции до масштабного внедрения

С помощью Meteor, новой платформы для создания Web-приложений, разработчики могут быстро и просто создавать интерактивные и отзывчивые функционально насыщенные клиентские Web-приложения на основе JavaScript. Meteor предлагает новый подход к разработке и внедрению Web-приложений, нацеленный на упрощение и значительное сокращение цикла разработки. Син Ли не ограничивается рекламой, исследуя возможности Meteor на двух нетривиальных полнофункциональных приложениях — мобильном и Web-приложении, — а также поясняет архитектуру платформы Meteor. Вы на практике познакомитесь с созданием приложений Meteor с помощью популярных библиотек JavaScript, ставших отраслевым стандартом.

Син Ли, консультант, Makawave

Author photoСин Ли (Sing Li) является автором developerWorks с момента основания этого сайта и занимается написанием статей и учебных пособий, охватывающих широкий диапазон тем, посвященных Web-сервисам и языку Java. Он обладает более чем 20-летним опытом системного проектирования: начав со встроенных систем, он затем перешел к масштабируемым системам корпоративного класса и завершил круг мобильными сервисами масштаба Web и экосистемами «интернета вещей».



14.06.2013

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

Статья Develop easy real-time websites with Meteor (Разработка простых Web-сайтов реального времени на платформе Meteor), представленная на портале developerWorks, является замечательным пошаговым руководством, рассказывающим об установке и программировании с помощью платформы Meteor. В настоящей статье мы глубже займемся разработкой на примере двух приложений и познакомимся с архитектурой платформы Meteor. Вооружившись этими знаниями, вы сможете решить, подходит ли вам быстрое создание Web-приложений с помощью платформы Meteor.

Назад в будущее

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

Рисунок 1. Таблица продаж по регионам
Screen capture of a typical spreadsheet showing sales by regions and a pie chart of total sales

Опробуйте стандартную электронную таблицу

Вы можете поэкспериментировать с показанной на рисунке 1 таблицей, которая входит в примеры кода для этой статьи (см. раздел Загрузка). Попробуйте изменить показатели продаж и посмотрите, как изменится круговая диаграмма.

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

Сегодня в этом нет ничего принципиально нового или интересного. Но представьте, что за окном 1983 год, когда пакет Lotus 1-2-3 впервые предложил эти функции первым пользователям ПК, и вы, возможно, поймете, какое впечатление они произвели в то время. Никто и никогда ранее не мог добиться такого эффекта столь малыми усилиями. И хотя первые электронные таблицы не были интуитивно понятными, большинство пользователей могли освоить их за считанные дни. Электронные таблицы и в наше время являются одной из главных движущих сил продаж компьютеров во всем мире.

Перенесемся на три десятилетия вперед

Спустя тридцать лет после появления первых электронных таблиц вы можете наблюдать, как эволюционировала метафора электронных таблиц с появлением платформы Meteor. На рисунке 2 показано Web-приложение Sales Portal (портал продаж), созданное с помощью Meteor в 2013 году:

Рисунок 2. Web-приложение Sales Portal
Screen capture of the Meteor Sales by Region application, showing sales by region and pie chart of total sales

Sales Portal показывает текущие показатели продаж по регионам и приводит соответствующую круговую диаграмму. Если бы вы были генеральным директором, вы могли бы контролировать эти показатели, а ваши региональные отделы продаж время от времени могли бы их обновлять.

Если у вас установлена платформа Meteor, вы можете загрузить приложение Sales Portal и поработать с ним на практике. Перейдите в директорию sales_nologin и введите команду meteor run. Введите в браузере адрес http://localhost:3000/, и в его окне появятся показатели продаж и круговая диаграмма. Для изменения любого показателя выполните по нему двойной щелчок. Обновление круговой диаграммы происходит сразу после подтверждения внесенных изменений. Если запустить несколько экземпляров браузера и открыть в них Sales Portal, то все они обновятся с учетом последних внесенных изменений. Значения можно менять из любого экземпляра браузера. (Если вы не можете установить Meteor, попробуйте воспользоваться серверными версиями приложений; см. раздел Ресурсы).

На рисунке 3 показано, как группа продаж региона US Central выбирает и изменяет свои показатели продаж:

Рисунок 3. Обновление показателей продаж региона US Central
Screen capture of a user selecting and updating the sales figure for US Central region in the Meteor Sales Portal web application

На рисунке 4 показаны обновленный показатель продаж региона US Central и новая круговая диаграмма. Любой пользователь, работающий в Sales Portal одновременно с вами, мгновенно увидит эти изменения.

Рисунок 4. Круговая диаграмма мгновенно обновляется, отражая новые показатели продаж региона US Central
Screen capture of the updated pie chart reflecting the new US central sales figure

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

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

Если бы вы проектировали подобную систему стандартными средствами (например, с помощью инструментов Java™), вам потребовались бы значительные усилия по проектированию, написанию кода и развертыванию. Платформа Meteor позволяет существенно сократить эти усилия, что вы наглядно увидите при изучении приведенного ниже кода.

Реактивное мышление

Стандартные реактивные элементы платформы Meteor

Meteor использует определенные источники данных, которые по умолчанию являются реактивными. В настоящее время это:

  • коллекции Meteor — как правило, это результаты запросов к MongoDB;
  • переменные, явно привязанные к объекту Session платформы Meteor;
  • Meteor.user, Meteor.userId и Meteor.logginIn, которые отслеживают текущего пользователя и состояние входа в систему;
  • Meteor.status, который отслеживает состояние подключения к серверу.

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

А теперь представьте, что это нужно сделать с помощью Web-приложения, и вы получите хорошее представление о том, как Meteor предлагает упростить создание систем с Web-интерфейсом.

Проектируя приложение на платформе Meteor, вы должны выбрать реактивные элементы, например показатели продаж по регионам. Затем вы компонуете уровень представления с помощью стандартного кода HTML, CSS, библиотек и компонентов JavaScript на стороне клиента (таких как JQuery, JQuery UI или Underscore), а также технологии создания шаблонов, такой как Handlebars (аналог JavaServer Pages, но запускается обычно на стороне клиента; см. раздел Ресурсы). Платформа Meteor отслеживает все зависимости реактивных элементов, строит визуальные элементы и пересчитывает зависимости в соответствии с последними обновленными значениями.

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


Подробное описание кода Sales Portal

В листинге 1 показан пример файла sales.js, содержащий все логические операции на сторонах сервера и клиента, используемые приложением Sales Portal. Это единственный код JavaScript, который мне пришлось написать для этого приложения. (Файл sales.js расположен в директории sales_nologin загружаемого кода).

Листинг 1. Логические операции на сторонах сервера и клиента для Sales Portal: файл sales.js
Sales2013 = new Meteor.Collection("regional_sales");

if (Meteor.is_client) {
  Template.salesdata.dataset = function () {
    return Sales2013.find({});
  };

  Template.datapoint.selected = function () {
    return Session.equals("selected_datapoint", this._id) ? "selected" : '';
  };

  Template.datapoint.events = {
    'click': function () {
      Session.set("selected_datapoint", this._id);

    }
  };

Template.salesdata.rendered = function()
{

  $('.editable').editable(function(value, settings) { 
     Sales2013.update(Session.get("selected_datapoint"), 
 {$set: {total: parseInt(value)}});
     return(value);
  }, { 
     type    : 'text',
     style : 'inherit',
     width : 100,
     submit  : 'OK',
 });

     var cur = Sales2013.find();
     if (cur.count() === 0)  // если данных нет, круговая диаграмма не строится
       return;
     var data = [];
     cur.forEach( function(sale) {
       data.push( [sale.region, sale.total]);
     });
  var plot1 = $.jqplot ('chart', [data], 
    { 
      seriesDefaults: {
 // Построение круговой диаграммы.
 renderer: $.jqplot.PieRenderer, 
 rendererOptions: {
   // Размещение подписей для секторов диаграммы.
   // По умолчанию подписи показывают проценты.
   showDataLabels: true
 }
      }, 
      legend: { show:true, location: 'e' }
    }
  ); 
}

}

if (Meteor.is_server) {
  Meteor.startup(function () {
      Sales2013.remove({});
      Sales2013.insert({region:"US East", total: 2032333});
      Sales2013.insert({region:"US Central", total: 150332});
      Sales2013.insert({region:"US West", total: 1202412});
      Sales2013.insert({region:"Asia Pacific", total: 701223});
  });
}

Взгляните на условные операторы в листинге 1, относящиеся к переменным Meteor.is_client и Meteor.is_server. Это контекстные индикаторы среды исполнения, которые предоставляются ядром Meteor и используются во всех местах вашего кода. В данном случае они позволяют объединить код, работающий на стороне сервера и на стороне клиента, в одном файле source.js. Любой код за пределами условных операторов работает и на стороне клиента, и на стороне сервера.

С другой стороны, вы можете полностью разделить исходный код сервера и клиента, поместив код клиента в директорию с именем client, а код сервера в директорию с именем server. В таком сценарии все общие средства, используемые и сервером, и клиентом, помещаются в директорию public. Такая структура директорий применяется в более защищенной версии приложения Sales Portal, которая будет описана ниже.

Идентификация реактивных данных

Другие источники реактивных данных

Переменная сеанса selected_datapoint в листинге 1 также является реактивной. (Дополнительная информация о реактивных по умолчанию элементах приведена в боковой колонке Стандартные реактивные элементы платформы Meteor). В данном случае она используется для выделения строки показателей продаж. Выделение строки выполняется путем изменения динамических стилей CSS. Переменная сеанса selected_datapoint обновляется при щелчке по строке. Поскольку Meteor перестраивает зависимости при каждом изменении этой переменной, соответствующим образом обновляется и выделенная строка.

Одним из реактивных источников данных для приложения Sales Portal является запрос к коллекции Sales2013 платформы Meteor. Этот запрос показан в следующем фрагменте клиентского кода из листинга 1:

Template.salesdata.dataset = function () {
   return Sales2013.find({});
};

Поскольку запрос является реактивным, все его зависимости пересчитываются или перестраиваются, если результат запроса приводит к изменениям. Именно так обновляются показатели продаж и круговые диаграммы во всех экземплярах браузера. В листинге 2 показан соответствующий код HTML-шаблона, расположенный в файле sales.html в директории sales_nologin загружаемого кода:

Листинг 2. Код HTML и шаблоны на стороне клиента: файл sales.html
<head>

<title>Sales by Region</title>
</head>

<body>
  <div id="title">
    <h1>Global Sales 2013</h1>
  </div>
  <div id="container">

    <div id="salestable">
      {{> salesdata}}
    </div>
    <div id="chart">
    </div>
  </div>

</body>



<template name="salesdata">
  <div class="salesdata">
    {{#each dataset}}
      {{> datapoint}}
    {{/each}}
  </div>
</template>


<template name="datapoint">
  <div class="datapoint {{selected}}">
    <span class="region">{{region}}</span>
    <span class="sales editable">{{total}}</span>
  </div>
</template>

Файл HTML в листинге 2 представляет собой шаблон Handlebars, поддерживаемый в настоящее время платформой Meteor. Выражения Handlebars заключены в фигурные скобки {{ }}. Благодаря своей подсистеме Spark (которая описана в этой статье в разделе Архитектура современных Web-приложений) Meteor может работать с другими компонентами шаблонов JavaScript.

Строки с показателями продаж строятся с помощью кода шаблона salesdata, выделенного в листинге 2 жирным шрифтом. Поскольку этот шаблон зависит от вспомогательной функции dataset, приведенной в листинге 1, он перестраивается при каждом изменении содержащегося в нем реактивного запроса.

Начальная загрузка данных примера на сервер

Начальные значения региональных продаж для Sales Portal загружаются кодом, работающим на стороне сервера (из листинга 1), который показан в листинге 3:

Листинг 3. Загрузка данных в MongoDB с помощью кода, работающего на стороне сервера
if (Meteor.is_server) {
  Meteor.startup(function () {
      Sales2013.remove({});
      Sales2013.insert({region:"US East", total: 2032333});
      Sales2013.insert({region:"US Central", total: 150332});
      Sales2013.insert({region:"US West", total: 1202412});
      Sales2013.insert({region:"Asia Pacific", total: 701223});
  });
}

Компенсация задержек платформы Meteor

Платформа Meteor поддерживает функцию компенсации задержек. По сути, компенсация задержек является визуальным вариантом концепции согласованности в конечном счете, используемой в системах управления большими объемами данных. При обновлении данных клиента через Minimongo любые изменения, включая реактивное перестроение, незамедлительно отражаются в клиенте. Кроме того, эти изменения передаются серверу. Однако передача измененных значений по разным причинам может потерпеть неудачу — в том числе и из-за отказа в доступе. Механизм публикации-подписки гарантирует, что клиент в конечном итоге (как правило, почти мгновенно) отразит текущее состояние сервера. Компенсация задержек позволяет создать отзывчивый интерфейс пользователя, характерный для современных приложений Web 2.0. Расплатой за это является возможное кратковременное рассогласование визуальных данных.

На сервере Meteor работает полный экземпляр MongoDB, который может принимать запросы и обновления от клиентов, отличных от платформы Meteor.

В клиенте Meteor присутствует такой же API JavaScript MongoDB. Это позволяет унифицировать код клиента и сервера и обеспечивает возможность их многократного использования. API на стороне клиента реализуется «интеллектуальной» заглушкой Minimongo. Для отражения изменений базы данных Minimongo использует функцию компенсации задержки. Minimongo не поддерживает индексирование, поскольку обычно имеет дело с небольшими наборами данных на стороне клиента.

Для управления данными, синхронизированными между сервером MongoDB и клиентом Minimongo, применяется модель публикации-подписки. По умолчанию публикуются все коллекции Meteor на стороне сервера. Для перемещения данных между клиентом и сервером платформа Meteor использует протокол распределенных данных (DDP). (Провайдер и драйверы DDP в форме заглушки могут создаваться и для других баз данных; в настоящее время деятельность сообщества Meteor включает и работу над будущим драйвером MySQL).

Интеграция надстроек jQuery

Для построения круговой диаграммы Sales Portal использует надстройку jqPlot для jQuery. Построение и перестроение круговой диаграммы выполняется реактивно за счет изменения данных в коллекции Sales2013. Как вы могли заметить, шаблон salesdata перестраивается при каждом изменении коллекции Sales2013. В листинге 4 показаны работающие на стороне клиента функции (из листинга 1), которые перестраивают круговую диаграмму по сигналу события rendered шаблона salesdata:

Листинг 4. Код jQuery для построения круговой диаграммы с помощью надстройки jqPlot
Template.salesdata.rendered = function()
{

  $('.editable').editable(function(value, settings) { 
     Sales2013.update(Session.get("selected_datapoint"), 
 {$set: {total: parseInt(value)}});
     return(value);
  }, { 
     type    : 'text',
     style : 'inherit',
     width : 100,
     submit  : 'OK',
 });


     var cur = Sales2013.find();

     if (cur.count() === 0)  // если данных нет, круговая диаграмма не строится
       return;
     var data = [];
     cur.forEach( function(sale) {
       data.push( [sale.region, sale.total]);
     });
  var plot1 = $.jqplot ('chart', [data], 
    { 
      seriesDefaults: {
 //Построение круговой диаграммы.
 renderer: $.jqplot.PieRenderer, 
 rendererOptions: {
   // Размещение подписей для секторов диаграммы.
   // По умолчанию подписи показывают проценты.
   showDataLabels: true
 }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
  
}

Для внесения изменений в показатели продаж непосредственно на странице Sales Portal использует надстройку Jeditable jQuery. Отвечающий за редактирование участок кода находится между строками Template.salesdata.rendered = function() и var cur = Sales2013.find(); в листинге 4.

Дополнительная информация о jQuery и надстройках jqPlot и Jeditable приведена в разделе Ресурсы.

Порядок загрузки таблицы стилей и сценариев платформы Meteor

Для успешной загрузки надстроек jQuery необходимо обеспечить корректный порядок загрузки соответствующих им файлов CSS и кодов JavaScript.

Обратите внимание, что файл sales.html в листинге 2 не содержит тегов <script> и таблицы стилей <link type="text/css" ... >. Meteor автоматически загружает сценарии и таблицы стилей, работающие на стороне клиента, выполняя сканирование директорий: в первую очередь сканируются самые глубокие директории, а затем файлы внутри каждой директории в алфавитном порядке.

Чтобы воспользоваться преимуществами такого порядка загрузки (и тем фактом, что имя сценария или CSS-файла не имеет значения), я переименовал некоторые сценарии так, чтобы они загружались в определенном порядке. Например, файл jquery.jeditable.mini.js в директории client/js был переименован в zjquery.jeditable.mini.js, в результате чего он будет загружен последним. Кроме того, я переименовал файл jqplot.pieRenderer.min.js в yjqplot.pieRenderer.min.js, чтобы он загружался после jquery.jqplot.min.js. Я также поместил CSS-файлы надстроек в поддиректорию client/css, чтобы они загружались первыми.


Повышение безопасности доступа к Sales Portal

До настоящего времени каждый пользователь, знающий URL-адрес приложения Sales Portal, мог просмотреть и даже изменить показатели продаж. И хотя для реальных ситуаций такой подход слишком опрометчив, стандартный режим прототипа, поддерживаемый платформой Meteor, идеально подходит для быстрой начальной оценки ваших приложений. На этом этапе вы, вероятно, будете оперативно изменять способ взаимодействия, интерфейс пользователя и даже логику работы приложения (как правило, не используя для этого конфиденциальные данные). Применение модели с открытым доступом на этапе разработки опытного образца позволяет обмениваться ссылками с коллегами-разработчиками и пользователями-тестировщиками для получения откликов и предложений.

Следующим естественным шагом является закрытие приложения путем включения функций безопасности платформы Meteor. Код версии Sales Portal со значительно более высоким (и, следовательно, более реалистичным) уровнем безопасности находится в поддиректории sales загружаемых материалов. Он добавляет такие функции безопасности, как:

Пакеты Smart Package платформы Meteor

Smart Package — это функциональные модули, которые можно с легкостью добавлять или удалять с помощью командной строки. Smart Package может включать код, исполняемый на стороне сервера или клиента, интерфейсы пользователей, API и многое другое. В этой статье приведены примеры применения пакетов accounts, autopublish и insecure. Вы можете добавить поддержку CoffeeScript, маршрутизацию URI и многие другие функции. Актуальный перечень пакетов Smart Package для вашей версии Meteor можно отобразить с помощью команды list.

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

С этого момента все мои ссылки на приложение Sales Portal будут относиться к защищенной версии, расположенной в директории sales.

Удаление возможности изменения данных на сервере для клиентов

Хорошей отправной точкой для обеспечения закрытости приложения является предотвращение несанкционированного изменения данных. Для этого достаточно удалить пакет insecure командой:

meteor remove insecure

Пакет insecure разрешает серверу не проверять правила доступа перед считыванием или изменением данных. Этот пакет Smart Package устанавливается по умолчанию, открывая доступ всем клиентам. Удаление этого пакета отменяет возможность изменения данных на сервере для клиентов. Если вы вернетесь в один из экземпляров браузера и попытаетесь изменить показатели продаж, то увидите, что попытки приложения изменить данные быстро отклоняются в связи с отказом в доступе со стороны сервера. (Это наглядный пример работы функции компенсации задержки. Данные в клиенте на мгновение обновляются, но как только приходит копия с уполномоченного сервера, данные перезаписываются).

После удаления пакета insecure необходимо добавить правила доступа, чтобы явно разрешить доступ к определенным данным (для указанных пользователей). Но на данном этапе пользователей не существует, поэтому следующим шагом является добавление базы данных пользователей и системы авторизации входа.

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

Перед добавлением системы авторизации пользователей убедитесь, что никто не может видеть данные продаж. (Авторизованные пользователи получат доступ к просмотру данных чуть позже). В данный момент любой пользователь может просматривать (но не изменять) данные, перейдя по URL-адресу портала продаж Sales Portal.

Удалите устанавливаемый по умолчанию пакет autopublish для предотвращения передачи данных коллекции Meteor с сервера клиентам (кроме данных, явно передаваемых сервером подписанному на них клиенту):

meteor remove autopublish

Если теперь перейти по URL-адресу Sales Portal, показатели региональных продаж и круговая диаграмма будут скрыты.

Добавление возможности входа пользователя с помощью пакета accounts

В платформе Meteor имеются пакеты Smart Packages, упрощающие добавление возможности входа и авторизации пользователя в системе. В пакете accounts применяется комплексный подход; он включает интерфейс пользователя, серверную базу данных и необходимые клиент-серверные API. Все эти функции можно добавить в Sales Portal одной командой:

meteor add accounts-password accounts-ui

Пакет account-password поддерживает создание пользователя и вход в систему с использованием запомненной комбинации адреса электронной почты и пароля. Реализация использует протокол защищенной передачи пароля (см. раздел Ресурсы), и поэтому незашифрованные текстовые пароли между клиентом и сервером не передаются.

В дополнение к защищенному паролем входу в систему пользователям можно разрешить вход через Facebook, Twitter, Weibo, GitHub, Google и Meetup, просто добавив в приложение один или несколько пакетов Smart Packages. Поддержка входа через социальные сети с помощью протокола OAuth вряд ли понадобится во внутренней корпоративной сети, но может оказаться полезной для пользователей мобильных или Web-приложений.

Настройка интерфейса для входа в систему

Если вы хотите дополнительно настроить стиль диалогов в интерфейсе пользователя, добавьте пакет accounts-ui-nostyle вместо пакета accounts-ui. Если вы хотите полностью заменить интерфейс, обратитесь к документации на Meteor и познакомьтесь с описанием API и потока данных, используемых в этом процессе (см. раздел Ресурсы).

Выпадающий интерфейс для входа в систему

Пакет accounts-ui предоставляет готовый набор интерфейсов пользователя в стиле CSS (поддерживающих код JavaScript) для обработки входа пользователей в систему, создания новых пользователей и восстановления утерянных паролей. Для добавления этих интерфейсов добавьте вспомогательную функцию {{loginButton}} Handlebars. В листинге 5 показано добавление процедуры входа в систему в файл sales/sales.html приложения Sales Portal:

Листинг 5. Добавление системы входа и авторизации пользователя
<body>
  <div id="title">
   <div class="header">
   <div class="span5">
     <h1 style="margin-bottom: 0px">Sales Portal</h1>
   </div>
   <div class="span5">  <div style="float: right">
    {{loginButtons align="right"}}  </div>
   </div>
   </div>
  </div>

Директория sales загружаемого кода содержит полное приложение Sales Portal с системой управления доступом пользователей. Запустите эту версию и попробуйте войти в систему. Запустите экземпляр браузера и обратите внимание на появившуюся в правом верхнем углу ссылку Sign in (войти). Щелчок по этой ссылке открывает диалоговое окно, показанное на рисунке 5:

Рисунок 5. Диалоговое окно входа в систему из пакета accounts-ui (показано в браузере Firefox)
Browser (Firefox) screen capture of the sign-in dialog

Пакет accounts использует коллекции Meteor и механизм публикации-подписки — те же функции, которые вы можете вручную вставить в свой код — для реализации базы данных пользователей. В текущей версии Sales Portal я создал в базе данных набор реквизитов пользователя, показанный в таблице 1:

Таблица 1. Реквизиты пользователей Sales Portal
EmailПароль
joe@dwtestonly.comabc123
sing@dwtestonly.comabc123

Откройте два экземпляра браузера и войдите в систему с разными реквизитами.

Щелкнув по ссылке Create account (создать учетную запись) диалогового окна Sign in можно создать дополнительных пользователей. На рисунке 6 показано диалоговое окно создания нового пользователя, которое является частью пакета accounts-ui:

Рисунок 6. Диалоговое окно создания нового пользователя из пакета accounts-ui Smart Package (показано в браузере Chrome)
Browser screen capture (from Chrome) of the dialog for creating new users

Добавление поля владельца в данные продаж по регионам

В текущей версии Sales Portal исходное содержимое базы данных было изменено. Для начальной загрузки данных я использовал показанный в листинге 6 код, работающий на стороне сервера:

Листинг 6. Код для загрузки данных, работающий на стороне сервера
Sales2013.remove({});
Sales2013.insert({region:"US East", total: 2032333});
Sales2013.insert({region:"US Central", total: 150332, owner: joe._id});
Sales2013.insert({region:"US West", total: 1202412});
Sales2013.insert({region:"Asia Pacific", total: 701223});

В листинг 6 добавлено новое поле owner (владелец). В данном случае поле owner содержит идентификатор пользователя userId (joe@dwtestonly.com), который владеет данными региона US Central. Это поле используется для ограничения доступа к данным региональных продаж, изменять которые теперь может только пользователь joe@dwtestonly.com. Для получения значений userId выполните запрос коллекции Meteor.users.

Выборочная публикация данных сервера

После удаления пакета autopublish публикацию данных сервера необходимо выполнять в явном виде, и клиент должен быть явно подписан на эту публикацию.

В приложении Sales Portal сервер публикует коллекцию global_sales с помощью кода, показанного в листинге 7, который расположен в файле sales/server/sales.js:

Листинг 7. Выборочная публикация данных сервера
Meteor.publish("global_sales", function () {
      if (this.userId) {  // виден только пользователям, вошедшим в систему
      // у клиента отсутствует доступ к полю owner
      return Sales2013.find({}, {fields: {"region": 1, "total":1 }}); 
      }
});

Обратите внимание на применение в листинге 7 переменной this.userId , проверяющей, что на стороне клиента выполнил вход уполномоченный пользователь. При исполнении Meteor серверного кода от имени пользователя this.userId всегда содержит уникальный идентификатор текущего вошедшего в систему пользователя. Если в текущем экземпляре браузера не выполнил вход ни один пользователь, переменная this.userId будет равна нулю, и данные публиковаться не будут. Кроме того, в коллекции, отправляемой клиенту в листинге 7, передаются не все поля документа данных региональных продаж (под документом понимается запись с переменным числом полей в экземпляре MongoDB). В частности, от клиента скрывается поле owner. Таким образом, используя запрос, можно опубликовать только подгруппу полей коллекции исключительно для клиента с авторизованными и вошедшими в систему пользователями. Этот метод гарантирует, что конфиденциальные поля данных в определенных документах будут недоступны из клиентских браузеров.

Подписка на данные со стороны клиента

В коде клиента Sales Portal может быть реализована явная подписка на публикуемую сервером коллекцию global_sales, как показано в листинге 8:

Листинг 8. Подписка клиента на коллекцию, передаваемую сервером
Meteor.subscribe("global_sales");
Template.salesdata.dataset = function () {
  return Sales2013.find({});
};

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

После удаления пакета insecure все пользователи лишились возможности изменять показатели продаж. Если предположить, что разные показатели региональных продаж принадлежат разным пользователям, то можно добавить правило доступа, которое будет разрешать изменение данных региона US Central пользователю joe@dwtestonly.com. В листинге 9 показана реализация этого правила доступа в работающем на стороне сервера коде, который расположен в файле model.js:

Листинг 9. Правило доступа на стороне сервера, разрешающее владельцу изменять показатели продаж
Sales2013.allow({
  update: function (userId, sales, fields, modifier) {
    if (userId !== sales.owner)
      return false; // не владелец

    var allowed = ["total"];
    if (_.difference(fields, allowed).length)
      return false; // попытка записи в запрещенное поле

    return true;
  },

});

Функция access-rule для операции update возвращает значение true, если изменение разрешено, и false если изменение запрещено. Код в листинге 9 удостоверяется, что пользователь является владельцем, и что изменению подвергается только поле total.

Горячая перезагрузка кода Meteor для итерационной разработки

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

Откройте Sales Portal и войдите в него под именем joe@dwtestonly.com. Попробуйте изменить данные региона US West и обратите внимание, что попытка окажется неудачной. Затем попытайтесь изменить данные региона US Central. Пользователь joe@dwtestonly.com является владельцем этих данных, поэтому изменение пройдет успешно.

Запустите еще один экземпляр браузера и войдите под именем sing@dwtestonly.com. Попробуйте изменить показатели продаж и обратите внимание, что попытка окажется неудачной. Пользователь sing@dwtestonly.com не является владельцем каких-либо данных, поэтому сервер отклоняет любые запросы на изменение, исходящие от этого пользователя.

Чтобы запретить отображение шаблонов пользователям, не вошедшим в систему, воспользуйтесь функцией currentUser на стороне клиента. Добавьте в HTML-файл код из листинга 10:

Листинг 10. Исключение попыток отображения пустых шаблонов
<div id="container">
    <div id="salestable">
      {{#if currentUser}}
      {{> salesdata}}
      {{/if}}
    </div>
    <div id="chart">

    </div>
</div>

Теперь запустите новый экземпляр Sales Portal. Как видите, данные скрыты. Войдите в систему под именем sing@dwtestonly.com и обратите внимание, что теперь вы видите данные и круговую диаграмму. Попытайтесь изменить какое-нибудь поле; вы снова не сможете этого сделать, поскольку не являетесь владельцем данных.

Запустите еще один экземпляр браузера и войдите под именем joe@dwtestonly.com. Заметьте, что теперь данные видны. Измените значение US East и обратите внимание, что круговая диаграмма обновилась. Также убедитесь, что изменилась круговая диаграмма в сеансе sing@dwtestonly.com . Выйдите из обоих сеансов и обратите внимание, что данные исчезли.


Развертывание приложения в облачной среде и на собственном сервере

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

meteor deploy имя_приложения.meteor.com

Имя приложения должно быть уникальным, поскольку оно становится доступным (для любого пользователя Интернета) по адресу http://имя_приложения.meteor.com. Приложения этой статьи развернуты на Meteor.com; ссылки на них приведены в разделе Ресурсы.

Если вы хотите, чтобы пользователи получали доступ к вашему приложению в домене вашей собственной компании — например, http://имя_приложения.моя_компания.com/ — то вам необходимо создать запись CNAME (псевдоним) на сервере DNS и направить ее на origin.meteor.com.

Чтобы разместить приложение на собственном сервере, вам понадобится сервер с предустановленным node.js и функциями MongoDB. Для создания устанавливаемого пакета своего приложения воспользуйтесь командой:

meteor bundle имя_приложения.tgz

Волокна в node.js

Волокна (fibers) — это сравнительно новое дополнение к node.js. Они обеспечивают невытесняющую многозадачность между отдельными логическими потоками (волокнами). Волокно должно в явном виде закончить исполнение, прежде чем может быть начато исполнение другого волокна. Благодаря тому, что вы точно контролируете точку завершения исполнения, отсутствует необходимость в защите общего для волокон состояния. Важной особенностью волокон является предлагаемая ими нотация: она позволяет писать код, который выглядит последовательным (один процесс на логический поток), не используя глубоко вложенные обратные вызовы, характерные для программирования node.js. (Дополнительная информация о волокнах node.js приведена в разделе Ресурсы).

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

Код Meteor, работающий на стороне сервера, запускается в волокнах node.js, предоставляющих виртуальную среду, в которой можно писать код так, как если бы каждый входной запрос обрабатывался одним потоком (без общих состояний). Такой подход может упростить написание кода JavaScript, исполняемого на стороне сервера.

Поскольку приложение node.js развертывается на стороне сервера, вы можете настроить топологию развертывания в соответствии с собственными требованиями совместимости или масштабирования.


Foto Share: мобильная служба обмена фотографиями

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

Meteor и мобильные приложения

Функции платформы Meteor, ориентированные на создание мобильных приложений, все еще находятся на ранних этапах разработки. Проект Meteor быстро развивается, и полная поддержка разработки мобильных приложений запланирована после версии 1.0.

Foto Share — это демонстрационная служба обмена фотографиями для пользователей мобильных телефонов, позволяющая пользователям просматривать на своем телефоне коллекцию фотографий и передавать фотографии друзьям одним нажатием на кнопку Share(поделиться). На рисунке 7 показана программа Foto Share, работающая на Apple iPhone:

Рисунок 7. Foto Share на Apple iPhone
Screen capture of Foto Share on Apple iPhone

По тем же соображениям безопасности, что и в проекте Sales Portal, из Smart Packages были удалены пакеты autopublish и insecure. Для реализации защиты с использованием паролей Foto Share добавляет пакеты accounts-ui и accounts-password из Smart Packages. Приложение Foto Share, которое можно скачать в разделе Загрузка, поддерживает вход под теми же учетными данными пользователей, что и Sales Portal.

Чтобы опробовать Foto Share, сначала запустите приложение из директории fotoshare загружаемого кода. Если у вас есть два телефона, откройте Foto Share в их браузерах. Если нет — продолжайте пользоваться браузерами компьютера. На одном телефоне войдите в систему как sing@dwtestonly.com, а на втором — как joe@dwtestonly.com (с теми же паролями, что и в приложении Sales Portal). Вы можете просматривать фотографии Синга, перелистывая их пальцем или прикасаясь к графическим накладкам. Фотографии будут поочередно появляться на экране. Вы обнаружите, что все фотографии Синга сделаны на Гавайях, а на фотографиях Джо запечатлены артефакты ацтеков и майя.

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

Интерфейс входа приложения Foto Share

Платформа Meteor (пока) не содержит удобного для мобильных приложений пакета accounts-ui Было бы замечательно, если бы можно было добавить в виде готового модуля настраиваемый мобильный интерфейс для входа в систему, как это делается в Web-приложениях Meteor. Для Foto Share я использовал Web-интерфейс accounts-ui. На рисунке 8 показано диалоговое окно входа в систему на мобильном телефоне:

Рисунок 8. Экран входа в систему приложения Foto Share
Screen capture of the Foto Share login screen on a mobile phone

Обычно пользователи не расположены входить в систему при каждом открытии Web-приложения. Они предпочитают, чтобы телефон автоматически выполнял вход от их имени после того, как они ввели пароль в первый раз. Возможным решением для мобильного приложения Meteor является упаковка кода, работающего на стороне клиента, в упаковщик нативных приложений, такой как популярная платформа Apache Cordova (см. раздел Ресурсы). Это дает доступ к собственным профилям телефона, устраняя необходимость введения имени пользователя и пароля при каждом входе в приложение. Кроме того, вы получите прямой доступ к коллекции фотографий, сохраненной в собственной галерее телефона и в альбоме приложения.

Интеграция с надстройками jQuery Mobile и pagination

Благодаря растущему уровню совместимости мобильных браузеров с HTML5, разработанные в среде jQuery Mobile приложения, как правило, могут работать в последних версиях основных мобильных операционных систем. Приложение Sales Portal уже показало, как Meteor может интегрироваться с jQuery и такими интерфейсами пользователя, как jqPlot. Как и прежде, не следует забывать о порядке загрузки таблиц стилей CSS и файлов JavaScript с библиотеками надстроек jQuery Mobile и pagination (разбиение на страницы).

Поскольку для улучшения элементов HTML и управления ими через объектную модель документа (DOM) браузера вам понадобятся jQuery Mobile и LiveHTML платформы Meteor (реактивное построение), необходимо обеспечить их появление в соответствующем порядке. Инициализацию страницы jQuery Mobile в Foto Share следует задержать до завершения манипуляций Meteor. Для задержки инициализации страницы перед jQuery Mobile загружается файл aadelaybind.js, содержащий следующий код:

$(document).bind("mobileinit", function(){
  $.mobile.autoInitializePage = false;
});

После завершения работы Meteor LiveHTML инициализация страницы запускается вспомогательной функцией rendered шаблона pages. Соответствующий фрагмент этой вспомогательной функции выглядит так:

Template.pages.rendered = function() {
   ...
   $.mobile.initializePage();
   ...
};

Идентификация реактивных данных в Foto Share

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

Для получения представления о том, как сохраняются фотографии, взгляните на представленный в листинге 11 код, работающий на стороне сервера и выполняющий начальную загрузку данных:

Листинг 11. Код Foto Share на стороне сервера, выполняющий начальную загрузку данных и публикацию коллекции
Meteor.startup(function () {
      
      ...     
      
      Fotos.remove({});
      Fotos.insert({name:"pic1", img: readPic('pic1.jpg'),
       owner: sing._id, shared:false});
      Fotos.insert({name:"pic2", img: readPic('pic2.jpg'),
       owner: sing._id, shared:false});
      Fotos.insert({name:"pic3", img: readPic('pic3.jpg'),
       owner: sing._id, shared:false});
      Fotos.insert({name:"pic4", img: readPic('pic4.jpg'),
       owner: joe._id, shared:false});
      Fotos.insert({name:"pic5", img: readPic('pic5.jpg'),
       owner: joe._id, shared:false});
      Fotos.insert({name:"pic6", img: readPic('pic6.jpg'),
       owner: joe._id, shared:false});

    Meteor.publish("photos", function () {
      if (this.userId) {  // виден только пользователям, вошедшим в систему
       return Fotos.find( {$or : [{owner: this.userId}, {shared: true}]},
  {fields: {"name": 1, "img":1 , "owner": 1}}); 
      }

  });
});

Публикуемая сервером коллекция называется Fotos. Каждый документ, представляющий фотографию в коллекции Fotos, содержит поля name (имя), img (изображение) и owner (владелец). Поле img считывается из соответствующего локально сохраненного файла JPG. И снова обратите внимание на то, что данные, получаемые подписавшимся клиентом, содержат только его собственные фотографии и фотографии, которыми поделились их владельцы. Для удаления поля shared из получаемой клиентом коллекции Foto здесь применяется селективная фильтрация полей. Поле owner не подвергается фильтрации, что позволяет клиенту видеть имя владельца присланной фотографии. В листинге 12 показана вспомогательная функция readPic(), использующая синхронный fs для считывания изображения в память и последующего кодирования двоичного потока в формат base64 для сохранения в поле img. Этот формат удобен для отображения фотографий на стороне клиента.

Листинг 12. Вспомогательная функция, считывающая изображения JPG для сохранения в MongoDB
function readPic(infile)  {
    var fs = Npm.require('fs');
    var path = Npm.require('path');
    var base = path.resolve('.');
    var deployLoc = 'public/images/'
    var data = fs.readFileSync(path.join(base, deployLoc, infile)); 
    var tp = data.toString('base64');
    return  'data:image/jpeg;base64,' + tp;
}

При восстановлении изображений из базы данных код шаблона использует функцию поддержки URL-адреса данных в теге <IMG>, реализованную в большинстве современных браузеров (см. раздел Ресурсы). Поддержка URL-адреса данных в атрибуте SRC тега <IMG> позволяет динамически декодировать двоичные данные изображения из строковых данных в кодировке base64. В листинге 13 показан фрагмент шаблона photopage. В этом шаблоне поле img из фотографии в кодировке base64 используется для построения изображения на странице jQuery Mobile.

Листинг 13. Установка атрибута SRC тега IMG с помощью URL-адреса данных
<template name="photopage">
  <div data-role="page" id="p{{index}}">
    ...
    <div data-role="content" class="apic">

      <img src="{{img}}" />

      <ul data-role="pagination">
      {{#if indexIsZero}}
   <li class="ui-pagination-next"><a href="#p{{indexNext}}">Next</a></li>
      {{else}}
   <li class="ui-pagination-prev"><a href="#p{{indexPrev}}">Prev</a></li>
   <li id="x{{index}}" class="ui-pagination-next">
     <a href="#p{{indexNext}}">Next</a></li>
      {{/if}}
      </ul>

    </div> <!-- /content -->
    ...
  </div>  <!-- /page -->
</template>

Удаленные методы Meteor: простой способ создания пользовательских удаленных вызовов процедур (RPC)

Хотя мы удалили пакет insecure из Foto Share, мы не создали правил доступа. Без этих правил ни один клиент не может обновлять данные через Minimongo. Но поле share должно каким-то образом обновляться при нажатии на кнопку Share. Как? Ответ прост — с помощью механизма методов Meteor (Meteor Methods).

Методы Meteor — это механизм удаленного вызова процедур (RPC). Вызовы RPC из клиента к серверу можно создать за два простых шага:

  1. Определите функцию JavaScript на стороне сервера.
  2. Используйте Meteor.call() для удаленного вызова функции сервера, при необходимости передавая ей аргументы.

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

При нажатии на кнопку Share в Foto Share клиент вызывает удаленный метод Meteor на сервере с именем shareThisPhoto и передает ему идентификатор фотографии в качестве аргумента. На стороне сервера сначала выполняется проверка кода, позволяющая определить, является ли вызывающий клиент владельцем фотографии. Поле shared фотографии обновляется лишь в том случае, если метод вызван владельцем. В листинге 14 показан код метода shareThisPhoto на стороне сервера:

Листинг 14. Удаленный метод Meteor на стороне сервера, используемый для обновления поля shared
Meteor.methods({
  shareThisPhoto: function (photoId) {
    console.log('called shareThisPhoto');
    console.log(photoId);
    var curPhoto = Fotos.findOne({_id: photoId});
    if (this.userId !== curPhoto.owner)  {
      return "Cannot share this photo.";
    } else {
      Fotos.update({_id: photoId}, {$set :{shared: true}});
      return "Photo shared!";
    }

  },
});

В листинге 15 показан код на стороне клиента, который вызывает удаленный метод при нажатии на кнопку Share:

Листинг 15. Код на стороне клиента, вызывающий удаленный метод при нажатии на кнопку Share
Template.photopage.events({
  'click .fs-logoff': function () {
    Meteor.logout(function() {
      location.reload();
    });
  },
  
  'click .fs-share': function() {
      Meteor.call('shareThisPhoto', this._id, function (error, retval) {
 console.log(retval);
      });
  }
});

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


Архитектура современных Web-приложений

Теперь, когда вы познакомились со всеми примерами приложений этой статьи, стало понятно, что Meteor предназначен для Web-приложений с особой архитектурой, показанной на рисунке 9:

Рисунок 9. Архитектура расширенных клиентских интерактивных Web-приложений
Diagram of rich-client interactive web application architecture

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

Приложения такого типа обычно загружают код JavaScript в браузер клиента. Этот код управляет взаимодействием с пользователем, динамически манипулируя объектной моделью документа (DOM) браузера, изменяя стиль CSS, генерируя новые элементы/коды/стили HTML и используя другие предлагаемые браузером API. Все взаимодействие с пользователем контролируется кодом, работающим на стороне клиента; не загружается никаких дополнительных кодов HTML или стилей, кроме начальной загрузки приложения. Этот же код осуществляет взаимный обмен данными между клиентом и сервером (или серверами) для реализации функций приложения. По сути, браузер загружает и исполняет расширенное клиентское приложение (называемое иногда толстым клиентом), написанное на JavaScript.

На стороне сервера организуются конечные точки, которые передают и синхронизируют данные клиента в защищенном режиме. Старые серверы могут использовать RPC, Web-сервисы на основе XML, службы RESTful или другие вызовы RPC в стиле JSON. Современные серверы, скорее всего, будут использовать специальные протоколы, предназначенные для эффективной передачи данных, устойчивые к обрывам связи, поддерживающие разные виды современного транспорта и топологическое масштабирование.

На рисунке 10 показаны основные компоненты платформы Meteor версии 0.6.3.1:

Рисунок 10. Внутренние компоненты платформы Meteor
Diagram showing the major components internal to Meteor as of release 0.6.3.1. On the server side, there are Meteor Collections, Meteor Methods, Smart Packages, Publish-Subscribe, Meteor Core, and DDP; driven by server code that you write. There is also a full MongoDB instance, as well as node.js runtime support. On the client side, there are Publish-Subscribe, session management, Smart Packages, Meteor Collections, Handlebars templates, Spark LiveHTML engine, Meteor Dependency Management, Meteor Methods, Minimongo stub driver, Meteor Connections Management, and DDP; controlled by your client-side code, and running against the browser's DOM on top of transport APIs such as Websocket.

Как вы уже знаете, протокол DDP поддерживает двунаправленный обмен данными между экземплярами клиента и сервера, а Minimongo представляет собой «интеллектуальную» заглушку с локальным кэшем данных на стороне клиента, которая предоставляет знакомый API запросов MongoDB для кода, работающего на стороне клиента. Spark — это живой механизм обработки HTML, работающий совместно с шаблонами (Handlebars) и системой управления зависимостями и предназначенный для реализации реактивной отрисовки в платформе Meteor. (В разделе Ресурсы приведена ссылка на официальную документацию Meteor, где вы найдете подробное описание всех компонентов Meteor).

Архитектура приложений, работающих с данными потенциально большого объема

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

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

Рисунок 11. Архитектура информационной панели Meteor для данных большого объема
Diagram showing the architecture of a Meteor dashboard application for big data

На рисунке 11 код Meteor на стороне клиента предлагает представление репозитория большого объема данных в виде реактивной информационной панели. Действия пользователя генерируют специальные задания MapReduce, которые ставятся в очередь (возможно, с помощью методов Meteor) на стороне сервера для исполнения в кластерах Hadoop. По завершении исполнения заданий результаты объединяются в экземпляре MongoDB через Meteor. Компонент публикации-подписки сервера Meteor обнаруживает изменение данных и передает обновленные данные подписавшимся клиентам.


Заключение

Интервью о платформе Meteor

Узнайте больше о проекте Meteor и о будущих планах из интервью, которое Син Ли взял у соучредителя платформы Meteor Мэтта ДеБергалиса (Matt DeBergalis).

Команда Meteor постоянно работает над расширением возможностей тех, кто хочет создавать одностраничные расширенные клиентские Web-приложения с высоким уровнем интерактивности. Большинство пользователей отдают таким приложениям предпочтение перед традиционными многостраничными приложениями с индивидуальной загрузкой страниц. Такую архитектуру используют многие крупнейшие почтовые и офисные сервисы на основе Web-интерфейса, включая Google Gmail, Microsoft Hotmail и Yahoo Mail. Как правило, Web-приложения такого рода создаются только самыми крупными компаниями или разрабатываются в рамках хорошо финансируемых новых проектов, поскольку их создание связано со значительными трудностями и требует задействования большого объема ресурсов. Основная миссия платформы Meteor заключается в создании фундамента, позволяющего с легкостью строить приложения такого класса.

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


Загрузка

ОписаниеИмяРазмер
Код Sales Portal и Foto Shareinstmeteordl.zip367 КБ

Ресурсы

Научиться

  • Оригинал статьи: Instant web applications with Meteor.
  • Meteor: посетите сайт платформы Meteor.
  • Документация на платформу Meteor: познакомьтесь с официальной документацией платформы Meteor и узнайте о последних функциях и обновлениях.
  • Develop easy real-time websites with Meteor (Разработка простых Web-сайтов реального времени на платформе Meteor) (Дэвид Беруби, developerWorks, январь 2013 г.): статья содержит пошаговое руководство по установке платформы Meteor и рассказывает, как приступить к разработке приложений на ее основе.
  • sales_nologin, sales и Foto Share: в настоящее время Meteor поддерживает Mac OS X и Linux на платформах i686/x64. Официальная поддержка Windows должна появиться в версии 1.0. Тем не менее пользователи Windows могут запускать развернутые версии примеров приложений, представленные в этой статье. (Учтите, что к ним могут одновременно обращаться несколько пользователей).
  • Meteor в Twitter: посетите канал платформы Meteor и узнайте об учебных мероприятиях и прочих возможностях.
  • MongoDB: база данных MongoDB NoSQL хранит документы в стиле JSON и использует краткий синтаксис запросов, который широко применяется клиентскими и серверными приложениями Meteor.
  • Discover MongoDB (Знакомство с MongoDB) (Эндрю Гловер (Andrew Glover), developerWorks, декабрь 2012 г.): узнайте больше о MongoDB из этой статьи серии «путь обучения».
  • jQuery: различные аспекты инфраструктуры jQuery, включая большой список надстроек для разных версий jQuery.
  • Надстройка jqPlot для jQuery: узнайте о возможностях jqPlot, которые далеко не ограничиваются простыми круговыми и столбиковыми диаграммами.
  • Надстройка Jeditable для jQuery: Jeditable отлично справляется с поддержкой быстрого и простого редактирования в интерфейсе пользователя на основе jQuery.
  • Интерфейс пользователя jQuery UI: эта надстройка предоставляет удобный интерфейс для навигации по страницам jQuery Mobile.
  • Волокна для Node:: модуль Fibers добавляет невытесняющую многозадачность в node.js и создает основу для развертывания платформы Meteor на стороне сервера.
  • Протокол защищенной передачи пароля: познакомьтесь с протоколом SRP, который позволяет пакету accounts платформы Meteor аутентифицировать пользователя без передачи пароля в незашифрованном виде.
  • IETF RFC-2397: схема URL-адресов данных в некотором объеме поддерживается большинством современных настольных и мобильных браузеров.

Получить продукты и технологии

  • Meteor: скачайте платформу Meteor с сайта GitHub.
  • jQuery Mobile: начните разработку Web-приложений, способных работать на нескольких современных мобильных устройствах.
  • Apache Cordova: используйте Cordova для создания нативных упаковок мобильных приложений, написанных на JavaScript, HTML и CSS.

Обсудить

  • Сообщество My developerWorks: связывайтесь с другими пользователями портала developerWorks и знакомьтесь с блогами, форумами, группами и вики-ресурсами разработчиков.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source
ArticleID=960447
ArticleTitle=Мгновенное создание Web-приложений с помощью Meteor
publish-date=06142013