WEB前端演化

VUE前世今身

vue的作者尤雨溪(Evan You)，无锡人，复旦附中，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职于纽约Google Creative Lab。同时还加盟阿里巴巴Weex团队，作为技术顾问。2015年的时候花了两天时间，打造了一个HTML5版的Clear。再某群讨论的时候，说vue是他2014年的时候花了三天时间搭的框架。现在经过版本迭代官方现在2.x版本了。vue-cli已经到3.0版本了。

vue属于渐进式前端框架，这样你可以再现有的成品项目直接使用，也可以依托vue成熟的体系，讲vuex，vue-router，core之类的都应用进去。

前端思想变化

几年前，前端俗称切图仔。主要就是html+css+js。把设计给的效果图写成代码，调试好浏览器兼容性（那时候万恶的IE6啊，现在依然是万恶的IE啊），然后丢给后端，后端将PHP，JSP各种后端语言做嵌套。基本上不存在什么逻辑上问题，基本上就是写什么，显什么。不停的在设置这里多大，多高，多宽，什么颜色等等

后来有了JQ，可以方便的操作各种DOM，各种特效满天飞的东东如雨后春笋啊。前端开始分离层级了。有专门切图的和比较高级的专门写动效，插件的。普通前端写各种炫酷特效，只要去网站上现成的jq贴上去，ok，妥妥的。这时候，dom和里面的元素更好更容易的链接起来了。JQ可以说是一家独大的引领了一个前端时代啊。

随着最近几年更新，HTML+CSS+JS这三剑客也都各种鸟枪换炮。HTML=>HTML5 CSS=>CSS3 JS的es2,3=>es6。各种新技术层出不穷，浏览器大有想要统治一切的野心。谷歌就开发了云操作系统，所有的应用程序软件都可以在浏览器实现，虽然现在没有占据多少市场份额，但是对应的技术却…… 在浏览器上做网游、创作软件、各种3D、vr等等都可以再浏览器实现了（扯远了）

这时候三大前端框架火起来了，angular、react、vue。现在的前端框架思想变成MVVM架构。分离的更加彻底。其实类似于当初需要操作dom的部分，也不需要操心了。

演化过程：显示什么就是什么 =》 告诉你改啥就改啥 =》 你自己看着我，我改你自己跟着改。

angular、react、vue

三大框架比较，扒一段。不过这个都是去年的，现在其实中间界限已经越来越模糊了。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。它有以下的特性：1.声明式设计：React采用声明范式，可以轻松描述应用。2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活：React可以与已知的库或框架很好地配合。优点：1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点：React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。它有以下的特性：1.轻量级的框架2.双向数据绑定3.指令4.插件化优点：1. 简单：官方文档很清晰，比 Angular 简单易学。2. 快速：异步批处理方式更新 DOM。3. 组合：用解耦的、可复用的组件组合你的应用程序。4. 紧凑：~18kb min+gzip，且无依赖。5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。缺点：1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。3. 不支持IE8

Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。它有以下的特性：1.良好的应用程序结构2.双向数据绑定3.指令4.HTML模板5.可嵌入、注入和测试优点：1. 模板功能强大丰富，自带了极其丰富的angular指令。2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；3. 自定义指令，自定义指令后可以在项目中多次使用。4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。缺点：1. angular 入门很容易 但深入后概念很多, 学习中较难理解.2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.5. DI 依赖注入 如果代码压缩需要显示声明.

 

vue组件化

现在前端框架允许你将页面拆分成一个一个组件，每个组件都单独写你自己的html css js。

写后端程序的有没有很熟悉。没错，前端也进入了可以拆分组件，面向对象的时代。当年后端程序员难道前端切好的图时候干的第一件事儿是啥，就是拆分，头部，尾部，侧边栏等等。现在这些都可以在前端做了。

前后端的关系

自动nodejs的出现，使用js脚本语言，也可以进行后端的搭建编写。便有人讲，前端一统天下了。曾经也和朋友讨论过这个问题，其实nodejs虽然使用js编写了服务端脚本，其实已经是后端内容了，只是语言不同而已。

再加上api思想的崛起，其实是前后端都变的专注。后端逐渐演变成一个数据中心，通过资源化、接口化的思想向外提供数据，在提供数据的同时，也根据项目的体量更加专注的去处理高并发、高性能的应对方案，分布式、负载均衡、虚拟化、微服务、消息阵列等等为后端提出更高的要求。前端拿到后端的数据之后，处理web端，APP端，小程序，移动端等多端的呈现问题，逐步演化出了更多新的岗位类型。在技术进步的时代，其实更加细分了职位需求。

 

文末

仅作思想上的理解，欢迎大牛大神来喷，无脑乱骂就请高抬贵足移步他处。

前端发展至今，对前端行业内的人员提出更高的需求。前端纷纷表示天天出新的技术已经学不过来了。

有人在群里面p了一张vue出4.0的消息，就让前端准备刷碗回家卖猪肉了。尤大神亲自辟谣

 

前段路上任重道远，且行且珍惜啊