「科普」前端工程师简史

前端桃园

共 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与谷歌浏览器的斗争。

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

什么是前端工程师

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

的概念是相对于的。

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

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

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

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

屏幕前的你可能是在微信中看的这篇文章,微信也是一个。同理,IOSAndroidwindows等都是

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

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

其中:

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

  • IOS端,使用SwiftObjective-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描述画面,再由框架绘制在IOSAndroid端,那不就能抢占移动开发的地盘了么?

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


于是,基于三大框架,诞生了可以在其他(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:由谷歌开发的移动端框架,目标是写一份代码,就能在多个(主要是IOSAndroid)运行。由于其使用的Dart语言与Javascript类似,受到前端青睐。

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

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

Deno

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

后记

遥想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




推荐阅读




我的公众号能带来什么价值?(文末有送书规则,一定要看)

每个前端工程师都应该了解的图片知识(长文建议收藏)

为什么现在面试总是面试造火箭?

浏览 60
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报