MeanJS

过去我在我的博客中多次提到过javascript全栈构架、angularjs各种实战文章、nodejs\Mongo的各种安装说明。其实这就反映了我现在所推荐的web技术路线是使用mean.js堆栈。mean.js并不是某个Js类库的名字，而是Mongo、express、Angular、node的缩写，本质上LAMP堆栈（LAMP是Linux、apache、mysql、php的缩写）一样都是将开源项目整合起来做web开发之用。。当然，我学习web也是从lamp技术堆栈开始的，但是三年前看到mean.js的种种好处所以选择了mean.js作为主要技术选型。在实验室有新人加入的情况下，我觉得我有必要写一篇文章讲讲这个所谓的技术堆栈是怎么一回事。

 

关于技术堆栈

在 2002 年的一本著作中，David Weinberger 将发展迅速的 Web 内容描述成一个 小块松散组合（Small Pieces Loosely Joined）。这个比喻让我印象深刻，因为大家一般很容易认为 Web 是一个巨大的技术堆栈。实际上，您访问的每个网站都是库、语言与 Web 框架的一种独特组合。

LAMP 堆栈 是早期表现突出的开源 Web 技术集合之一：它使用 Linux® 作为操作系统，使用 Apache 作为 Web 服务器，使用 MySQL 作为数据库，并使用PHP作为生成基于 HTML Web 页面的编程语言。这些技术的出现并非为了一起联合工作。它们是独立的项目，不过，由多位雄心勃勃的软件工程师前赴后继地工作，最终将他们整合在一起，最后获得了巨大的成功。在我们所见证的2000年以来 Web 开发的大爆发期中很多网站都使用LAMP技术堆栈架构的。当然，除了LAMP堆栈也有其他许多技术框架，如ruby on rails，.net系列开发环境等等。可以说，几乎每一种现代编程语言似乎都有一个（或两个）对应的 Web 框架，可将各种混杂的技术预先组装在一起，快速而又轻松地创建一个新的网站。

MEAN 堆栈是 Web 社区中赢得大量关注和令人兴奋的一种新兴堆栈：MongoDB 作为数据库、Express作为服务器端框架、AngularJS 作为前端框架和 Node.js作为web服务器。跟其他技术堆栈不一样，MEAN 堆栈代表着一种完全现代的 Web 开发方法：一种语言运行在应用程序的所有层次上，从客户端到服务器，再到持久层。前前后后都只用javascript。下面这个思维导图展示了javascript语言体系下的各种前后端框架、工具和类库，其中绝大部分都是开源的。我们可以看到所谓MEAN只是其中的一部分。在这些各司其职的工具帮助下，我们得以灵活地搭建我们自己的web应用，遇到问题还可以到开源社区（没错，我是说github）去寻求支持。虽然不敢说MEAN堆栈可以代替LAMP堆栈，但是MEAN的开发效率确实比LAMP要高——前后端一种语言所带来的交流成本降低、一站式开发平台环境搭建的简易性、各种配套工具带来的开发和测试难度降低，将web程序员从以页面为中心的应用程序开发视角切换到面向组件的应用程序开发视角所带来的革新… 请允许我细细道来。

javascript相关工具总览

从 LAMP 到 MEAN

MEAN能得以实现的关键是其中最后一个字母N所代表的Nodejs，只有有了它才能让整个构架实现的可能。Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。由于解释器的高效，Nodejs在运行效率上高于php、python等大多数服务器脚本语言。Node.js 使用事件驱动， 非阻塞I/O模型，非常适合在分布式设备上运行的数据密集型的实时应用。

Node.js 取代了 LAMP 堆栈中的 Apache和php。但 Node.js 远远不止是一种简单的 Web 服务器。事实上，用户不会将完成后的应用程序部署到单机的 Web 服务器上；相反，Web 服务器已经包含在应用程序中，并已在 MEAN 堆栈中自动安装。结果，部署过程得到了极大简化，因为所需的 Web 服务器版本已经与余下的运行时依赖关系一起得到了明确定义。MEAN 不仅仅是一次首字母缩写的简单重新安排与技术升级。将基础平台从操作系统 (Linux) 转变为 JavaScript 运行时 (Node.js) 让操作系统变得独立：Node.js 在 Windows® 与 OS X 上的运行情况和在 Linux 上一样优秀。(不过在windows上执行命令行工具并不太舒服，比如编译node-gyt.js就经常会遇到缺库的问题，果然还是Linux用着最爽)

nodejs简介思维导图

mongodb是现今最流行的NoSql数据库(两年前我还不敢这么说，现在已经可以放心大胆地这么讲了)。属于开源的文档式数据库。该数据库基于C++语言开发，保留了SQL中高很多友好特性（sql可以很容易地导入），基于Master-slave架构（支持自动错误回复），内建分片机制。在数据存储时采用内存到文档的映射，查询性能很高。适用于需要动态查询支持或对大数据库有性能要求的场合，支持javascript直接查询。从传统数据库（如 MySQL）到 NoSQL，再到无架构的、以文档为导向的持久存储（如 MongoDB），这些代表着持久化策略发生了根本性的转变。用户花费在编写 SQL 上的时间将会减少，将会有更多的时间编写 JavaScript 中的映射/化简功能。用户还能省掉大量的转换逻辑，因为 MongoDB 可以在本地运行 JavaScript Object Notation (JSON)。因此，编写 RESTful Web 服务变得前所未有的容易。

某内容管理系统的mongodb架构图

但从 LAMP 到 MEAN 的最大转变在于从传统的服务器端页面生成变为客户端 单页面应用程序 (SPA)。Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用。Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能。丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单。此外，借助 Express 仍然可以处理服务器端的路由与页面生成——但是这一部分工作在MEAN架构中通常被angularjs所代替，express通常只要做好与数据库的连接和CRUD API即可。

通常我们都会通过npm安装express

angularjs是一个中型的MVVM框架，集成了route机制、html模版、依赖注入机制等等内容。这在我的其他的几篇博客已经提到很多，这里不再赘述。这里要讲的是angularjs为什么在MEAN堆栈中如此重要：它将LAMP堆栈中往往是有服务器端实现的模型-视图-控制器 (MVC) 工件转移到客户端，同时倡导开发人员从习惯的同步方式转而使用基本由事件驱动的、实质上为异步的方式。最重要的一点，是将web程序员从以页面为中心的应用程序开发视角切换到面向组件的应用程序开发视角——可以说，angularjs实际上带动了整个web开发架构方法上的革命，虽然此次革命并不是由angularjs最早发起的，但却是必然的趋势。

MEAN架构原理图

不仅是 MEAN

MEAN 堆栈中还有一些外围技术，虽然没有列在MEAN四个字母中，但是他们也很重要：

• Yeoman：一种功能强大的命令行开发工具组合，用于基架 (Yo)、编译脚本 (Grunt) 与CDN依赖关性管理 (Bower)。（关于grunt和bower在我的其他几篇博客中有提到）
• Bootstrap：在当今时代，web前端需要能响应不同大小屏幕的变化，提供大体一致的使用体验。HTML5的设计目的是为了在移动设备上支持多媒体。其包含五个特性：语义特性、本地存储特性、设备兼容特性、连接特性和网页多媒体特性。具体到开发中，这里推荐使用twitter开发的开源框架bootstrap来对前端进行重构，从而在降低开发成本的情况下，利用到HTML5所带来的种种新特性，使浏览器同时兼容大屏端、桌面端、移动端的显示需求。
• 测试库：借助世界级的测试框架，比如 MochaJS、JasmineJS 和 KarmaJS，您可以为自己的 MEAN 应用程序编写深入而又全面的测试套件。除了 Mocha、Jasmine 和 Karma 以外，还有大量测试库可用于模拟 Ajax 调用 (Chai)，显示测试范围 (Istanbul)，以及自动完成功能测试，以便在实际的浏览器中 运行它们(Protractor)。
• 可视化套件：不论是现有数据的可视化展示，还是数据的可视化探索，都需要拥有计算机编程能力、美学设计能力和数据分析能力的专家来协助开发。得益于百度公司前端团队近两年来的开源实践，我们可以使用包含数据可视化图表库Echart，高性能的JavaScript模板引擎Etpl, 前端开发套件EDP等等。百度地图也是必须的地理信息位置服务辅助。当然有时候为了保证技术的统一性，我会放弃echart转而使用一些SVG的图表类库诸如highchart等等，但对于一些纯粹是原创性质的可视化案例开发，我通常是使用d3.js类库进行开发（raphel.js我已经不用了）。

以上是MEAN的介绍。关于具体如何部署，如何使用可是一个复杂话题。请百度谷歌，或者根据参考文献按图索骥。

转自;http://www.storagelab.org.cn/zhangdi/2015/06/22/%E5%86%99%E7%BB%99%E5%B8%88%E5%BC%9F%E5%B8%88%E5%A6%B9%EF%BC%9A%E6%88%91%E4%BB%AC%E7%8E%B0%E5%9C%A8%E7%9A%84web%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF%E6%9E%B6%E6%9E%84%E6%98%AFmean-js/