我经历的前端开发模式进化史

萌芽

记得，在刚接触js那会儿，那时尚未专职的“前端开发”。当时的前端开发工做是由设计师（当时还叫“美工”）来完成的，在这种模式下，设计师须要完成页面的设计、切图、css、html，以及部分js交互的工做。这些完成的工做会成为设计资源的一部分被一并提供给开发人员，因为设计师对css、js了解的颇有限，他们完成的页面代码会有许多问题还须要开发来调整和修改，当时的页面还都是后端同步渲染输出的，基本上大伙儿也只会改改一些js表单验证，经常使用的css属性。因此在这个时期，前端工具、类库、框架是几乎没有的。

崛起

没持续多久，随着web2.0时代的到来，web开发的要求不断提高，ajax慢慢流行起来。为了下降跨浏览器开发的复杂度，不少前端类库（YUI, Dojo, Mootools, Prototype, jQuery）也相继问世，我记得“十几”年前（哈哈）还写过一篇对比这些类库的文章。但最终仍是jQuery以“写的更少，作的更多”，简洁、优雅的设计特色胜出，直到如今还占了大半江山。

这时，web开发模式有了新的变化。原来由设计师完成的工做，已经没法知足需求了。大部分后端开发没有不少精力，也不太喜欢折腾样式或者页面元素操做之类的。一些对ui敏锐的、喜欢这些新事物的后端开发者慢慢把重心移到了“前端”。也有不少公司索性让这些人只负责“前端”的任务，因此，前端工程师也就新鲜出炉了。可是，总体的前端开发模式变化不大，仍然没有好的构建工具出现，前端仍是处在黑暗期。

迷失

虽然市场上出现了不少类库解决了跨浏览器兼容性的问题，但随着业务的复杂度，前端代码和文件愈来愈大，加载性能是个问题。不过，当你意识到这个问题的时候，相应的工具也就出现了。蛋疼的是，当时大部分只是在线压缩代码的工具，因此，开发者须要手动的复制黏贴到压缩代码的站点，而后再复制回来，工做效率极差，就这样的落后模式持续了一大段时间。

不久…… 我发现只要有困难，就会有解决困难的工具出现，这时，由雅虎出品的YUI Compressor问世了。我记得还有其余几个有名的工具，但都没有这个名声响。这个工具能够经过命令行自动压缩代码到指定目录下，很是方便。因此，一时下降了“复制黏贴”可能致使的失误率，效率也提升了很多。

另外，css中大量零散的图片背景资源，也是个性能加载问题，起初也是经过纯手工的方式在ps中本身排版这些图片（css sprites），而后算好他们各自的background-position。固然以后也是出现了在线工具解决了这块难题。

虽然仍是没有摆脱“手工模式”，但明显在工做效率和页面加载性能上已经获得了很大的提高。但仍是存在不少问题，好比：多个文件的合并处理、有多人开发时代码文件的依赖关系。记得当时仍是纯人工约定模块的命名空间，好比Project.Module = {}，但依然很麻烦，并且命名空间也会有被覆盖的风险。

飞速发展

不久后，RequireJS问世了。RequireJS的出现，解决了js文件的依赖问题。前端文件的依赖关系转变为模块依赖，开发体验一会儿上了一个档次。同时，jQuery团队发布了名为Grunt的一款前端构建工具。算得上是真正意义上的第一款前端构建工具，固然以前还有Ant，但Ant实在太难用。

这下前端社区一会儿疯了，再也不须要什么在线压缩工具了，不要再装YUI Compressor了（还依赖Java），感受前端开发一会儿高大上起来，这个时候前端开发们再也不以为本身的小角色了。

你感受这种状态已经知足了？固然不是，前端这帮家伙历来没闲着，要求愈来愈高，感受grunt性能很差使了，就出来个gulp。感受前端搞的腻了，出来个NodeJS。感受NodeJS的包管理器npm很是好用，但浏览器端又不支持commonjs协议，因此又搞了个Bower来发布前端资源，但又不久npm宣布能够发布浏览器使用的包了。这些东西，感受就在这个时期一会儿全冒了出来，整个前端市场欣欣向荣。

超越

当你以为前端世界已经趋于稳定时，整个后端的业务逻辑慢慢向前端转移，只使用jQuery开发已经没法知足业务需求了，对前端开发者的能力要求也愈来愈高。因此，前端很是须要一个框架来解决这些问题。BackboneJS，作为前端MVC框架的鼻祖诞生了，固然其余的相似框架也相继出现，有了前端MVC框架，前端开发者又再一次高大上了，MVC再也不是后端独有的设计模式了，前端开发的价值又上了一个新的台阶。

再次进化

同时，前端构建工具的发展也没闲着。从gulp以后，国内公司的也发明了国有特点构建工具，好比百度的FIS仍是不错的。但随着SPA（单页应用）的崛起，这些构建工具的缺点也凸显出来，好比模块依赖自动查找、文件按需分割，打包性能等等。因此，webpack出现了，虽然webpack是至今为止配置最复杂的前端构建工具，但他的灵活性和插件化，使得webpack一会儿活跃起来，整个前端社区又一次疯狂了。另外加上es6的出现，经过webpack + babel-loader + babel-preset-pulgin，前端开发体验那叫一个爽，固然首先你得先学会es6语法哈。

稳步发展

前端MVC框架的出现，让前端开发的效率提升了很多。但随着业务的复杂度提升，后端又发展为只输出接口给前端，前端又做为整个系统的一个View, 前端MVC、MVVM（Angular1.0）的模式，在灵活多变的View的模式下，显得有些疲惫。因此React的出现也是必然的，组件化，其实就是之前后端（好比ASP.Net组件）玩的一套搬到了前端来实现，随后的Vue也是相似。

结尾

随着es6的发展，组件化思想的盛行，前端技术发展到了史无前例的高度，前端开发者也拥有了无可替代的价值。都说以后再发展下去，前端总有一天会被其余技术代替，可是当今技术的发展变化已经快到你没法预知将来了，5 - 10年的变化会发生什么，咱们都不知道。因此，你何须苦苦哀叹以后的世界会如何发展，不如享受当下前端技术的发展带来的喜悦和成果吧！