web前端技术框架选型参考

一、出发点

　　随着Web技术的不断发展，前端架构框架、UI框架、构建工具、CSS预处理等层出不穷，各有千秋。太多的框架在形成初期，都曾在web领域

掀起过一场技术浪潮，可有些却仅仅是昙花一现，随着他们用户量的逐渐减少，社区也越来越不活跃。如：meteor、backbone、ember、knockout。

不禁感叹技术的更新换代来的太突然。为了追赶技术更新的脚步，保证技术实施的高性能，强兼容性，并且不会再短时间内被时代所遗弃。以下为目

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

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

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

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

二、项目需求

　　略

三、参考点

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

　　React 毫无疑问是现在最热门的前端框架，React目前属于快速发展阶段，是否成熟还需时间的考量。由于 React 的设计思想极其独特，属于革

命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

　　Angular 提供了一系列健壮的功能，以及将代码隔离成模块的方法，这对提高可复用性、可维护性和可测试性都是非常有益的。它的核心功能包

括MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等等。Angular在从开源社区火起来就一直存在于人们的视线中，超前的设计理念，强大

的生态系统，让他一直扬帆于web框架的浪潮中，稳步前行。

　　Vue 的作者是位中国人，虽然vue属于个人项目，但在简洁、轻量、快速、数据驱动、模块友好、组件化等方面是不输于AngularJs的，这是因为vue

基本是在angular的设计思想上实现的库而非框架。说起vue不得不谈到它的小巧，小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合

其他库方面它给了用户更大的空间。Vue虽然小巧，但是“麻雀虽小五脏俱全”，在构建大型应用的时候也是得心应手。并且近几年来vue得到了国内外多

数公司的认可，社区生态系统也日趋完善。

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

　　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还是静观其变才好。

　　这里不过多评价前端自动化构建工具和css预处理器，因为这些仅仅是工具，完全可以不使用或者选择性搭配使用。只要能帮助我们简明、清晰、快速

的搭建web应用就足够了。以上提到的3个框架，有种三分天下的感觉。

　　综上，没有万能的框架，更没有万能的技术，最适合的才是最好的。这些只是我个人的片面的看法，希望大家有好的见解及时帮我提出来，我会在博客

中第一时间修改。谢谢大家！