「科普」前端工程师简史
共 6333字,需浏览 13分钟
·
2020-12-01 11:06
互联网的飞速发展,催生了很多高薪职业,程序员便是其中佼佼者。
在程序员群体中,前端
岗位以其门槛低(相对其他技术岗位)、工资高(相对非互联网行业)、发展好(薪酬涨幅高)受到广大有为打工人的青睐。
这个行业是做什么的?他是如何发展起来的?未来还会高速增长么?
这一切还得从互联网上古时期的一场战争谈起。
上古时期
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时代[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早已不是新闻。无数人被这艘巨轮甩下,无数人前仆后继地在追赶他。
有怀揣理想的默默努力,有背负责任的负重前行。更多的,是认清了生活的真相后仍然热爱它。
代码不止,奋斗不息。加油,前端人。
参考资料
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
推荐阅读