使用 Meteor 快速开发 Web 应用程序

Send_linux

　　
Meteor 是一个新的 Web 应用程序开发平台，正在国际上得到广泛采用。Meteor 不仅仅是一个 JavaScript 编码框架，它还提供了一种创新方式来构建可伸缩、交互式的富 Web 应用程序。通过简化编码模型和减少开发人员必须编写的代码量，Meteor 具有加速开发周期的潜力。使用 Meteor，经验丰富的 Web 应用程序架构师和开发人员只需花费几天或几星期的时间，就可以完成从概念到全面部署的整个过程，而不像平常一样需要几个月或更长的时间。
关于安装 Meteor 平台并开始使用它进行开发的分步指南，developerWorks 文章 “
使用 Meteor 轻松开发实时网站
” 是一个不错的参考资料。在这篇最新的文章中，我将通过两个详细的应用程序示例更深入地剖析 Meteor 开发，并概述 Meteor 的架构。借助这些知识，您能够自行判断 Meteor 上的快速 Web 应用程序创建是否适合您。
从过去的角度看未来
Meteor 提出的方法从某种意义上讲是革命性的，但它也有一些方面是通过进化而来的。它继续采用了与计算机史中的重大成功案例相同的 IT 路径：电子表格软件。图 1 给出了一个典型的电子表格示例 —一个包含饼图的 Sales by Region 电子表格：
图 1. Sales by Regions 电子表格


试用常见的电子表格
您可以试用图 1 中的电子表格，它是本文的示例代码
下载
的一部分。更改任何销售数据，您会看到这个饼图将自动更新。
如果修改 Sales by Region 电子表格中的任何地区销量数据，总销量数据（未显示）也会发生更改，饼图会立即被重绘，以反映各个切片的新的相对比例。
现在，这种电子表格既不新颖也不怎么有趣。但回想 1983 年 Lotus 1-2-3 向早期的 PC 用户揭示这些特性时的情景，您就能体会到它的影响力。在此之前，任何人都无法以如此少的编程完成如此多的工作。尽管电子表格软件最初不是很直观，但大多数用户都在几天之后就可以熟练地操作它。电子表格软件仍然是推动全球的 PC 销售的杀手级应用程序之一。
快进 30 年
在第一款电子表格软件问世 30 年后，您可以看到电子表格在 Meteor 上得到了发展。图 2 显示了使用 Meteor 在 2013 年创建的 Sales Portal Web 应用程序：
图 2. Sales Portal Web 应用程序


Sales Portal 显示了最新的地区销量数据和一个相应的饼图。作为虚构的 CEO，您可以监视销量数据，每个地区销售团队都可以定期更新其销量数据。
如果已经安装 Meteor，那么您可以
下载
Sales Portal 应用程序并动手体验它。更改该下载的 sales_nologin 子目录并键入 meteor run 。在浏览器实例中输入 http://localhost:3000/，地区销量数据和饼图应该就会出现。双击任何销量数据即可更改它。在您确认更改后，饼图会立即更新。如果在多个浏览器实例中打开 Sales Portal，所有这些实例都会更新，以显示最新的销量数据，而且您可以从任一个浏览器实例中修改这些数据。（如果无法安装 Meteor，那么您可以尝试应用程序的托管版本；请参阅
参考资料
。）
图 3 显示了 US Central 团队正在选择和更新其销量数据：
图 3. 更新 US Central 销量


图 4 显示了更新的 US Central 销量数据和最新的饼图。任何在更新的同时访问 Sales Portal 的用户都会立即看到所做的更改。
图 4. 更新的饼图比例反映了新的 US Central 销量数据


无需手动更新，因此您还可以想象一个后端，其中的销量数据由更新前自动生成和合并的子集组成。Sales Portal 应用程序的显示效果与电子表格的表示相同，但 Sales Portal 现在还具有：

   
• 通过普遍存在的浏览器利用全球互联网进行访问的能力
     
• 多个用户同时访问的能力
     
• 可选的自动后端数据聚合和合并
  

如果您打算使用标准的企业技术（比如一个基于 Java™的工具链）设计、编码和部署这样一个系统，则需要大量的工作。Meteor 显著减少了这一工作，您可在后面的练习代码中看到。
反应性思维
Meteor 反应性默认值
Meteor 拥有的一些数据源默认值是反应性默认值。这些数据源目前包括：

   
• Meteor 集合，通常是 MongoDB 查询的结果
     
• 显式绑定到 Meteor 的 Session 单例的变量
     
• Meteor.user 、Meteor.userId 和 Meteor.logginIn ，它们跟踪当前的用户和登录状态
     
• Meteor.status ，跟踪服务器连接状态
  

电子表格的一个重要特性就是它的反应性。在 Sales by Region 示例中，当一个地区销量数据更新时，依赖于该数据的其他所有数据都会动态地重新计算。如果依赖的组件要呈现图形输出，比如饼图，则会立即使用更新的切片大小重新绘制该图。您无需编写管理依赖关系的代码（这可能很复杂）或更新饼图等组件的代码。您只需声明这些反应性元素（销量数据）和它们的依赖关系（在本例中为总销量和饼图）。电子表格负责处理所有事情。
现在想象使用一个 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_nologin 目录中找到 sales.js。）
清单 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)  // do not render pie if no data
       return;
     var data = [];
     cur.forEach( function(sale) {
       data.push( [sale.region, sale.total]);
     });
  var plot1 = $.jqplot ('chart', [data],
    {
      seriesDefaults: {
// Make this a pie chart.
renderer: $.jqplot.PieRenderer,
rendererOptions: {
   // Put data labels on the pie slices.
   // By default, labels show the percentage of the slice.
   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 应用程序的一个更加安全的版本（您在本文后面将会看到）使用了这种目录结构。
识别反应性数据
另一个反应性数据源
清单 1
中的 selected_datapoint 会话变量也是反应性的。（请参见
Meteor 反应性默认值
边栏，了解默认情况下属于反应性元素的更多信息。）在本例中，它用于更改销量数据的行突出显示形式。行突出显示通过更改动态的 CSS 样式来执行。selected_datapoint 会话变量会在用户单击一行时更新。因为 Meteor 会在这个变量每次更改时重新呈现依赖关系，所以突出显示形式会相应地进行更新。
Sales Portal 应用程序的一个反应性数据源是对 Sales2013 Meteor 集合的一次查询。可在
清单 1
中的这个客户端代码段中看到它的用法：
Template.salesdata.dataset = function () {
return Sales2013.find({});
};
因为该查询是反应性的，所以它的所有依赖关系都会在查询结果集更改时重新计算或重新呈现。这是在所有浏览器实例中更新销量数据和饼图的方式。清单 2 给出了相关的 HTML 模板代码，可在代码
下载
的 sales_nologin 目录中的 sales.html 文件中找到：
清单 2. 客户端 HTML 和模板：sales.html
   
        
            
            
                               
  
Sales by Region
  
  
   
    Global Sales 2013
   
   
     
      {{> salesdata}}
     
     
     
   
  

  
   
    {{#each dataset}}
      {{> datapoint}}
    {{/each}}
   
  

  
   
    {{region}}
    {{total}}
   
  

            
        
   

清单 2
中的 HTML 文件是一个 Handlebars 模板，Meteor 目前支持该模板。在 {{ }} 中可以看到 Handlebars 表达式。通过它的 Spark 引擎（将在本文的
现代 Web 应用程序的一种架构
一节中描述），Meteor 可处理其他 JavaScript 模板组件。
销售数据行通过 salesdata 模板代码呈现，这些代码已在
清单 2
中以粗体形式显示。此模板依赖于 dataset 帮助函数（如
清单 1
中所示），所以在每次查询发生更改时都会重新呈现。
在服务器上提供抽样数据
Sales Portal 的最初的地区销量数据由清单 3 中所示的服务器端代码（来自
清单 1
）提供：
清单 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 有一个称为 延迟补偿（latency compensation）的特性。从根本上讲，延迟补偿是大数据管理领域中的 最终一致性概念的一种视觉表现。当通过 Minimongo stub 更新客户端上的数据时，任何更改都会立即在客户端上反映出来，包括反应性重新呈现。这些更改还会被传播到服务器。但是，传播的更改可能会失败，失败的原因有很多，包括拒绝访问。发布 - 订阅机制负责确保客户端最终（通常很快）反映了服务器的实际状态。延迟补偿可实现一种无需等待的、响应非常迅速的 UI，这是现代 Web 2.0 应用程序的一个鲜明特征。而代价可能是出现短暂的视觉数据不一致性。
在 Meteor 服务器上，运行着一个完整的 MongoDB 实例。这个完整实例可接受来自 Meteor 以外的客户端的查询和更新。
在 Meteor 客户端上，可以使用相同的 JavaScript MongoDB API。这统一了客户端和服务器编码，实现了客户端和服务器上的代码重用。客户端 API 由一个称为 Minimongo 的智能 stub 提供。Minimongo 使用
延迟补偿
来反映数据库更改。因为 Minimongo 通常处理小型的客户端数据集，所以它不支持索引。
使用一种发布 - 订阅模型来控制 MongoDB 服务器与 Minimongo 客户端之间同步的数据。默认情况下，所有服务器端 Meteor 集合都会被发布。Meteor 使用 DDP（Distributed Data Protocol，分布式数据协议）在客户端与服务器之间移动数据。（可为其他数据库创建 stub 并提供程序形式的 DDP 驱动程序；Meteor 社区的持续工作包括一个即将推出的 MySQL 驱动程序。）
集成 jQuery 插件
Sales Portal 使用 jqPlot jQuery 插件呈现饼图。饼图的呈现和重新呈现是反应性的，由 Sales2013 集合中的数据更改推动。您之前已经看到，每次 Sales2013 集合更改时，都会重新呈现 salesdata 模板。清单 4 显示了在 salesdata 模板的 rendered 事件触发时，重新绘制饼图的客户端函数（来自
清单 1
）：
清单 4. 使用 jqPlot 插件呈现饼图的 jQuery 代码
   
        
            
            
                               
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)  // do not render pie if no data
       return;
     var data = [];
     cur.forEach( function(sale) {
       data.push( [sale.region, sale.total]);
     });
  var plot1 = $.jqplot ('chart', [data],
    {
      seriesDefaults: {
// Make this a pie chart.
renderer: $.jqplot.PieRenderer,
rendererOptions: {
   // Put data labels on the pie slices.
   // By default, labels show the percentage of the slice.
   showDataLabels: true
}
      },
      legend: { show:true, location: 'e' }
    }
  );

}

            
        
   

Sales Portal 使用 Jeditable jQuery 插件实现销量数据的就地编辑 (in-place editing)。处理编辑的代码位于
清单 4
中的 Template.salesdata.rendered = function() 和 var cur = Sales2013.find(); 行之间。
请参见
参考资料
，获取 jQuery、jqPlot 和 Jeditable 插件的更多信息。
理解 Meteor 的电子表格和脚本加载顺序
要成功加载 jQuery 插件，按照正确的顺序加载与它们有关联的 CSS 文件和 JavaScript 代码至关重要。
请注意，在
清单 2
中，sales.html 文件不包含任何  标记或  样式表。相反，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 子目录中，确保它们首先被加载。
                       
                               
                    

共4页:

上一页
1

2

3

4

下一页
                               
                       
                       
                       
                                时间:2013-07-10 21:41来源:www.ibm.com/dw 作者:Sing Li, 顾问, Makaw责任编辑:zhangkai

本文来自ChinaUnix新闻频道，如果查看原文请点：http://news.chinaunix.net/opensource/2013/0710/2842921.shtml