为了更好地描述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#增加流程from 已经是anguar封装的指令了,1.点击add 这个按钮之后 在ng-click 里面我们写了parties.push(newParty) 在input表单里面我们获取了newParty,这样便可以直接增加.2.我们也可以写在...
Meteor + Mongo 的应用级事务该软件包正在维护中,因此它仍然可以与最新版本的 Meteor 一起使用,但没有进一步的积极开发计划。 考虑使用 Mongo 的本机事务,而不是此包提供的应用程序级事务。 此包用于模拟 Mongo ...
一本有关Meteor JavaScript框架的免费在线书籍,可帮助初级Web开发人员在数小时内用Meteor构建其第一个实时Web应用程序。
社交上 一个 Meteor + AngularJS 应用程序。 以下教程来自
流星化轻松将砖石风格的动态布局添加到Meteor。 取决于新的Blaze UI。 当前使用同位素作为布局引擎。 用法: $ meteor add voodoohop:masonrify 容器div是使用#masonryContainer块帮助器创建的。 对于您希望使用的每...
Rocket.Chat是使用Meteor全栈框架以JavaScript开发的Web聊天服务器。Rocket.Chat 是特性丰富的 Slack 开源替代品之一。 主要功能:群组聊天,直接通信,私聊群,桌面通知,媒体嵌入,链接预览,文件上传,语音/视频...
在meteor.rendered(fn)(或您认为合适的任何地方)中,将幻灯片放映的开始如下所示: Template . exampleTemplate . rendered = function ( ) { var slideShowOptions = { // Optional: How many ms should ...
使用meteor + famo.us 的应用程序的简单结构。 使用 famo.us javascript 库进行滚动、弹性过渡、下拉视图和菜单。 怎么跑 $ sudo npm install -g meteor $ sudo npm install -g mrt $ sudo mrt ... => App running...
验证方式流星变量验证的基础安装meteor add zhaoyao91:validations 介绍该软件包定义了验证类,一个简单的架构,一些帮助根据架构构建验证树的函数以及一组内置验证。验证类别这是编写新的验证类的模板: /** * the ...
地理编码器一个Meteor程序包,它通过简单的API提供程序包的地理编码功能。安装$ meteor add aldeed:geocoder用法对地址进行地理编码很简单。 获取一个新的GeoCoder实例,然后在其上调用geocode方法,并传入地址字符...
使用 Meteor 1.0+: $ meteor add shammar13:busboy 如何使用 此代码段改编自在 Iron Router 问题页面上。 此代码段将属于您的 Iron Router routes.js文件。 if ( Meteor . isServer ) { var fs = Npm . ...
社会角度Meteor和AngularJS应用程序
全栈Web开发是当今最受欢迎的开发人员职业。 有很多方法可以创建完整的Web应用程序。 React ,是一个用于构建用户界面的Javascript库。 Meteor是使用Node.js编写的免费且开源的同构JavaScript Web框架。 安装 git...
Transloadit Meteor API 绑定 这个智能包从 node.js npm 包中公开了官方的 Transloadit Meteor API: : 这个 Meteor 包是在 MIT 许可下许可的。 这使用了 Transloadit node.js 包的 1.2.1 版和新的meteor 0.6.5.1...
Meteor 的 Todoist 包 Todoist 包允许您轻松地在 Meteor 服务器上公开 todoist API 方法并在 MongoDB 中缓存用户数据。 安装 meteor add vitkon:todoist 用法 server.js 示例: var client = new Todoist ( { ...
用于Meteor 智能包,在Javascript 中为现代Web 浏览器提供加密摘要和HMAC 算法。 将此包添加到您的应用程序将Digest对象添加到全局范围中。 仅限客户端。 安装 meteor add peerlibrary:digest
meteor add mdg:camera meteor add cordova:org.apache.cordova.camera@0.3.6 meteor add cordova:com.synconset.imagepicker@1.0.6 meteor add wuyuedefeng:sen-camera-album ##使用方法 SenCameraAlbumActionSheet...
将Web组件和的魔力添加到! ##关于###此包装不包含聚合物元素!!! 请遵循以下指示以包括所有聚合物元素。 该软件包增加了Polymer的基本功能。 此项目中不包含任何元素。 这样做是为了使最终用户可以选择使用自己...
JFramework:Meteor + React的快速原型制作 使用MeteorPad上的沙箱来玩我们的97行示例应用程序: ://meteorpad.com/fork/mC4wQPmJNpWBqvXZ2 切穿CRUD 您想如何构建一个完全没有样板代码的Web应用程序? JFramework...
流星测试:摩卡 以前发布为 dispatch:mocha。 最初由创建,但现在由社区...meteor add lmieulet:meteor-coverage 如果您只想将软件包包含在单次运行中,请将参数--extra-packages lmieulet:meteor-coverage到您的mete