前端框架解决了什么

date:2018-06-02

• 经历过的前端开发方式

不知什么时候开始，在学习新的知识的时候，我都会不禁思索，这个知识能够解决什么样的问题。然后开始回忆一遍自己在已经的开发过程中有没有遇到可以采用这个知识来优化或是改善它。

目前我经历的前端的开发方式主要有，采用underscore作为模板渲染引擎，渲染动态页面，这时我经历的第一个不需要操作DOM就可以实现页面修改的方式，当时小小的神奇了一把，原谅我第一次开始使用模板渲染引擎。

后来开始使用react，突然发现我们可以完全不用在意页面DOM操作了，我可以关注与页面数据的获取，然后将数据设置为react组件的状态，嘣，页面就自动更新了，是不是发现我们只要关注页面的数据就可以了，有些人会说第一次使用react，会觉得使用jsx的语法非常的难易接受，可能之前没有使用过其他的MVVM框架，所以我还是比较能够接受的，整个写起来非常的爽，在做展示之类的页面的时候，发现一切变得如此简单。

react的生态相对来说比较的分散，其核心库是由Facebook维护的，但是其周边配套库并不是由Facebook维护的，有时候对于同一问题的解决方案可能会有多个，刚开始的时候，在GitHub上面出现了一些react的最佳实践，后来出现来官方的create-react-app，这些方案的出现，缩短了我们入手的时间，工程配置的复杂化也算是前端工程化的副作用，我们会在项目初期需要投入大量时间在项目配置中。

之前接触的开发主要是微信商城的开发，所以我们只需要适配微信浏览器就可以了，而且不需要SEO，所以react构建的SPA应用很是是适应这样的场景，当然你也一定会遇到各种各样的问题。

后来项目需要SEO，在当时react服务端渲染不是很成熟的情况下，我们选择了技术上比较成熟的jsp方案，个人认为jsp的渲染方式与underscore的模板渲染是类似的。

在进行后台管理系统开发时，公司突然决定放弃之前使用的Ext.js，改用vue进行构建，主要是使用4.0版本的Ext.js的页面被客户提出了一些要求，确实随着互联网产品井喷式的出现，客户接触到大量的酷炫的页面后，逐渐对管理系统类的页面也开始有第一定的要求。

但是系统的前端由Ext.js切换到vue成本还是很大的，在后台管理系统的开发效率上，vue是远远的落后于Ext.js的，Ext.js几乎是天生为后台管理系统而生的，它提供的是一整套的解决方案，不仅仅设计技术上，很多的组件设计都是从实际的业务出发考虑，从列表页面到详情页，简单的几十行代码就可以实现了，vue虽然也有大量的组件，但是有很多是重复的轮子，几乎所有的组件都是个人或是互联网公司的产品，我相信很多的大公司在内部一定有一套基于vue但是类似Ext.js的框架的存在。

• 如果我们需要基于vue开发企业级应用

企业级的前端框架需要做到什么，Ext.js已经给了我们答案：

1. 可以几乎覆盖所有需求的组件集合

2. 高度集成业务逻辑的模板页面

3. 预置主题样式

4. 上面三点造就第四点，后端开发工程师零门槛上手

在使用Ext.js的时候，大部分的时候我们都是在编写组件或是模板的配置，及数据获取及处理的逻辑，所以一旦发生错误，那就是写的配置文件不对，Ext.js的组件代码是高度测试过的。

如果我们使用vue创建开发企业级应用，我们需要解决什么问题：

1. 能够覆盖各种业务需求的组件集合

2. 健壮的业务逻辑模板

以上2点只是基础，vue的组件库基本上都是开源的，而且大部分的组件都是针对互联网产品，样式很好看，大的bug没有，但是往往会存在一定的bug，bug修复时间不确定，我们在使用vue开发后台管理系统时，会花费大量的时间在：

1. 第三方组件bug修复

2. 组件开发

3. 模板页面的业务逻辑调试

我可能在上文中不断的强调，vue第三方组件的不完善，与系统业务几乎没有耦合，vue就是一个避免DOM操作的框架，但这也是它的优点，近些年来的前端框架几乎都类似这样。

• 我们可以用vue做什么

前端框架的出现很大程度上时受到当前软件环境影响的，在Ext.js诞生的年代，正处于CS软件向BS软件迁移的年代，Ext.js迎合了这样的需求，模糊了前后端的分界线，前端工程师也是近几年才兴起的。

react、vue的出现，迎合的是现代互联网产品，这里面没有Angular，是我觉得很难界定它的应用场景，现代互联网产品的要求：

1. 美观可变的UI

2. 业务逻辑动态多变

3. 加载速度快

我们可以看到现代互联网产品的不确定性很高，不确定性表明我们很多的东西都不能预置，最明显的体现就是button 按钮都要能玩出花儿来，互联网产品的研发周期基本是终身的，时间很长，在这期间，系统都在不停的变化，不断的优化，组件不断的新增、重写，页面加载不停的优化。

• 前端框架解决了什么

结合我自身的使用经历，和多个框架的对比，前端框架究竟解决了什么？我想可能是避免了DOM操作，无论在哪个框架里，他们第一个解决的问题是抽象DOM，将数据反馈为页面。