每一种技术的出现都是为了解决某一特定的问题，而一种技术的流行兴起除了天时地利便是因为它较好的解决了工程师们普遍都遇到的问题，每一种技术的出现、兴起、更新、淘汰能在一方面展现前端的发展历程并在一定程度上展现其未来的发展趋势，技术的兴衰并不代表技术的优劣，没有最好的技术，只有最符合项目需求的技术。
Ajax的出现
在最初还没有前端的时候，网站的开发全是由一个工程师负责，他们不仅要负责实现底层的服务支持，还要负责将数据拼接进模板并返回给浏览器，浏览器解析模板，将网页展示出来。早期的前端便是负责写模板的。后来，由于ajax的横空出世，使得前端能够独立拿到数据，以及其促进的web2.0的产生、浏览器性能的提升，前端的世界便由此丰富起来，对前端工程师的要求也越来越高。前后端分离后，前端人员需要维护自己的前端项目，而前端项目的开发模式、开发流程随着技术的变迁而不停的改变。
UI框架的出现与jQuery的崛起
刚开始时前端工程师开发的流程是这样的：div+css进行网页页面的布局搭建，使用ajax获取后端数据，使用javascript实现逻辑功能交互，掌握了这些基础的技术便能胜任前端的工作。不过，网页布局(html+css)依然是很麻烦的事，便出现了一系列类似于bootstrap这样的UI框架，能够快速完成网页布局，让开发者将更多的精力放在业务逻辑上。各大浏览器对css与js的兼容性不同，我们常常不得不写多套来兼容不同的浏览器，这也是及其痛苦的事，这一时期不得不提jQuery库，它不仅消除了浏览器之间的差异，还提供了更为优雅简洁的选择器，简化了DOM、样式和属性操作以及绑定事件、事件委托等操作，极大影响了前端开发风格，深受前端程序猿的喜爱，带给前端的影响是空前的，不过jQuery只是简化了前端的很多繁琐的操作，并没有给前端带来质的改变，这种流程式的开发模式依然有明显的弊端，jQuery的各种优点也渐渐有了更好的替代品，jQuery便由此走向没落，但并不是意味着其过时了，现在大部分网站依然使用着jQuery。
模块化与组件化
最初前端的开发模式：html+css搭建布局，使用ajax获取数据，js的进行DOM操作，局部页面发生更新，这样的操作反反复复，这种开发模式不仅效率低下、团队分工合作也常出现各种问题(常见的变量污染)、代码复用性低而耦合度高使得项目迭代推进难度较高，组件化、模块化开发的方式便应运而生，模块化和组件化能够让我们有序的对项目、功能进行拆分、设计、组织，便于开发、维护和团队的分工，提高工作效率。
模块化
最开始开发时，我们会针对每一个业务编写脚本，当遇到了功能一样的业务，复制粘贴是常有的事，这种流程式的开发使得代码的耦合度很高，代码维护、更新难度很大，模块化，见字知意，便是化整为零，将整体分成许多零散的却相互关联模块，举个例子，一辆汽车由很多零件组合而成，制造零件的过程便是模块化开发的过程，而每一个零件相互独立却又相互依赖，我们希望的是每一个子零件能够独立的完成特定的功能，只负责一项任务(高内聚)，每个子零件之间的联系尽可能的少(低耦合)，我们不希望车灯坏了，而使得整个车的其他功能都瘫痪，这便是降低代码耦合度的意义。模块化是一种思想，每个人对其理解都不一样。模块化之前(制造零件之前)，我们要将大整体抽离成一个个模块，在做零件之前，我们至少得知道零件应该有的样子，而抽离的方式视人而定，只要是秉着低耦合高内聚复用性高对提升开发效率有裨益的便是好的，我们常常按业务功能划分，将每一个独立功能封装成独立的模块(降低耦合)，给模块之间的通信联系留以适当的接口(尽可能少)，这种方式便能一定程度上降低耦合，且封装本身就是为了提高代码的复用性。
简单的说模块化就是对特定功能进行封装的代码，能够在需要的地方引用加载进来直接使用，其最大的意义就在于降低代码耦合提高复用。浏览器在进行js脚本下载时会停止对文档的解析，那么如果脚本过多、过重，浏览器则可能失去响应，且一个项目的中我们往往会引入很多js脚本文件，脚本之间往往是有依赖关系的，这便要求我们进行模块化开发必须要遵循一定的规范，js有三大的模块化开发规范：AMD、CMD以及node服务端使用的CommonJs，此外，ES6中推出的(export、import)方法是我们实际开发中常用的模块化方法。AMD与CMD之间最大的差别便是对依赖的执行时间，AMD提倡依赖前置，先加载依赖再执行本模块代码，CMD则是就近原则，在需要时再执行依赖。不过，无论AMD还是CMD，已经过时了。在实际开发中，我们都不可能再引入require.js或sea.js进行开发，我们常用ES6提供的export与import来进行模块的导入和导出。
组件化
个人而言，组件也是对模块化的一种实现，且其比之前定义的模块化做了更多的事，组件将视图UI与逻辑集合起来作为模块，除此之外，组件拥有自己的生命周期，能够在其初始化、状态更新(运行中)以及销毁阶段做相应操作，还拥有自身维护的数据状态，是一种很好的模块的抽离封装的实现，组件化的开发方式也是现在前端开发的主流趋势。而之前提及的模块化规范AMD与CMD最初的目的主要是解决js依赖加载顺序的问题，且其所谓的模块化只是针对业务逻辑而言，将业务逻辑进行拆分，分开管理，相对简单，每一模块只是对某一特定逻辑的封装，直接引入使用即可。不过，无论是模块化还是组件化，都是工程师们为了提高开发效率、降低项目维护成本做的一次次尝试。
Vue与React
目前对组件化开发实现的很好的框架也是现在前端主流的框架有React、Vue以及Angular，Angular作为三大框架中最早的框架，却由于太过笨重，已被越来越多的前端工程师舍弃，React以及Vue则是越来越火热。他们不仅仅实现了组件化的开发模式，更是给前端开发模式带来质的飞越，很多新的概念被提出，虚拟Dom、生命周期、数据双向绑定、单向数据流，不仅如此，围绕Vue以及React产出了更多的优秀框架、技术，vuex、redux、mobx等专门进行数据状态管理，以及针对vue的element-UI与React的antd等优秀组件库，Vue与React的社区生态也在越来越完善。Vue与react为前端做出的贡献让前端开发更有系统性、组织性。除此之外，React-Native与Weex框架的出现，让前端拥有了开发原生应用的能力，使得前端不得不重新定义。
Node.js
NodeJs已经成为提高一个前端工程师竞争力最有力的杀手锏，是前端转为全栈工程师的捷径。node是基于谷歌浏览器V8引擎开发，能够运行javascript的服务端，node最初是为了解决服务端高并发的问题而出现的，而对于前端人员，我们则常使用node作为前后端之间的中间层来提高浏览器性能。我们知道浏览器的性能是很有限的，如果浏览器运行的任务过多，网页则会出现卡顿或者卡死的现象，为了提高网页运行的性能，我们在很多方面都做了很多的尝试，雪碧图整合、静态资源cdn托管、尽可能的减少重绘回流操作(与浏览器渲染机制有关)、减少高频次dom操作(像函数节流与防抖)、压缩js和css文件等等，无非是围绕减少http请求次数和时间以及减少dom有关的操作(提一句，浏览器的性能极大的受到dom操作次数的影响，不过vue与react用虚拟dom解决了这一问题)。服务端的性能是远高于浏览器的，所以我们尽可能多的将复杂的任务放在服务端运行，减轻浏览器运行的任务的复杂度。而node作为前后端的中间层，我们常利用它做这些操作：node将浏览器需要发送的请求进行合并，代替浏览器将请求发送给后端，再将后端返回的复杂数据进行整合，渲染进html模板，最后将渲染完整的html结构模板返回给浏览器(利于SEO优化)，这种node直接输出给浏览器以html结构渲染页面的方式，极大减少了浏览器的http请求数量和请求时间且不需要浏览器再去拼凑页面，对于大型网站的性能提升是很大的，现在有不少公司招聘node工程师，专程做前后端中间层。
npm与webpack/gulp
前端现在开发离不开的最火热的工具无疑是npm(node提供的包管理工具)与webpack打包工具了，我们现在日常开发离不开这两个工具来进行项目搭建和打包。
