萌芽

记得，在刚接触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年的变化会发生什么，我们都不知道。所以，你何必苦苦哀叹之后的世界会如何发展，不如享受当下前端技术的发展带来的喜悦和成果吧！

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