互联网的飞速发展，催生了很多高薪职业，程序员便是其中佼佼者。

在程序员群体中，前端岗位以其门槛低（相对其他技术岗位）、工资高（相对非互联网行业）、发展好（薪酬涨幅高）受到广大有为打工人的青睐。

这个行业是做什么的？他是如何发展起来的？未来还会高速增长么？

这一切还得从互联网上古时期的一场战争谈起。

上古时期

1993年，美国伊利诺伊大学NCSA开发了Mosaic浏览器。该浏览器一经推出，就成为当时最流行的浏览器。一年之后，Mosaic的核心开发者马克·安德森在加州创立Mosaic Communication公司，并于同年推出了大受好评的Mosaic Netscape v0.9。

由于伊利诺伊大学拥有Mosaic的商标权，并已将相关技术转让给Spyglass Entertainment公司。为了避免可能产生的商标权纠纷，Mosaic Communication公司更名为Netscape Communications，也就是网景。

在浏览器这一新兴市场一举拔得头筹后，网景开始尝试开发一套基于浏览器的网络操作系统。这一举动使PC操作系统领域的霸主微软嗅到了危险的味道。

1995年，微软从头Spyglass Entertainment手中买下Mosaic的授权，以此为基础开发了Internet Explorer，大名鼎鼎的IE浏览器就此迈上了历史舞台。

最终，IE赢得了与网景的斗争。经过这场战争，浏览器逐渐普及开，互联网进入以门户网站主导的web1.0时代。

在此之后的十年间，又发生了IE与火狐浏览器、IE与谷歌浏览器的斗争。

我们故事的主人公 —— 前端工程师还未登上历史舞台。别急，让我们先来了解些行业知识。

什么是前端工程师

我们需要了解“前”和“端”是什么。

前

前的概念是相对于后的。

当我们在百度搜索“你好”。

后端负责提供“你好”相关的数据，前端负责在浏览器中将数据排版并展示。

如果前端工程师是个画家，后端工程师就是站在他背后默默告诉他需要画什么东西的人。正在看本文的你，就是欣赏这幅画的人。

端

我们刚才以浏览器举例。浏览器就是一个端。

屏幕前的你可能是在微信中看的这篇文章，微信也是一个端。同理，IOS、Android、windows等都是端。

广义上讲，所有负责在端布局、排版、展示画面的工程师，都可以称为前端工程师。

不同的端使用不同编程语言，就像不同画家属于不同画派，印象派画家当然不会画古典画喽。

其中：

• 在浏览器端，使用Javascript语言开发

• 在IOS端，使用Swift或Objective-C语言开发

• 在Android端，使用Java语言开发

由于浏览器是历史最久远、最出名的端，所以狭义上，我们将：

使用Javascript语言，在浏览器端负责展示页面的工程师，称为前端工程师

后文所指的前端，都是狭义的概念。

无规矩不成方圆

如果说前端工程师是画家，浏览器是画板，那么还需要约定画家能够使用的画笔的规格，这样不同的画家在不同画板上才能以一致的标准画画。

为了推动通用标准的建立，W3C小组成立。

处于商业上的考量，微软的IE浏览器并没有完全按照W3C标准实现API。当微软做下这个决定那一刻，未来前端工程师为了浏览器兼容性问题爆肝到黎明的宿命已成定局。

设想这样一幅景象：

一位画家要画一片云，W3C标准规定各大画板必须提供笔刷这一工具。

其他画板都实现了绘画效果一致的笔刷，IE说：“我不，你打我？我只提供毛笔。”

所以画家在IE上只能用毛笔穷尽奇技淫巧，模仿笔刷的效果画云。

这种心情，你细品。

文艺复兴时期

时间来到2005年，中国进入以“博客”为代表的Web2.0时代，百度也在同年赴美挂牌上市。

前端进入文艺复兴时期，浏览器兼容性仍是亘古不变的话题。

在长久的斗争中，工程师中的佼佼者、伟大的毛笔画云老画家、前端人的卡丽熙Dean Edwrad于2006年创造了jQuery。

jQuery就像一套绘画工具包，画家使用jQuery提供的工具绘画。jQuery内部再针对不同画板使用画板提供的工具绘制。通过这种方式抹平了不同浏览器兼容性之间的差异。

由于此时前端领域的工作仅仅是绘制简单静态页面，所以还没有出现专职的前端工程师。

在前后端高度分化的今日，仍有一些后端工程师对前端工程师的工作报以轻视的态度，因为他们认为自己用jQuery也能完成前端工作。

第一次工业革命

根据第30次《中国互联网络发展状况统计报告》，截止12年6月，我国互联网普及率达到39.9% 。

从05年到12年，伴随着互联网基础设施建设的发展，家庭电脑性能的提高，浏览器也在不断进化，画家有了更丰富的画笔。

交互更复杂的网页应运而生。

2005年12月校内网成立，多少中年人青春岁月的见证者

在以静态的门户网站为代表的web1.0时代，jQuery可以出色的完成任务。但是面对交互更复杂的网页就显得力不从心了。

同时，繁荣的互联网生态也对工程师的开发效率提出了更高要求。

以史为鉴，珍妮纺纱机的出现提高了纺织生产力，预示着第一次工业革命的开启。前端领域急需自己的“纺纱机”。

一批有悟性的工程师尝试将后端行之有效的工作范式迁移到前端。终于，第一代前端框架诞生。

其中的佼佼者，便是Backbone.js。

前文提到过，jQuery是一套可以抹平浏览器兼容性的绘画工具包。

即使使用了工具包，画家也必须亲自使用工具包内的工具一笔一画绘制。效率低，面对复杂画面时还容易出错。

作为前端界的珍妮纺纱机，框架就像一部绘画机器，画家对机器描述这幅画的样子，机器使用工具包内的工具完成绘制。

资本迅速捕捉到这次变革蕴含的利益，紧随Backbone.js，大公司纷纷开发了各自的前端框架。谷歌开发了Angular.js，苹果开发了Ember.js，微软开发了Knockout.js。

框架的出现意味着前端工作复杂性上升。一部分程序员开始专职前端工作。

于是，前端工程师作为一个独立的岗位被提出。谁也没有想到，这个由变革而生的职业，会在变革的道路上越走越远。

第一次世界大战

如果审视一个国家的奋斗轨迹，大抵有两个方向：

• 对内深耕

• 对外扩张

深耕自身领域，从jQuery为代表的工具集到Backbone.js为代表的第一代框架，前端尝到了奋斗的甜头。

鲁迅曾经说过：奋斗只有一次或者无数次。

著名的程序员问答网站Stack Overflow创始人Jeff Atwood在07年的一篇博文提出了被后人称为Atwood定律的观点：

作为开疆扩土的宣言，Atwood定律让前端工程师热血沸腾。然而，现实是残酷的。

前文说过，前端的工作是在浏览器端使用Javascript语言完成的。在当前，Javascript这门语言只能在浏览器中被解析。

这是因为Javascript语言需要由内置于浏览器中的Javascript引擎解析为电脑能够理解的机器码并执行。

前端人遇到了次元壁。

没想到，仅仅两年后，Atwood定律第一次应验，次元壁被打破。破壁人，名叫Ryan Dahl。

Ryan Dahl将谷歌浏览器的Javascript引擎（V8引擎）从浏览器中取出，并在其之上实现了更多功能，使Javascript拥有了独立于浏览器的运行环境，这就是Node.js。

理论上，之前需要后端工程师使用传统后端语言（Java、php、Python...）完成的一切工作，前端工程师都可以在Node.js创造的运行环境中使用Javascript完成。

阻挡前端工程师扩张的，只有他们自己的想象力了。

第二次工业革命

根据第35次中国互联网络发展状况统计报告，截止2014年，中国手机网民规模达到85.8%，伴随着4G普及，中国正式进入移动互联网时代。

繁荣的市场催生了更多人才需求。前端工程师作为刚分化出来的新兴岗位，门槛较其他存在已久的互联网技术岗位低，又享受了互联网红利带来的高工资，一时入行者众多。行业本身也在加速进化。

以“工厂流水线作业”为代表的效能提升，标志着前端第二次“工业革命”的到来。

就拿亘古不变的兼容性问题举例，前端工程师探索出一条行之有效的方法：

书写完成的Javascript代码不直接交给浏览器运行，而是借由Node.js处理文件的能力，将其中浏览器未实现的功能通过当前已有功能来实现，并输出转换后的Javascript文件给浏览器运行。

这个拥有转换功能的Node.js工具，就是Babel。

除了Babel，前端流水线上还有很多工具，比如对源代码进行压缩混淆的工具uglify，对代码书写规范进行检查的工具eslint。

这些工具被按需加入流水线的各个环节，最终产出的代码会被打包成浏览器能够识别的代码。

流水线操作、工程化改革极大的充盈了前端工程师的弹药库。当一切都准备就绪，进击的前端开始第二次扩张。

第二次世界大战

前端工程师则借助Node.js的能力，开发后端框架，将前端的势力范围扩展到传统由后端工程师把控的领域。

国内比较有名的包括阿里开源的egg.js和360奇舞团开源的Think.js。

一些大公司的架构逐渐从

前端 --> 后端

过渡为

前端 --> Node.js中间层 --> 后端

在其他领域前端也是花式煊技。

时间来到2016年，第一代前端框架淡出舞台。业界逐渐形成了第二代前端框架三足鼎立的局面，其中：

• React.js 由Facebook开发，在三大框架中最接近Javascript

• Vue.js 由华人程序员尤雨溪开发，以上手简单著称

• Angular 由谷歌开发，由第一代框架Angular.js发展而来，以大而全著称

移动互联网时代什么岗位最抢手？当然是移动开发。

前文提到，如果前端框架是绘图机器，前端工程师的职责就是向这台机器描述“要绘制的画面”。

其中“描述”是与端无关的，只有具体的“绘制行为”才与端有关。

前端用熟悉的Javascript描述画面，再由框架绘制在IOS、Android端，那不就能抢占移动开发的地盘了么？

这点子就像妙蛙种子吃着妙脆角到了妙妙屋 —— 妙到家了

于是，基于三大框架，诞生了可以在其他端（IOS、Android、windows、Mac...）绘制画面的工具。

• Facebook基于React.js开发了React-Native

• Vue.js与阿里合作开发了weex

• 基于Angular语法Ionic团队开发了Ionic

新世界

在前端攻城略地如火如荼进行中，外界环境悄然发生了变化。

根据第40次中国互联网络发展状况统计报告，手机网民规模已经由12年的72%提升到17年的96% ，移动互联网进入存量市场。

各大互联网巨头早已完成流量入口的把持，当务之急是丰富业务品类，将用户的注意力更多保留在自家产品的阵营中。

在这个思想驱动下，中国在技术创新上走在了世界的前沿 —— 小程序诞生了。

从技术上讲，如果说前端在各个领域发展的是拥有各种能力的葫芦娃，那小程序就是葫芦娃结合体 —— 葫芦小金刚。

• 借鉴了React.js的虚拟DOM特性

• 使用前端打包工具webpack

• 使用Javascript内核

• 语法参考Vue.js

可以说，作为一个新兴的端，小程序的开发天生就是为前端工程师准备的。

紧跟微信之后， 百度、阿里、字节跳动、360、小米、华为纷纷推出自己的小程序。

活在当下

回首最近两年前端领域最火的概念，无一不是践行前端工程师“对内深耕、对外扩张”的传统。

对内深耕：

• Typescript：解决Javascript作为动态语言书写太灵活，在大型、复杂应用开发时缺少束缚的问题。

• 微前端：借鉴后端微服务的理念，将一个应用拆分为多个完备、可复用的子应用。使多个团队可以在同一个大应用中独立开发各自的模块。提升开发效率。

字节跳动开源的微前端框架 —— qiankun

• Low-Code：低代码平台。将一些特定领域（比如营销活动页、可视化大屏）的开发任务抽象为工具，用鼠标拖拽组件就能完成页面开发。

对外扩张：

• flutter：由谷歌开发的移动端框架，目标是写一份代码，就能在多个端（主要是IOS、Android）运行。由于其使用的Dart语言与Javascript类似，受到前端青睐。

• serverless：继Node.js对后端工程师下手后，终于开始对运维工程师下手了。serverless的目标是让开发者不需要关注服务器运维，可以专注于业务逻辑的开发。

• Deno：Node.js之父的新作品

Deno

还有很多概念由于当前业务场景有限，或者门槛、投入产出比等方面的原因，并未普及开。比如Web Components、WebAssembly。

后记

遥想90年代，在互联网的发源地美国看来，我们就是个落后的第三世界国家。

95年，中国第一家互联网公司瀛海威成立。中国互联网人也曾发出这样的疑问：中国人离信息高速公路还有多远？

四分之一个世纪过去了，从最初复刻国外成熟互联网公司经营模式，到发展中国特色的互联网文化，到如今为全世界树立现代化生活的典范。

一代代中国互联网人以其朴素的东方哲学，为这个国家的发展贡献力量：越过信用卡时代直接进入移动支付时代、开启了共享经济大潮、将互联网融入衣食住行的每个角落。

时代的一粒灰落在个人头上就是一座山，在这个变革的行业，每年知识都会进化一遍。 996，007早已不是新闻。 无数人被这艘巨轮甩下，无数人前仆后继地在追赶他。

有怀揣理想的默默努力，有背负责任的负重前行。更多的，是认清了生活的真相后仍然热爱它。

代码不止，奋斗不息。加油，前端人。

参考资料

[1] Web2.0时代: www.cac.gov.cn/2009-06/04/…

[2] 《中国互联网络发展状况统计报告》: www.baidu.com/link?url=O5…

[3] 博文: [1]http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html

[4] 第35次中国互联网络发展状况统计报告: www.cac.gov.cn/2015-02/03/…

[5] 第40次中国互联网络发展状况统计报告: www.cac.gov.cn/2017-08/04/…

[6] 瀛海威: baike.baidu.com/item/%E7%80…

[7] 网景的发展简史: www.cnblogs.com/nixg/p/1399…

[8] 前端开发 20 年变迁史: www.sohu.com/a/318137316…