Meteor+AngularJS:超快速Web开发

    为了更好地描述Meteor和AngularJS为何值得一谈,我先从我的角度来回顾一下这三年来WEB开发的变化:
    三年前,我已经开始尝试先后端分离,后端使用php的轻量业务逻辑框架。但当时前端尚未成熟且普遍流行的业务逻辑框架。因此在作产品开发时我仍然选用drupal等总体开发框架。开发时经常须要在javascript和php间切换,同时还要本身搞定数据库。此时的开发模型图是这样(红色箭头和红色块都表示工做重灾区):
    随着对用户体验的追求,我开始把业务逻辑往前端推移,因而立刻遇到了前端数据与页面展现绑定的问题,业务逻辑简单时还能用jquery搞定。愈来愈复杂后,开始尝试使用backbone等前框架来规范数据层和作数据与视图的绑定,用requireJS作模块化和延迟加载。同时异步处理等编程模型也都开始进入实战。后端采用RESTful接口规范。此时的开发模型图是这样:
    一年前左右,接触到knockout和AngularJS,感觉到数据和视图自动绑定的美妙开发体验后,当即抛弃Backbone。此时的开发已经完全先后分离、前端业务数据层和视图层分离。接下来又开始陆续使用coffeescript 、jade、less进一步减小代码量。用grunt作自动编译、测试、和检测文件改动自动刷新浏览器。一切都已经比较完美了,除了后端仍然要对数据持久化作很多工做,除了前端要想实时反映数据改变仍然要轮询或者用webSocket链接服务器。这时的开发模型图已是这样了:
 
    只差一点就完美了,Meteor就是这一点。Meteor是一个基于nodejs、webSocket、mongoDB的总体开发框架,在它的实现中,先后端的数据模型已经几乎没有差异。
    意思就是,前端对数据模型进行任何改动,只要调用“save”方法,全部数据就自动存到服务器端的mongoDB中了——终于能够忘了主动发送请求给服务器,终于能够忘了服务器要和前端实现几乎同样的数据模型层
    而任何前端“订阅的”后端数据出现改动,前端数据模型也会立刻自动获得了更新——终于能够忘了主动轮询,终于能够忘了拿到后端数据再解析成前端模型。除了先后端模型的双向自动绑定,Meteor同时还实现了数据到前端模板的自动更新。
    不过,Meteor的模板在处理视图到模型的改动时扩展性不如AngularJS。所以,将AngularJS和meteor结合是最好的选择。到这里,快速Web开发模型终于完成:
 
    除了模型的自动绑定与更新,meteor还提供了大量进一步加速开发的机制。如:
  • 先后端载入文件文件的自动化管理。只要将相应的文件扔到先后端相应的目录中,就会自动载入到页面,或者在后端自动运行。
  • “智能包”管理。Meteor提供了模块的机制,让第三方开发者能够写“智能包”来增强先后端的功能。如,加载了“coffeescript”智能包后。不管先后端用coffeescript写的代码都会自动编译成javascript后再载入。
  • 内置大量“智能包”,有进一步支持开发的包,如“less”、“underscore”、“coffeescript”,还有通用业务逻辑包。如“帐户管理”,并且已经集成主流oauth帐号登录。
  • 自动检测文件改动,自动刷新浏览器。
  • 自动化部署。
    如下立刻来看一个实际开发的例子,制做一个为公司录入应聘人员信息的系统。
    需求:
  • 能指派面试官,自动邮件通知。
  • 支持google邮箱登录。
  • 体验流畅、单页应用。
    开始写业务逻辑以前,咱们先开始为准备一些开发工具和环境。首先,我要求能用coffescript代替javascript,less代替css。安装完meteor以后,进入项目木文件夹。在命令行中输入以下代码
    meteor create myapp
    meteor add less
    meteor add coffeescript
 
    而后,我想在前端使用jquery,和meteor提供的帐户系统来支持google oauth受权。继续输入:
    meteor add  jquery
    meteor add  account-ui
    meteor add  account-google
 
    最后,将angularJS整合进来:在项目文件夹中建立以下目录层级:
client中的内容会所有自动加载到页面上,具体加载顺序请参考官方文档。server中的文件会在应用启动时自动运行。public中文件将做为静态资源供外部访问。
    由于AngularJS对数据模型改动的检测是经过“dirty check”的方式(见Angular官方文档)。因此要使用插件来让Meteor数据改动能通知到AngularJS,以此触发视图变化。这个插件就是上图中的angular.meteor。
    接下来讲用AngularJS的ui-route模块来管理页面路由,将应用变成单页:
    加入“使用google帐号”登陆的功能:
    当新增一个应聘者时,给面试官发邮件:
    这里应该注意到的是,Meteor对于数据的操做彻底是标准的MongoDB语法。剩下的业务逻辑用AngularJS的视图与模型很快就能够实现了,这里再也不赘述。
    最后看看系统的效果截图,添加新的应聘人信息:
    面试结果记录:
    
    总结整个开发过程,能够都看到的是,几乎没有后端开发,只要前端完成,应用基本上就完成了。而且一步就可使用coffeescript、less等,再也不须要本身搭建复杂的开发环境。这样的开发体验,在目前来讲,几乎已经到极致了。
    固然,要进入真正产品级开发,Meteor还有一些问题要克服,如“支持多种数据库”,“如何部署到集群”,“实时数据增长了服务器负载”等。好在Meteor目前收到的关注已经特别高,而且有了大量的第三方开发者,进入产品级开发的步伐愈来愈快。咱们彻底能够期待,这块拼图成熟以后,将给整个web开发新注入一股强大动力。
相关文章
相关标签/搜索