互联网的飞速发展，催生了不少高薪职业，程序员即是其中佼佼者。html

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

这个行业是作什么的？他是如何发展起来的？将来还会高速增加么？webpack

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

上古时期

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

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

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

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

最终，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时代^[1]，百度也在同年赴美挂牌上市。

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

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

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

因为此时前端领域的工做仅仅是绘制简单静态页面，因此尚未出现专职的前端工程师。

在先后端高度分化的今日，仍有一些后端工程师对前端工程师的工做报以轻视的态度，由于他们认为本身用jQuery也能完成前端工做。

第一次工业革命

根据第30次《中国互联网络发展情况统计报告》^[2]，截止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年的一篇博文^[3]提出了被后人称为Atwood定律的观点：

任何可以用JavaScript实现的应用系统，最终都必将用JavaScript实现。

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

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

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

前端人遇到了次元壁。

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

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

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

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

第二次工业革命

根据第35次中国互联网络发展情况统计报告^[4]，截止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次中国互联网络发展情况统计报告^[5]，手机网民规模已经由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年，中国第一家互联网公司瀛海威^[6]成立。中国互联网人也曾发出这样的疑问：中国人离信息高速公路还有多远？

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

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

时代的一粒灰落在我的头上就是一座山，在这个变革的行业，知识以“月”为单位进化。996，007早已不是新闻。无数人被这艘巨轮甩下，无数人前仆后继地在追赶他。

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

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

参考资料

[1]

Web2.0时代: http://www.cac.gov.cn/2009-06/04/c_126500390.htm

[2]

《中国互联网络发展情况统计报告》: https://www.baidu.com/link?url=O5X-DeUX-mfF6n2Dlo02u0aT2iaKT5wl84477x-Fg6En2SF_J1NqXHr1kYtULR_3UFCUZea21vGktspKv45lZq&wd=&eqid=dc4f1e7e00053778000000035fbcd818

[3]

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

[4]

第35次中国互联网络发展情况统计报告: http://www.cac.gov.cn/2015-02/03/c_1114222357.htm

[5]

第40次中国互联网络发展情况统计报告: http://www.cac.gov.cn/2017-08/04/c_1121427728.htm

[6]

瀛海威: https://baike.baidu.com/item/%E7%80%9B%E6%B5%B7%E5%A8%81/10999687?fr=aladdin

[7]

网景的发展简史: https://www.cnblogs.com/nixg/p/13997898.html

[8]

前端开发 20 年变迁史: https://www.sohu.com/a/318137316_115128

公众号：前端食堂

掘金：童欧巴

知乎：童欧巴

这是一个终身学习的男人，他在坚持本身热爱的事情，欢迎加入前端食堂，和这个男人一块儿开心的变胖～

「科普」前端工程师简史