Vue前端框架选型论证

Vue前端框架选型论证

1. 前端框架的演变

1.1 前端框架的演变历史

从 web 1.0 -> MVC(Flux或者Redux) -> MVP -> MVVM。这段变化的过程，会让人不断琢磨，每次的变化，都是一次大的进步。现在在前端的框架都是MVVM的模式。

1.2 web 1.0 时代

当时，开发者们并没有前端的概念。开发一个应用，或许只要5个人的小团队，就能够很快的配置出可运行的环境。而开发的语言使用的也是最初的JSP、ASP和PHP。

web 1.0 时代的缺点很明显，业务体系增大，调试困难：随着业务体系的增大，后台service也会逐步膨胀，大致需要建设一个开发服务器进行存放，这会导致一个问题就是前端无法在本地进行调试，每次进行修改之后，都必须上传到开发服务器进行测试（况且开发服务器可能本身就不稳定）。

JSP代码难以维护：或许人少的时候，学JSP挺简单的。但是，一旦团队人数增多，JSP内参杂的业务逻辑也会逐渐增加，这会导致的是JSP本身难以维护。

1.3 后端 MVC 时代

为了解决 web 1.0 时代的缺点，为了让开发更加的便捷，代码变得更加的可维护，同时使得前后端的职责加以分离。将后端MVC化，而前端的展示则以模板的形式进行嵌套。典型的框架就是Spring、Structs。

使用这样子的架构，复杂度被降低了，职责也会比较清晰。这个时代被称为后端的MVC时代。

但是， 同样的这种模式存在着一些问题：

前端页面开发效率不高：其实，早期的时候根本也没啥前端开发工程师，有的只是页面仔。更多公司可能也有后端的人使用js在写页面的。因此，问题就暴露了出来，前端所做出来的页面需要放到后端环境去运行，使得前端开发的效率并不是特别之高，因为对于后端环境的依赖程度比较大。

前后端职责不清：由于前端并未做太多的工作，以至于后端的开发体量比较庞大。就拿路由管理来举例子，本来路由管理可以由前端开发的人员来进行开发和管理。但是，使用这种架构时，后端需要去维护一个庞大的路由表，增加了后端的开发量。

1.4 前端 MVC 时代

有个东西带来了前端的第一个春天——AJAX。自从Gmail的出现，ajax技术开始风靡全球。许多公司和开发者都不断地利用它做实验。有了ajax之后，前后端的职责就更加的清晰了。因为前端可以通过Ajax与后端进行数据交互。

通过ajax与后台服务器进行数据的交换，前端开发的人员，只需要开发自己页面这部分的内容，数据可由后台进行提供。而且ajax可以使得页面实现部分刷新，极大的减少了之前需要反复开发的页面。这时，才开始有前端工程师开始慢慢从事前端。同时前端的类库也慢慢的开始发展，最著名的就是jQuery了。

但其实，这样子的架构中还是存在一定的问题——前端缺乏一种可行的开发模式。整体的内容都杂糅在一起，一旦应用增大，就会导致难以维护了。举个例子，当图书少的时候，我们就算随意放置，整理起来都比较方便；但是，一旦具有像图书馆一样多的图书时，必须有一种统一的管理方式。同样的，前后端分离之后，前端的开发业务逐渐增多，责任也愈加的巨大，开发者急需一种比较好的框架来规范整个应用。因此，前端的MVC也随之而来。

前端的MVC应该与后端类似，具备着View、Controller和Model。

Model：负责保存应用数据，与后端数据进行同步

Controller：负责业务逻辑，根据用户行为对Model数据进行修改

View：负责视图展示，将model中的数据可视化出来。

但是，但是前端MVC也存在一些严重的问题：

model和view的数据交互，非常的混乱，而且维护起来非常麻烦。这就是灵活开发带来的后遗症。拿backbone举个例子，backbone将Model的set和on方法暴露出来，方便外部对其进行直接操作。

View比较庞大，而Controller比较单薄：由于很多的开发者都会在view中写一些逻辑代码，逐渐的就导致view中的内容越来越庞大，而controller变得越来越单薄。

1.5 MVP 时代

MVP与MVC很接近，P指的是Presenter，presenter可以理解为一个中间人，它负责着View和Model之间的数据流动，防止View和Model之间直接交流。

我们可以通过看到，presenter负责和Model进行双向交互，还和View进行双向交互。这种交互方式，相对于MVC来说少了一些灵活，View变成了被动视图，并且本身变得很小。虽然它分离了View和Model。但是应用逐渐变大之后，缺陷也会随之暴露。

缺陷：由于大部分逻辑都需要presenter去进行管理，从而导致presenter的体积增大，难以维护。

1.6 MVVM 时代

首先，何为MVVM呢？MVVM可以分解成(Model-View-VIewModel)。ViewModel可以理解为在presenter基础上的进阶版。

在这里View是ViewModel的外在显示，和ViewModel的数据是同步的。一旦View中的数据发生变化，会自动同步到ViewModel，然后ViewModel可以将变化的数据传给Model；反过来也是一样的，Model中的数据一旦发生改变，就会将值传给ViewModel，而ViewModel也会同步更新到view中。现在的框架实现这样的形式，各有各的不同。主要的三个框架AngularJS、Vue、React都是实现了这样子的模式。

这种的好处就是View和Model之间被分离开来。view不知道model的存在，viewmodel和model也觉察不到view。事实上，model也完全忽略viewmodel和view的存在。这是一个非常松散耦合的设计。

2. 前端框架的演变总结

从前端框架的历史演变中我们可以得出结论，基于前端MVC、MVP的时代已经成为历史，MVVM更佳适合我们，所以，我们首先排除基于JQuery的EasyUI、Bootstrap等前端MVC、MVP框架，选择合适的MVVM框架，目前世界上公认的MVVM三大框架是 AngularJS、Vue、React ，所以，下面我们将从 AngularJS、Vue、React 三大框架中挑选出最合适我们的前端框架。

3. 前端 MVVM 三大框架 AngularJS、Vue、React 对比选择

3.1 三大框架社区活跃度对比

社区活跃度对比：

1. React github Star 数量：130k
2. AngularJS github Star 数量：59.6k
3. Vue github Star 数量：140k

3.2 市场应用情况对比

npm下载使用量对比:

1. npm 统计地址：https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue

2. npm 趋势对比

   

3.3 前端 MVVM 三大框架 AngularJS、Vue、React 对比选择结论

1. 通过上面的数据可以看出：

   在市场占有排行榜上，React 市场占有量排行第一；AngularJS 市场占有量排行第二；Vue 市场占有量排行第三，从发展趋势来看，Vue 的市场占有量即将超越 AngularJS 。

   在社区活跃度排行榜上，Vue 社区活跃度排行第一，React 社区排行度第二，AngularJS 排行第三。

2. Vue VS AngularJS：

   我们先用 Vue 和 AngularJS 进行对比，在市场占有量上，AngularJS 增长速度缓慢，Vue 增长速度最快，市场占有量即将超过 AngularJS ，在社区活跃度上对比，Vue 的活跃度是 AngularJS 的两倍多，而且 Vue 还在不断增长，综合多方面考虑，前端框架选择上，我们排除了 AngularJS 。

3. Vue VS React：

   React 起源于 Facebook 的内部项目，当前市场占有量排行第一名，社区活跃度比Vue低，React 的属于半开源，在不涉及到 Facebook 公司以、子公司以及 与 Facebook 合作公司的利益条件下开源，否则属于专利侵权。在框架使用的复杂情况上，React 框架相对于 Vue 要复杂的多，学习成本高于Vue。综合多方便考虑，前端框架选择上，我们排除了 React 。

4. Vue 并发支撑能力

Vue 项目打包后，我们一般放在 Nginx 上部署，所有对于并发的支撑能力主要取决于 Nginx ，同等内存资源上，nginx 处理请求是异步非阻塞的，而apache 则是阻塞型的，在高并发下nginx 能保持低资源低消耗高性能。CDN路由 + Nginx 等技术配合，并发量没有上限，需要根据实际情况而定。

5. Vue 研发效率

1. Vue 拥有庞大的社区，有大量的资料方便我们研发和学习。

2. Vue 的研发资料地址示例：

   1. vue官网文档地址：https://cn.vuejs.org/v2/guide/
   2. element官方文档地址：https://element.eleme.cn/#/zh-CN/component/installation
   3. vue菜鸟教程地址：https://www.runoob.com/vue2/vue-tutorial.html
   4. vue慕课网教程：https://www.imooc.com/video/16987
   5. vue + element + admin 范例:
      1. demo演示地址：https://panjiachen.github.io/vue-element-admin/#/dashboard
      2. Github地址：https://github.com/PanJiaChen/vue-element-admin
      3. 教程地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
   6. vux（移动端）官方地址：https://doc.vux.li/zh-CN/components/actionsheet.html

6. Vue 应用体积大小

Vue 框架通过 webpack 打包，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求，webpack按需打包，按需加载，打包后的应用体积大小只有不到3M大小。

7.响应速度

Vue 采用虚拟化 DOM，运行和响应速度更快，而且还支持懒加载，即在需要的时候进行加载，随用随载。

8. 响应式布局

Vue + element 框架支持响应式布局，在手机、平板、小屏幕、大屏幕都是支持响应式的。

9. Vue 支持的浏览器

Vue 支持众多浏览器，例如：谷歌、360、火狐、IE等众多浏览器。

10. Vue 能吸更多的优秀的开发参加应聘

Vue 是前端主流框架，能吸引更多优秀的应聘者来公司面试，开发人员学会使用 Vue 开发前端页面后，在开发人员的简历里面又可以增添一项新技能。

11. Vue 的效果演示

演示地址：https://panjiachen.github.io/vue-element-admin/#/dashboard