为了更好地描述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开发新注入一股强大动力。

Meteor+AngularJS:超快速Web开发的更多相关文章

  1. 为 Python Server Pages 和 Oracle 构建快速 Web 开发环境。

    为 Python Server Pages 和 Oracle 构建快速 Web 开发环境. - 在水一方 - 博客频道 - CSDN.NET 为 Python Server Pages 和 Oracl ...

  2. 【转】利用 Bootstrap 进行快速 Web 开发

    原文转自:http://blog.jobbole.com/53961/ 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS ...

  3. 如何利用 Bootstrap 进行快速 Web 开发

    原文出处: IBM developerworks 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS 项目为基础,由 Twi ...

  4. 快速web开发中的前后端框架选型最佳实践

    这个最佳实践是我目前人在做的一个站点,主要功能: oauth登录 发布文章(我称为"片段"),片段可以自定义一些和内容有关的指标,如“文中人物:12”.支持自定义排版.插图.建立相 ...

  5. 【转载】利用jetty+Eclipse实现超轻量级web开发

    之前一直使用maven的jetty插件.今天换种方式. 使用下面介绍的方式你只有一个java project就行. 开发环境更简单,debug也更方便,不需要remote debug的方式,jetty ...

  6. 25个超有用的 AngularJS Web 开发工具

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,改善了JavaScript. 下面我要说的就是25个超有用的AngularJS工具, ...

  7. 简明易懂,将细节隐藏,面向新手树立web开发概念——学完Java基础语法,超快速上手springboot+mybatiJavaWeb开发

    简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...

  8. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  9. 干货100+ 最超全的web开发工具和资源大集合

    干货100+ 最超全的web开发工具和资源大集合   作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...

随机推荐

  1. 开发板tftp下载文件

    搭建过程: 1.安装相关软件包:tftpd(服务端),tftp(客户端),xinetd sudo apt-get install tftpd tftp xinetd 2.建立配置文件(蓝色的目录是可以 ...

  2. HTTP 的重定向301,302,303,307(转)

    HTTP 的重定向301,302,303,307(转) (2012-12-11 11:55:04) 转载▼ 标签: 杂谈 分类: 网络 301 永久重定向,告诉客户端以后应从新地址访问.302 作为H ...

  3. Element-ui,Mint-ui

    style-loader css-loader style!css 饿了么团队开源一个基于vue 组件库 elementUI PC MintUI 移动端 官网: http://element.elem ...

  4. WPF中使用DynamicResource实现换肤

    这篇将介绍使用DynamicResource实现动态的界面切换功能.熟悉WPF的园友应该已经猜到了实现方式,简而言之就是动态替换DataTemplate,ControlTemplate,Style等等 ...

  5. Hololens 手势事件执行顺序

    InteractionManager_SourcePressed (Filename: C:\buildslave\unity\build\artifacts/generated/Metro/runt ...

  6. Python 进程间通信

    from multiprocessing import Process,Queue import os,time,random def write(q): print('Process to writ ...

  7. js基础2

    什么是DOM? DOM:文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML文档的API. 什么是文档对象模型? DOM将html文档看成了一个对象,htm ...

  8. mas_makeConstraints && mas_remakeConstraints && mas_updateConstraints 用法与注意事项

    mas_makeConstraints && mas_remakeConstraints && mas_updateConstraints 用法与注意事项 字数400 ...

  9. javascript keycode大全

    keycode    8 = BackSpace BackSpacekeycode    9 = Tab Tabkeycode   12 = Clearkeycode   13 = Enterkeyc ...

  10. 【Silverlight】打开Silverlight程序报错,"未找到导入的项目......请确认<Import>声明中的路径正确,且磁盘上存在该文件"

    在打开Silverlight程序时,报错(如图所示),程序使用的是Visual Studio 2013和最新的Silverlight版本(Silverlight5). 然后我在网上找了下说:Silve ...