前端开发的四个时代

想要预测未来的发展趋势，最好的方式就是先向后看，看一路走来前端开发是如何从由服务端主导的静态网站一步步发展到现在由客户端主导的单页应用，只有了解了过去前端分别在不同的阶段解决了怎样的问题，才能更好地看清楚未来要向哪里去。

黑铁时代 - 插件化

在前端界大名鼎鼎的 jQuery 诞生于 2006 年，那时还没有 Google Chrome，微软刚刚发布了直到现在还在令许多前端开发者头疼的 IE 7。jQuery 作为试图抹平不同浏览器之间 API 差异的先锋进入了人们的视野，并在之后很长的一段时间内占据了 Web 开发领域统治性的地位。那时开发一个网站并不需要先配置一个复杂的脚手架，只需要新建一个 HTML 文件即可，开发者们也远未意识到未来前端开发究竟会复杂到什么样的程度，以页面为单位的开发方式在当时看起来并没有什么问题。

那时还没有人提出组件的概念，基于 jQuery 的 UI 组件都被称为 jQuery 插件（plugin），代表着在任何浏览器环境下都可以做到即插即用。

项目的开发速度完全取决于页面数量的多少及布局的复杂程度，所有的变量都挂载在全局之下，引用的各个插件之间相互独立，这样的开发方式似乎并没有给开发者们留下多少可以优化的空间。

青铜时代 - 模块化

随着 Ajax 等技术的普及，客户端 JavaScript 的代码量也越来越大，开发者们开始无法忍受全局变量带来的命名冲突，各个插件之间虽然相互独立但多个插件之间的依赖关系却也变得越来越复杂。这时前端开发对于模块化的需求开始变得越来越强烈，于是便涌现出了 RequireJS 和 Sea.js 两大专注于解决前端模块化问题的类库，以 Sea.js 发布 1.0 正式版的时间为参考，那时是 2011 年 7 月。

解决了命名空间和文件依赖的问题，前端终于可以轻装上阵，配合着日趋成熟的各种 UI 插件库，这时前端项目的开发速度有了第一次质的提升。

摆脱了全局变量的限制，越来越多的前端插件被沉淀了下来。页面数量虽然依然被作为衡量开发量的一个重要指标，但在开发流程中各个模块之间已经开始了协作，开发一个新页面的工作量也不再完全等于这个页面本身。与此同时，npm 的出现也让这些沉淀下来的前端插件有了栖身之处，却也为今天前端类库小而分散的现状埋下了隐患。

白银时代 - 组件化

在前端模块化进行得如火如荼的同时，由谷歌开发的 AngularJS 也于 2010 年 10 月发布，这是第一次 JavaScript 框架试图接管所有的 DOM 操作。不过，由于在当时过于超前的设计和后续断崖式的升级，AngularJS 一直没能打破 jQuery 在前端开发界的统治地位，直到 2013 年 Facebook 发布 React。

专注于 View 层的 React 虽然提出了 JSX 这样不符合传统前端开发习惯的新概念，但基于虚拟 DOM 的重绘效率确实要比 AngularJS 的脏检查高出一个数量级。这着实吸引了许多前端开发者的目光，也让前端开发真正进入了组件化时代。

摆脱了 DOM 的限制，组件与组件之间的数据传递第一次变得如此轻松，这让开发功能强大的大型复杂组件及沉淀能够覆盖大部分底层需求的 UI 组件库变为了可能。

过去的几年中，以 ant-design、material-ui 等为代表的优秀的开源前端组件库如雨后春笋般冒了出来，MVVM 框架配合其生态内的组件库成为了现代前端开发的标配。与此同时，前端工程化的浪潮也汹涌袭来，以 Babel、webpack 和 TypeScript 等为代表的 JavaScript 增强工具帮助 JavaScript 摆脱了脚本语言的定位，JavaScript 也开始成为编写大型工程项目的一个可选项。

但这时开发者们突然发现，以前只需要打开 Notepad++ 就可以轻松写前端的日子不在了，开始一个前端项目变得异常复杂。在组件库的帮助下，虽然项目的复杂度被大幅降低了，但花在写代码上的时间却一点也没有减少，用组件拼出一个个页面的世界似乎并没有想象中那么美好。

黄金时代 - 专业化

时间来到 2017 年，作为前端组件库界标杆的 ant-design 先后发布了 ant-design-mobile 及 ant-design-pro，淘宝也发布了飞冰（以下称为 ice）。

其中 ant-design-mobile 是一套专注于移动端混合应用开发的前端组件库，现在又推出了 React Native 的版本。曾经在前端开发界流行过一段时间响应式设计的风潮，即一套代码适配所有终端。但慢慢大家发现，一套代码支持所有终端终究只是一个美丽的梦想，移动端和桌面端之间页面尺寸及操作交互的巨大差异，导致二者都需要更专业的解决方案来应对。

如果说 ant-design-mobile 想要解决的是移动端的问题，那么 ant-design-pro 想要解决的则是企业中后台管理系统搭建这样一个问题。这些被抽象出来后针对中后台系统的组件许多并不能够直接用于搭建前台项目，但牺牲了通用性所换来的专业性也代表着前端在向着细分领域的专业化解决方案靠拢。ice 与 ant-design-pro 类似，不同的是 ice 还集成了项目脚手架部分，致力于实现一套纯 GUI 的前端开发模式。

这里我们先按下这些垂直领域的解决方案是否能够解决相应的问题不表，但我们从这些事例中可以看出的趋势是清晰的，那就是：区别于之前大力建设作为前端基础设施的组件库，前端的下一个方向就是要在这些基础设施之上同时向多个细分领域进军，如上面提到的移动端、企业中后台，又如富文本编辑、数据可视化等这些对于专业深度要求更高的领域。

是的，简单来说前端在未来会向着更加专业化的细分领域继续发展。HTML，CSS，JavaScript 三大件依然是前端工程师的立身之本，但除此之外每个前端工程师根据自身所处业务线的不同，都会拥有自己相对来讲更为专精的领域。

而且这些领域并不会局限于某种单纯的技术，而是会更多地和具体业务相结合。

如工民建领域的建筑信息模型（BIM），这里面会涉及到大量的地理信息测绘，业务流程抽象，3D CAD 模型等专业知识，都需要从业人员能够将前端技术附能于这些传统行业，再由这些传统行业中的复杂需求反过来推动前端技术继续向前发展。

比如在一座地铁站的信息模型中，可能会有成千上万个正在运行的设备，设备与设备之间又有着千丝万缕的联系，用 redux 可以搞定这样一个前端应用的状态管理吗？

再比如机器学习中的可视化部分，如果我们将模型训练的部分放在服务端处理的话，对于一个复杂的实时在线的随时更新的模型来说，每秒钟和服务器之间的数据交换量是现在任何一个实时前端应用都无法想象的。这种模型的可视化并不仅仅是一些简单的图表去监控一部分核心数据，而是有可能要和 CNN、KNN、SVM 等专业的机器学习算法相结合，以至于我们现在甚至还无法想象到底什么样的可视化模型是最符合数据科学家监控模型表现的需求的。这中间还有太多的环节没有被打通，还有太多的专业知识没有被联系起来。

在过去我们可能会说前端是数据和产品之间的连接层，但在未来前端可能会成为更多学科知识，业务环节，组织部门之间的连接层。在更多跨领域的知识被打通后，它们就会反过来对前端技术提出更多具体的要求。而前端工程师的任务就是将这些具体的要求抽象为通用的技术解决方案，再反哺给在其他领域有着同样困扰的同行们。

其实自古以来，每一门学科的知识都是在这样的循环中被逐渐生产出来的。知识并不是天才们的奇思妙想，而是在研究具体需求时留下的汗水结晶。

在这个万物互联的时代，有更多的人，场景，知识将需要被更加紧密地联系在一起，而有连接的地方就会有界面，有界面的地方就会有前端。