全 Javascript 的 Web 开发架构:MEAN

标签: 综合新闻 | 发表时间:2014-04-02 09:17 | 作者:
出处:http://www.oschina.net/?from=rss

引言

最近在Angular社区的原型开发者间,一种全Javascript的开发架构MEAN正突然流行起来。其首字母分别代表的是:(M)ongoDB——NoSQL的文档数据库,使用JSON风格来存储数据,甚至也是使用JS来进行sql查询;(E)xpress——基于Node的Web开发框架;(A)agular——JS的前端开发框架,提供了声明式的双向数据绑定;(N)ode——基于V8的运行时环境(JS语言开发),可以构建快速响应、可扩展的网络应用。

MEAN架构的示意图

MEAN的支持者宣称,如果整个开发栈均能使用JS,必然会大大地提高效率,这一点毋庸置疑是一个很大的卖点。这样一来,开发人员(无论是前端还是后端)不仅能使用一致的数据模型,在其它方面也同样可以获得一致的编程体验。

例如,拿Mongo来说,你可以使用类JSON格式(BSON,二进制的JSON)来存储数据,然后在Express/Node中调用JSON查询语句,再将结果以JSON格式传给前端的Angular显示,这样,也自然使调试程序容易了很多。

注意: 事实上,在MEAN架构中,前端的Angular并不是必须的,你可以将它替换成其他的前端框架,如Backbone、Ember或者Polymer。

为何选择MongoDB?

如上所提,这个架构最重要的优势在于能使用单一语言,这也是其选择了Mongo的首要原因。 这里就不讨论noSQL的是与非了。一些人对MEAN架构的指责在于,MongoDB可以很好地胜任中小型的应用,但是对于大规模应用(百万级用户)来说可能就捉襟见肘。我想说的是,这完全取决于你如何使用它。

SQL数据库本身是强类型的,因此可以在很大程度上保证某种层次的一致,从而确保许多类型的脏数据一开始就没办法进入数据库。而NoSQL则是弱类型的数据库,这使得它在数据验证方面力不从心,而只能交给开发人员来实现,基于这样的特性,它尤其适合存储那些不规范的数据,特别是在原型开发阶段,此时数据模型正在经历快速变化。

SQL和noSQL间的技术差别,归根结底是要在性能和稳定性间作出平衡。有些情况下,对数据的事务处理一旦设定后就不会轻易变化,那么此时使用Mongo就非常合适;然而有时候也会涉及更为复杂的事务处理,会牵扯到许多独立的业务逻辑,由于Mongo并没有提供一个简单的数据模型来支持一定级别的原子操作,因此SQL在这个时候可以派上用场。

但无论如何,不论你是否选择MEAN中的M,你最终都需要根据自身的需求选择出合适的工具来做正确的事情,

为何是Express?

可以简单地把Express看成是一个在Node平台下搭建Web应用的工具集。在Node的基础上,它提供了许多简洁的接口来创建请求节点、处理cookie等,此外还提供了许多功能来帮助你搭建自己的服务器。总的来说,Express在以下几个方面有优势:

  • 设置REST路由简单致极:

    app.get(/account/:id,function(req, res){/* req.params('id') is available */});
  • 支持Jade或Mustache等模板引擎

  • 自动HTTP头处理:

    app.get('/',function(req,res){ res.json({object:'foo'}); });
  • 支持Connect中间件,可以插入额外请求或响应处理,如用户验证

  • 提供辅助函数解析POST请求

  • 防范XSS

  • 优雅的错误处理

如何快速上手MEAN

如果想要很快上手MEAN,那么 mean.io是一个很不错的选择。该项目旨在解决MEAN架构中一些常见的集成问题, 目前维护得很好,文档也很清楚,而且可以很方便地自行添加第三方库,还能和Yeoman配合使用(通过  generator-mean by James Cryer)。

在进一步阅读前,先假定我们同意以下观点:(a)Mongo至少非常适合于全Javascript堆栈的原型设计;(b) 承认即使像Angular般如日中天,终有一天也会被其他的一些JS框架给取代,只要它们能帮助我们快速方便地将这个架构快速搭建起来。

接下来就要介绍 Yeoman 了,它由3个你所熟知的工具构成:

  • Grunt:用于生成,预览和自动化测试你的项目,这要特别感谢由Yeoman和grin t-contrib团队创建的许多grunt tasks。

  • Bower:前端的依赖管理工具,有了它你再也不需要手动下载和管理第三方JS库了。

  • YO:快速生成一个新的应用,包括配置好你的Grunt任务以及你极有可能会用到的Bower依赖。

笔者在一年以前,曾和其他一些人创建过一个叫 ExpressStack的项目,其想法很简单,就是要提供一些工具能够快速生成构建全JS的Web应用所需要的一切。但是,这个项目夭折了,尽管如此,许多类似的项目却如雨后春笋般涌现出来。

下面对这些项目作些介绍:

注意: 你可能需要装好Yeomam(npm install -g yo)和以下一些生成器(npm install -g <generator-name>)。

1.  generator-angular-fullstack

这是一个AngularJS的生成器,集成了Express,可选MongoDB。主要功能如下:

  • 支持客户端和服务端的Livereload。

  • Express server集成了grunt tasks。

  • 内建了方便的部署流程。

  • 支持Jade。

可参考:  http://tylerhenkel.com/creating-apps-with-angular-and-node-using-yeoman/

2.  generator-meanstack

另一个MEAN架构的生成器,集成了grunt-express,功能如下:

  • 在generator-angular的基础上,用express取代了Connect。

  • 支持客户端和服务端的Livereload。

  • 使用app_grunt.js文件来启动应用,而在app.js中定义路由。

  • 目录结构基本沿袭了generator-angular的风格,只作了少许的改动。

可参考: https://github.com/Grievoushead/generator-express-angular

3.  generator-mean-seed

集成了Mongo,Express,Angular,Yeoman,Karma和Protractor(作自动测试)。

4.  generator-klei

和其他的很类似,不过使用的是Mongoose和Stylus,其他的一些功能包括:

  • 其目录结构非常容易扩张(包含了一个TODO List的应用例子)

  • 一个配置完整的Gruntfile,集合了livereload, linting, concatenation, minification等.

  • 使用exctrl来自动挂载API。

  • 使用了grunt-injector,从而无需手动修改Html的layout文件,就可以自动装载新添加的js和css。

  • 使用Karma, Mocha和Chai来进行前端的单元测试。

5.  ultimate-seed-generator

该生成器非常全面,添加了许多第三方的库,包括Passport用于用户登录,Browserify加载js。

  • 集成了AngularUI, Barbeque(用于任务队列管理)和 BootStrap

  • 集成了Bower, Browserify,Express和Font Awesome

  • 集成了Grunt, Handlebars, jQuery, JSHint和Karma/Mocha

  • 支持LESS/LESSHat, Livereload和Lodash/Underscore

  • 集成了Modernizr, MongoDB/Mongoose和Passport

该如何做出选择?

看了这么多的生成器,自然要问,我该选择哪一个呢?事实上,以上列表是有顺序的,依据的是其与最新版的Yeoman的兼容性以及维护的活跃度。

全Javascript的架构是否适合于产品级的应用呢?

不得不承认,如果开发堆栈的每一层都能使用JavaScript将会是一件很棒的事情(至少对于原型开发来说是这样),然而千万要注意,不要为了追求这一目标,而把自己而束缚住了。尽管的确有越来越多的大规模应用都在采用类似的架构,如Walmart、LinkedIn,但并不意味着模仿他们就一定能成功。

另一个需要注意的是,相对于其他的语言(如Ruby,Python或Java),在Node上搭建后端要困难得多。你可能要自己处理内存泄漏,避免在事件循环中进行耗时运算,还要非常小心异常处理,如果这些处理不当就很有可能会导致整个应用服务器崩溃,但是这些问题在其他平台上却已经处理得很好了。然而,这并不是说,Node不能运用在生产环境下,当然可以,但要格外用心。

实话实说,想要“一揽子”为Web应用提供一个大而全的解决方案将非常困难,MEAN架构也肯定有其局限性。在前端与后端的 设计模式、原则和风格中有大量的演化,如果你觉得PHP或Rails是更明智的选择,那就继续使用下去,否则的话,不妨试试MEAN,至少在当下值得一试。

// 译文最初发在  @饶华铭 的个人博客( 原译文)。

相关 [javascript web 开发] 推荐:

全 Javascript 的 Web 开发架构:MEAN

- - 开源中国社区最新新闻
最近在Angular社区的原型开发者间,一种全Javascript的开发架构MEAN正突然流行起来. 其首字母分别代表的是:(M)ongoDB——NoSQL的文档数据库,使用JSON风格来存储数据,甚至也是使用JS来进行sql查询;(E)xpress——基于Node的Web开发框架;(A)agular——JS的前端开发框架,提供了声明式的双向数据绑定;(N)ode——基于V8的运行时环境(JS语言开发),可以构建快速响应、可扩展的网络应用.

10个顶级Web移动开发JavaScript框架

- Amo - HTML5研究小组
这些轻量级框架使用HTML5和CSS3标准来帮助您快速开发跨平台的Web移动应用和网站. jQuery Mobile这个框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面. jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.

JavaScript之web通信

- - Web前端 - ITeye博客
浏览器作为 Web 应用的前台,自身的处理功能比较有限. 浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广. 在 Web 应用中,浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示. AJAX 是浏览器技术发展的成果,通过在浏览器端发送异步请求,提高了单用户操作的响应性.

为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发?

- - 知乎每日精选
首先要确定,即使抛开游戏不论,一般的Web应用或者网站,完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器(比如较老的手机浏览器),或者禁用脚本. 当然你可以选择忽略这一小撮用户,尤其是现在绝大多数网站和应用也是如此选择的,但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.

简化web开发者复杂任务的25个有用的javascript库

- - 博客园_首页
这是非常有用的,因为他们使网站对于用户更加友好. 今天,我列出了一些最有用的轻巧和独特的 JavaScript库. 此列表的JavaScript库将有很大的帮助对于Web开发人员和设计师. 你可以用来创建用户友好的,执行特定功能的代码. 在线浏览PDF文件的实用jquery插件推荐. 精心收藏的14个开发人员方便的jQuery代码片段.

Web 开发必备——使用 amMap 轻松添加互动效果的 JavaScript 地图

- - 博客园_梦想天空
  amMap 是一个工具,你可以​​轻松地使用它在您的网页和基于. JavaScript 的应用程序中添加互动地图功能.   您可以使用此工具来显示您的办公室的位置,你的旅行路线,创建您的经销商地图,照片或插图,可作为图层和背景的地图,这样就可以实现各种界面效果,电子学习工具等等. 12款很棒的浏览器兼容性测试工具推荐.

JavaScript是Web的汇编语言(一):语义Web已死!

- iVane - 为之漫笔
原文地址:JavaScript is Assembly Language for the Web: Sematic Markup is Dead. (更新)有些人认为“JavaScript是Web的汇编语言”完全是精神病说的话. 为此,我询问了几位JavaScript权威,比如Brendan Eich(JavaScript之父)、Douglas Crockford(JSON之父),还有Mike Shaver(Mozilla技术副总裁).

JavaScript开发规范要求

- - 博客 - 伯乐在线
来源: webflash 的博客. 作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题. 本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用“愉快”来形容了. 现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.

提高 web 应用性能之 JavaScript 性能调优

- 去北方-Jack - IBM developerWorks 中国 : 文档库
JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用. 随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且以后会越来越多. JavaScript 作为一个解释执行的语言,以及它的单线程机制,决定了性能问题是 JavaScript 的软肋,也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题,尤其是针对 Web 2.0 的应用.

现代浏览器的web音频javascript类库 - Howler.js

- - CSDN博客Web前端推荐文章
日期:2013-2-6  来源: GBin1.com. 浏览器这个玩意儿并不是个新鲜事,但是随着HTML5的发展激起了浏览器技术的巨大发展. 但是浏览器上对于音频控制技术来说仍旧非常的落伍. 庆幸的是 Google积极的开发和创建了web audio API,这使得基于浏览器的音频控制更加的简单并且直观.