Meteor+AngularJS：超快速Web开发
<div> 为了更好地描述Meteor和AngularJS为什么值得一谈，我先从个人角度来回顾一下这三年来WEB开发的变化：</div><div> 三年前，我已经开始尝试前后端分离，后端使用php的轻量业务逻辑框架。但当时前端还没有成熟且广泛流行的业务逻辑框架。所以在做产品开发时我仍然选用drupal等整体开发框架。开发时常常需要在javascript和php间切换，同时还要自己搞定数据库。此时的开发模型图是这样（红色箭头和红色块都表示工作重灾区）：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/87DB012B247F447E8B200A6082792A37" alt="" data-media-type="image" data-inited="true"></div>
<div> 随着对用户体验的追求，我开始把业务逻辑往前端推移，于是马上遇到了前端数据与页面展示绑定的问题，业务逻辑简单时还能用jquery搞定。越来越复杂后，开始尝试使用backbone等前框架来规范数据层和做数据与视图的绑定，用requireJS做模块化和延迟加载。同时异步处理等编程模型也都开始进入实战。后端采用RESTful接口规范。此时的开发模型图是这样：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/8819427FFDE34AAF80FD92FBB2A28B15" alt="" data-media-type="image" data-inited="true"></div>
<div> 一年前左右，接触到knockout和AngularJS，感受到数据和视图自动绑定的美妙开发体验后，立即抛弃Backbone。此时的开发已经彻底前后分离、前端业务数据层和视图层分离。接下来又开始陆续使用coffeescript 、jade、less进一步减少代码量。用grunt做自动编译、测试、和检测文件改动自动刷新浏览器。一切都已经比较完美了，除了后端仍然要对数据持久化做不少工作，除了前端要想实时反映数据改变仍然要轮询或者用webSocket连接服务器。这时的开发模型图已经是这样了：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/158692ED8AEC4BE9B163FA806067D5DE" alt="" data-media-type="image" data-inited="true"></div>
<div> </div>
<div> 只差一点就完美了，Meteor就是这一点。Meteor是一个基于nodejs、webSocket、mongoDB的整体开发框架，在它的实现中，前后端的数据模型已经几乎没有差别。</div>
<div> 意思就是，前端对数据模型进行任何改动，只要调用“save”方法，所有数据就自动存到服务器端的mongoDB中了——终于可以忘了主动发送请求给服务器，终于可以忘了服务器要和前端实现几乎一样的数据模型层</div>
<div> 而任何前端“订阅的”后端数据出现改动，前端数据模型也会马上自动得到了更新——终于可以忘了主动轮询，终于可以忘了拿到后端数据再解析成前端模型。除了前后端模型的双向自动绑定，Meteor同时还实现了数据到前端模板的自动更新。</div>
<div> 不过，Meteor的模板在处理视图到模型的改动时扩展性不如AngularJS。因此，将AngularJS和meteor结合是最好的选择。到这里，快速Web开发模型终于完成：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/AE339B6E1278492F8B6FFC7318127A2F" alt="" data-media-type="image" data-inited="true"></div>
<div> </div>
<div> 除了模型的自动绑定与更新，meteor还提供了大量进一步加速开发的机制。如：</div>
<div>
<ul>
<li>前后端载入文件文件的自动化管理。只要将相应的文件扔到前后端相应的目录中，就会自动载入到页面，或者在后端自动运行。</li>
<li>“智能包”管理。Meteor提供了模块的机制，让第三方开发者可以写“智能包”来加强前后端的功能。如，加载了“coffeescript”智能包后。无论前后端用coffeescript写的代码都会自动编译成javascript后再载入。</li>
<li>内置大量“智能包”，有进一步支持开发的包，如“less”、“underscore”、“coffeescript”，还有通用业务逻辑包。如“账户管理”，而且已经集成主流oauth账号登陆。</li>
<li>自动检测文件改动，自动刷新浏览器。</li>
<li>自动化部署。</li>
</ul>
<div> 以下马上来看一个实际开发的例子，制作一个为公司录入应聘人员信息的系统。</div>
<div> 需求：</div>
<div>
<ul>
<li>能指派面试官，自动邮件通知。</li>
<li>支持google邮箱登陆。</li>
<li>体验流畅、单页应用。</li>
</ul>
<div> 开始写业务逻辑之前，我们先开始为准备一些开发工具和环境。首先，我要求能用coffescript代替javascript，less代替css。安装完meteor之后，进入项目木文件夹。在命令行中输入如下代码</div>
</div>
<div> meteor create myapp</div>
<div> meteor add less</div>
<div> meteor add coffeescript</div>
<div> </div>
<div> 然后，我想在前端使用jquery，和meteor提供的账户系统来支持google oauth授权。继续输入：</div>
<div> meteor add jquery</div>
<div> meteor add account-ui</div>
<div> meteor add account-google</div>
<div> </div>
<div> 最后，将angularJS整合进来：在项目文件夹中创建如下目录层级：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/79245B7ABA49409E9E54EB3694F6AA07" alt="" data-media-type="image" data-inited="true"></div>
<div>client中的内容会全部自动加载到页面上，具体加载顺序请参考官方文档。server中的文件会在应用启动时自动运行。public中文件将作为静态资源供外部访问。</div>
<div> 因为AngularJS对数据模型改动的检测是通过“dirty check”的方式（见Angular官方文档）。所以要使用插件来让Meteor数据改动能通知到AngularJS，以此触发视图变化。这个插件就是上图中的angular.meteor。</div>
<div> 接下来说用AngularJS的ui-route模块来管理页面路由，将应用变成单页：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/ED0ED00A71D74386A6C431A9BD7E45AC" alt="" data-media-type="image" data-inited="true"></div>
<div> 加入“使用google账号”登录的功能：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/0971964B684844C2A38164FD80572664" alt="" data-media-type="image" data-inited="true"></div>
<div> 当新增一个应聘者时，给面试官发邮件：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/17F0EDD2992746D4905B7144D1D24261" alt="" data-media-type="image" data-inited="true"></div>
<div> 这里应该注意到的是，Meteor对于数据的操作完全是标准的MongoDB语法。剩下的业务逻辑用AngularJS的视图与模型很快就可以实现了，这里不再赘述。</div>
<div> 最后看看系统的效果截图，添加新的应聘人信息：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/AD44961F791040588AA189A69E6BC6FD" alt="" width="877" height="286" data-media-type="image" data-inited="true"></div>
<div> 面试结果记录：</div>
<div><img style="display: block; margin-left: auto; margin-right: auto" src="http://note.youdao.com/yws/public/resource/2397da57730337a8bfa99a9c4dea1853/38771EB71EF648E3AEE67383B8E58F48" alt="" width="877" height="326" data-media-type="image" data-inited="true"></div>
<div> </div>
<div> 总结整个开发过程，可以都看到的是，几乎没有后端开发，只要前端完成，应用基本上就完成了。并且一步就可以使用coffeescript、less等，不再需要自己搭建复杂的开发环境。这样的开发体验，在目前来说，几乎已经到极致了。</div>
<div> 当然，要进入真正产品级开发，Meteor还有一些问题要克服，如“支持多种数据库”，“如何部署到集群”，“实时数据增加了服务器负载”等。好在Meteor目前收到的关注已经特别高，并且有了大量的第三方开发者，进入产品级开发的步伐越来越快。我们完全可以期待，这块拼图成熟之后，将给整个web开发新注入一股强大动力。</div>
</div><br><br>
来源：https://www.cnblogs.com/sskyy/p/3197917.html
頁:
[1]