借助 Meteor(一个新的 Web 应用程序创建平台),JvaScript 开发人员可轻松、快速地构建具有高度交互和响应的富客户端 Web 应用程序。Meteor 提出了一种新方式来思考 Web 应用程序设计和开发,旨在简化和大大缩短开发周期。Sing Li 抛开大肆的宣传,通过两个功能性的非平凡应用程序示例(一个基于 Web 的应用程序和一个移动应用程序)来探索 Meteor 的发展前景和架构的覆盖范围。您将获得构建 Meteor 应用程序和利用流行的行业标准 JavaScript 库的实用经验。
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 应用程序
Meteor Sales by Region 应用程序的屏幕截图,其中显示了各地区的销量和总销量饼图

Sales Portal 显示了最新的地区销量数据和一个相应的饼图。作为虚构的 CEO,您可以监视销量数据,每个地区销售团队都可以定期更新其销量数据。

如果已经安装 Meteor,那么您可以 下载 Sales Portal 应用程序并动手体验它。更改该下载的 sales_nologin 子目录并键入 meteor run 。在浏览器实例中输入 http://localhost:3000/,地区销量数据和饼图应该就会出现。双击任何销量数据即可更改它。在您确认更改后,饼图会立即更新。如果在多个浏览器实例中打开 Sales Portal,所有这些实例都会更新,以显示最新的销量数据,而且您可以从任一个浏览器实例中修改这些数据。(如果无法安装 Meteor,那么您可以尝试应用程序的托管版本;请参阅 参考资料。)

图 3 显示了 US Central 团队正在选择和更新其销量数据:

图 3. 更新 US Central 销量
一个用户在 Meteor Sales Portal Web 应用程序中选择和更新 US Central 地区的销量数据的屏幕截图

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

图 4. 更新的饼图比例反映了新的 US Central 销量数据
反映了新的 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 应用程序的一个更加安全的版本(您在本文后面将会看到)使用了这种目录结构。

关键字标签:应用程序MeteorWeb应用程序

上一篇:Cordova V3.0.0中config.xml配置文件的iOS Configuration
下一篇:最后一页