前端架构技术选型

  环顾四周的大型互联网公司，基本上都有自己的前端框架，比如阿里的Kissy和Arale，腾讯的JX，百度的Tangram，360的QWrap等，为什么？因为要整合别的框架，并且在此基础上发展适合自己的组件库，代价非常大，初期没办法的时候只能凑合，长期来说，所有代码都可控的意义非常重要。

常见的前端产品形态包括：

• 内容型Web站点：侧重渲染方面的优化，前端逻辑比重小

• 操作型B/S系统：以数据和逻辑为中心，界面较规整

• 内嵌Web的本地应用：要处理缓存和一些本地接口，包括PC客户端和移动端

这三种产品的前端框架要处理的事情显然是不太一样的，所以可以细分成2-3种项目模板，整理出对应的种子项目，供同类产品初始化用。

选择前端框架应综合考虑框架本身与团队情况

选择框架要从两面看，一是看该框架的本领，二是看你们团队的能耐。

显然，我们第一步就是圈定时下最流行的框架与库作为评估对象，然后再根据自家公司的情况进行筛选。贵公司是建站公司，还是有自己产品的公司呢？如果是建站公司，页面不会复杂到哪里去，基本上jQuery+Bootstrap搞定，不要想得太多，就是它们。如果有自己产品， 要维护一大堆客户数据，要与客户打交道，不难想象存在非常复杂的CRM系统，按照中国人的特性，这东西只会越来越复杂，这就要慎重考虑了。这往往是持续十年的维护升级，我们需要看一下某框架是否有你们的产品那么长寿，这框架的升级更新是否频繁平缓。

以下为目前常见的主流技术参考，根据github关注度排名：

架构框架

框架名	技术支持	思想	针对性
React	Facebook	虚拟dom，单项数据流	高效创建交互式组件
AngularJS	Google	双向数据绑定，指令	结构化
Vue	Evan You（尤雨溪）	轻量级AngularJS	更加简洁更易理解

构建工具

工具名	技术支持	思想	针对性
Webpack	Tobias Koppers	模块化处理	Web模块化
Gulp	/	基于流的自动化构建	Web流程化
Grunt	/	自动化构建	自动化构建

CSS预处理

处理器名	技术支持	思想	易用性
Sass	/	基于ruby具备编程模式	***
Less	/	动态化css	*****

大工程应尽量避开谷歌产品

如果你的项目是一个跨度三年以上的大工程。我们需要使用更稳健成熟的技术方案，我们需要重点避开谷歌的产品，它的许多产品都是玩票性质，GWT、Closure、Darty就是前车之鉴。Polymer基于许多新技术构建，其中Object.observe()、 Custom Elements、HTML Imports、Shadow DOM、Model-Driven Views还远远没被标准化， 许多还是独家的，变数太大，因此才出现下图所示的悲剧。Angular不是我黑它，这东西也喜欢断崖式升级，它在1.08时兼容IE6-8，1.2时需要打补丁兼容旧式IE，1.3摒弃了对旧式IE的兼容，直接在源码中删除了所有兼容代码，因此所有补丁方案都无力回天，并且不支持全局Ctrl函数，许多模块需要独立引用，1.4不向下支持动画模块，2.0由at改成ts构建，由于使用Object.observe()，因此不支持IE6-11，Chrome30……

后台系统可考虑EXT、EasyUI，avalon等国内优秀框架也值得考虑

如果你们的产品是后台系统，那么就有两个选择，使用EXT、EasyUI这些重大的UI库方案，其中EXT具有严重的排它性，它很难与其他前端解决方案并用。什么模块组织、打包、数据可视化，它都已经能全部帮你搞定。它文档齐备漂亮，入门难度中等，但它要求你的团队非常稳定，现在招一个专职EXT的前端是很难的。EasyUI是国内比较大牌的UI框架，虽然闭源，不过想扩展它不是难事。

重SEO产品，可考虑jQuery+Bootstrap+RequireJS组合

如果你们的产品是商场这样重演示类的产品，就对SEO有要求，MVVM就不适合了。目前也就Angular与avalon在搞后端渲染机制，但还不上了台面。这时jQuery+Bootstrap+RequireJS就非常好用。RequireJS的作用不单单是提供了一个按需加载机制，它还能让我们组织起更为庞大的代码。如果不用RequireJS，国内另一个选择是SeaJS，它的规范是CMD。此外还有CommonJS规范，但这无法直接运行于前端，需要借助fekit、FIS、Webpack这样的构建工具进行合并了。不管怎么说，你这时选用的框架必须存在AMD、CMD或CommonJS任一种加载规范，这方便你以后的横向扩展。至于插件，目前小插件们都趋向用UMD，它可以让AMD、CMD、CommonJS任一种加载器加载。

• Bootstrap主要针对桌面端市场，Bootstrap3 提出移动优先，不过目前桌面端依然还是 Bootstrap 的主要目标市场。Bootstrap 主要基于 jQuery 进行 JavaScript 处理，支持 LESS 来做 CSS 的扩展。如果想要在 Bootstrap 框架中使用 Sass，则需要通过 Bootstrap-Sass项目增加兼容。Bootstrap 框架在布局、版式、控件、特效方面都非常让人满意，都预置了丰富的效果，极大方便了用户开发。在风格设置方面，还需要用户在下载时手动设置，可配置粒度非常细，相应也比较繁琐，不太直观，需要对 Bootstrap 非常熟悉配置起来才能得心应手。

• jQuery UI是 jQuery 项目组中对桌面端的扩展，包括了丰富的控件和特效，与 jQuery 无缝兼容。同时，jQuery UI 中预置了多种风格供用户选择，避免了千篇一律。如果您对预置的风格不满意，还可以通过 jQuery UI 的可视化界面，自助对 jQuery UI 的显示效果进行配置，非常方便，够高端大气上档次。

移动端技术较混乱，需多管齐下

如果你们的产品是移动端，基本上是SPA架构了，因为这会减少等待，整页刷新与请求数。目前该领域非常混乱，不同于PC端，要兼容的浏览器多出N倍，并且为了性能，浏览器商乱砍功能或改变一些浏览器特性的行为，往往引发一些奇怪的BUG，目前社区正在整理这些坑与解药。但目前没有一个框架能够摆平所有问题，都需要多管齐下。我的见解是：

RequireJS（按需加载，移动端上可以不打包，善用304缓存，腾讯搞出一个更牛叉的增量更新加载器MT，也可以试试）+Backbone（组织代码与路由管理）+Zepto（轻量DOM操作） + fastclick.js（点击穿透与延迟处理）+Hammer.js（各种触屏事件）+iScroll5.js（滚动条处理）+Animate.css（CSS3动画）+Enquire.js（处理响应式布局）。

可见移动端每个部件都烂到蕊了，每个部件都需要专门的工具进行修复。移动端是非常注重体验的，每一个小角落都存在着各种动画，但浏览器或自带的WebView都很差劲，于是Native与Hybird的话题才一直这么火。有的人说，既然DOM最吃性能，那么就干脆用Canvas来代替吧 Facebook也推出了自己类似的方案React Native，自己实现了一套GUI，不过编写语言是JavaScript。它是使用自己原来的超高性能轮子React实现的。这或者是一条道路。但优缺点也明显，正如Angular浓浓的Java风，React是在逻辑中插入大段标签语言（JSX）。同时React的排它性也非常强，很难与其它库搭配使用。同时，我们可以看到，出自jQuery名门的jQuery Mobile并没有入围，那个性能太糟了，连Sencha Touch也不及。上面说的只是核心库， 还没有搬出UI库呢。号称Mobile First的UI库不在少数，由于无视IE，可以大胆使用CSS3。目前比较出彩的有Foundation、Semantic，Refill、Ratchet。如果只是想运行在平板上，性能问题就不会那么拮据了，我们还可以试试inoic、Sencha Touch， Kendo UI Mobile……

其他参考点

1.框架自身：a. 是否成熟 b.架构和模式 c.生态系统

　React毫无疑问是现在最热门的前端框架，React目前属于快速发展阶段，是否成熟还需时间的考量。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。

**Angular**提供了一系列健壮的功能，以及将代码隔离成模块的方法，这对提高可复用性、可维护性和可测试性都是非常有益的。它的核心功能包括MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等等。Angular在从开源社区火起来就一直存在于人们的视线中，超前的设计理念，强大的生态系统，让他一直扬帆于web框架的浪潮中，稳步前行。

　Vue的作者是位中国人，虽然vue属于个人项目，但在简洁、轻量、快速、数据驱动、模块友好、组件化等方面是不输于AngularJs的，这是因为vue基本是在angular的设计思想上实现的库而非框架。说起vue不得不谈到它的小巧，小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合其他库方面它给了用户更大的空间。Vue虽然小巧，但是“麻雀虽小五脏俱全”，在构建大型应用的时候也是得心应手。并且近几年来vue得到了国内外多数公司的认可，社区生态系统也日趋完善。

2.项目契合：a.是否能满足需求 b.是否适合项目

　　React对于数据逻辑方面需要操心的更少了，可以直接全量赋值。通过虚拟dom，进行dom局部更新这一点很吸引人，省去前端对数据逻辑的判断和操作。react目前我感觉优势在于native相关，未来大有可玩。单纯的web项目的话，学习成本相对vue来说还是很高的，react只是view还需要配合其他类flux的框架开发。最后，使用场景上来说：React配合严格的Flux架构，适合超大规模多人协作的复杂项目。

　　Angular允许你构建功能强大且易于理解和维护的机构化应用程序，angular是一个为动态web应用设计的结构化框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态语言所体现的不足。Angular的结构化就是讲究责任分离，这样代码才好理解，维护和测试。

　　Vue体积小，接口灵活，侵入性好，可用于页面的一部分，而不是整个页面。扩展性好，源码规范简洁。更适合手机端的WEB开发，是声明式开发，性能高于angular，体积小很多。社区生态正在逐步完善，用的人相对较少，网上的资料也不多，出了问题的解决成本高。

决策目的

基于参考点及项目需求择优以上web端常用工具及架构框架，UI框架可根据兼容性、易用性、及熟练程度选择。

可选方案（主流web框架比较）

编号	框架名	构建工具	Css预处理器	评分
1	Angular	Gulp/webpack	less	*****
2	React+flux	Webpack/gulp+webpack	less	***
3	Vue	Gulp/webpack	less	**

结论

vue相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。但是从另一方面来看它却显得毫无新意，甚至有点苍白无力。AngularJS非常结构化，大而全，虽然臃肿，但是成熟稳定。React在我看来并不是一个框架，而是一种设计思想。并且它的这种思想非常

空前，甚至可以移植到任何一个框架上，所以react和以上框架并无可比性，react所引领和激发的一系列开发思想，在React生态圈颇有些百家争鸣的感觉，各种新玩法层出不穷，所谓任重而道远，我认为对于react还是静观其变才好。

没有万能的框架，更没有万能的技术，最适合的才是最好的