一 从热门框架谈起
Angular、vue和react都是JavaScript框架（就它们的SPA开发模式来说），因为它们都是通过js构造出网页所需的一切，无论是创建DOM节点、网页与用户的交互，还是从后端获取数据再动态渲染到页面上来。
这种构造方式的形成经过了一系列漫长的演变，从最初前后端未分离的混合开发，到三大主流框架的产生。
二 最古老的开发模式
前后端未分离的时候，前端只能叫页面仔，主要工作是根据产品提供的原型图1：1还原设计稿，做成纯静态的HTML页面，最多加上少量的js事件交互逻辑就可以了。
然后前端会把做好的静态HTML交给后端，后端拿到HTML文件，只是作个参考，他们会通过后端语言对HTML文件进行改造，把必要的动态数据插入到HTML中，这就是一些模板语法，最常见的比如jsp。
这时候的所有资源都放在后端，客户端发送一个请求，后端把页面组装好了，直接发送给客户端渲染即可。
这样的开发方式持续了一段时间，后端程序员们难免就会抱怨了，因为所有的工作好像都在后端，既要处理复杂的业务逻辑(数据)，还要处理页面逻辑(用户交互、数据渲染)，太累了！
有没有什么方法可以让前端去处理页面逻辑呢？这本来就应该是他们的工作呀！
三 前后端分离的开发模式
不久后，Ajax技术的出现，为前后端分离提供了便捷的数据交互方式，它可以让浏览器实现动态局部刷新，也就是说客户端不一定得服务器返回整个HTML页面进行渲染。
以前后端们组装页面所需要的数据，现在可以通过ajax接口返回给浏览器，让浏览器实现动态局部渲染，至于用户交互完全可以都交给JS处理。
程序员们纷纷开始使用ajax技术，用户交互和数据渲染这块的工作逐渐从后端转向了前端。
经过一段时间的发展，所有的页面逻辑都交给了前端来处理，至此终于达到了前后端分离的效果。
四 旧框架的出现
后端们停止了抱怨，但前端们突增的工作量让他们一时间也吃不消，特别是为了满足用户体验，越来越多的用户交互逻辑需要频繁的DOM操作，这十分棘手！
于是JQuery应运而生！它在开发层面极大的简化了DOM操作。
没过多久JQuery的使用就遍布全网，但是时间一长，JQuery的缺点也开始暴漏出来，前端程序员们开始追求更好的开发模式，这催生了新框架的出现。
JQuery的缺点有：（1）频繁的操作DOM，影响性能（2）体积太大，臃肿不堪，有很多用不到的功能，难以维护（3）不能兼容旧版本。
五 新框架的出现
基于JQuery框架的缺点，和v8引擎横空出世，为新框架的诞生提供了合适的土壤！
不想写代码频繁的操作DOM？诞生了虚拟DOM。
事件交互更改数据和动态获取数据，再操作DOM渲染页面太麻烦？诞生了数据驱动。
虚拟DOM、数据驱动的方式要编写大量的js，对js执行效率有很大要求？谷歌v8引擎解决了这个麻烦，它让脚本语言的执行效率得到质的提升，甚至让所有的DOM节点都用js生成，实际上，angular、vue、react也都是这么做的。
在新框架的交互模式里，浏览器向后端发送一个请求，后端返回一个空的HTML页面，页面只有一个根节点作为容器。
页面中所有DOM节点、与用户的交互逻辑、从后端获取的动态数据渲染都通过js完成。
框架只是把这些繁琐复杂的逻辑，比如创建/维护虚拟/真实DOM树、解析模板语法、解析组件等功能，在底层进行了封装，然后提供接口给开发者使用，这些接口就是angular、vue、react官网API。
现在的问题在于，前端开发者需要掌握这些框架的API才能进行开发。
好处也非常明显，掌握框架之后，前后端都能高效的进行开发。
总结
技术的迭代发展总伴随着新东西的出现，从历史的角度来说，框架的诞生是技术发展的必然结果，未来也一定会出现更好的框架，但是无论什么框架的出现，所追求的目标也只有一个，那就是提高开发效率，解放劳动力，这正如程序员的终极目标，不就是代码的重复利用嘛？
