互聯(lián)網(wǎng)的飛速發(fā)展，催生了很多高薪職業(yè)，程序員便是其中佼佼者。

在程序員群體中，前端崗位以其門檻低（相對其他技術崗位）、工資高（相對非互聯(lián)網(wǎng)行業(yè)）、發(fā)展好（薪酬漲幅高）受到廣大有為打工人的青睞。

這個行業(yè)是做什么的？他是如何發(fā)展起來的？未來還會高速增長么？

這一切還得從互聯(lián)網(wǎng)上古時期的一場戰(zhàn)爭談起。

上古時期

1993年，美國伊利諾伊大學NCSA開發(fā)了Mosaic瀏覽器。該瀏覽器一經(jīng)推出，就成為當時最流行的瀏覽器。一年之后，Mosaic的核心開發(fā)者馬克·安德森在加州創(chuàng)立Mosaic Communication公司，并于同年推出了大受好評的Mosaic Netscape v0.9。

由于伊利諾伊大學擁有Mosaic的商標權，并已將相關技術轉讓給Spyglass Entertainment公司。為了避免可能產(chǎn)生的商標權糾紛，Mosaic Communication公司更名為Netscape Communications，也就是網(wǎng)景。

在瀏覽器這一新興市場一舉拔得頭籌后，網(wǎng)景開始嘗試開發(fā)一套基于瀏覽器的網(wǎng)絡操作系統(tǒng)。這一舉動使PC操作系統(tǒng)領域的霸主微軟嗅到了危險的味道。

1995年，微軟從頭Spyglass Entertainment手中買下Mosaic的授權，以此為基礎開發(fā)了Internet Explorer，大名鼎鼎的IE瀏覽器就此邁上了歷史舞臺。

最終，IE贏得了與網(wǎng)景的斗爭。經(jīng)過這場戰(zhàn)爭，瀏覽器逐漸普及開，互聯(lián)網(wǎng)進入以門戶網(wǎng)站主導的web1.0時代。

在此之后的十年間，又發(fā)生了IE與火狐瀏覽器、IE與谷歌瀏覽器的斗爭。

我們故事的主人公 —— 前端工程師還未登上歷史舞臺。別急，讓我們先來了解些行業(yè)知識。

什么是前端工程師

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

前

前的概念是相對于后的。

當我們在百度搜索“你好”。

后端負責提供“你好”相關的數(shù)據(jù)，前端負責在瀏覽器中將數(shù)據(jù)排版并展示。

如果前端工程師是個畫家，后端工程師就是站在他背后默默告訴他需要畫什么東西的人。正在看本文的你，就是欣賞這幅畫的人。

端

我們剛才以瀏覽器舉例。瀏覽器就是一個端。

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

廣義上講，所有負責在端布局、排版、展示畫面的工程師，都可以稱為前端工程師。

不同的端使用不同編程語言，就像不同畫家屬于不同畫派，印象派畫家當然不會畫古典畫嘍。

其中：

• 在瀏覽器端，使用Javascript語言開發(fā)

• 在IOS端，使用Swift或Objective-C語言開發(fā)

• 在Android端，使用Java語言開發(fā)

由于瀏覽器是歷史最久遠、最出名的端，所以狹義上，我們將：

使用Javascript語言，在瀏覽器端負責展示頁面的工程師，稱為前端工程師

后文所指的前端，都是狹義的概念。

無規(guī)矩不成方圓

如果說前端工程師是畫家，瀏覽器是畫板，那么還需要約定畫家能夠使用的畫筆的規(guī)格，這樣不同的畫家在不同畫板上才能以一致的標準畫畫。

為了推動通用標準的建立，W3C小組成立。

處于商業(yè)上的考量，微軟的IE瀏覽器并沒有完全按照W3C標準實現(xiàn)API。當微軟做下這個決定那一刻，未來前端工程師為了瀏覽器兼容性問題爆肝到黎明的宿命已成定局。

設想這樣一幅景象：

一位畫家要畫一片云，W3C標準規(guī)定各大畫板必須提供筆刷這一工具。

其他畫板都實現(xiàn)了繪畫效果一致的筆刷，IE說：“我不，你打我？我只提供毛筆。”

所以畫家在IE上只能用毛筆窮盡奇技淫巧，模仿筆刷的效果畫云。

這種心情，你細品。

文藝復興時期

時間來到2005年，中國進入以“博客”為代表的Web2.0時代^[1]，百度也在同年赴美掛牌上市。

前端進入文藝復興時期，瀏覽器兼容性仍是亙古不變的話題。

在長久的斗爭中，工程師中的佼佼者、偉大的毛筆畫云老畫家、前端人的卡麗熙Dean Edwrad于2006年創(chuàng)造了jQuery。

jQuery就像一套繪畫工具包，畫家使用jQuery提供的工具繪畫。jQuery內部再針對不同畫板使用畫板提供的工具繪制。通過這種方式抹平了不同瀏覽器兼容性之間的差異。

由于此時前端領域的工作僅僅是繪制簡單靜態(tài)頁面，所以還沒有出現(xiàn)專職的前端工程師。

在前后端高度分化的今日，仍有一些后端工程師對前端工程師的工作報以輕視的態(tài)度，因為他們認為自己用jQuery也能完成前端工作。

第一次工業(yè)革命

根據(jù)第30次《中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告》^[2]，截止12年6月，我國互聯(lián)網(wǎng)普及率達到39.9% 。

從05年到12年，伴隨著互聯(lián)網(wǎng)基礎設施建設的發(fā)展，家庭電腦性能的提高，瀏覽器也在不斷進化，畫家有了更豐富的畫筆。

交互更復雜的網(wǎng)頁應運而生。

2005年12月校內網(wǎng)成立，多少中年人青春歲月的見證者

在以靜態(tài)的門戶網(wǎng)站為代表的web1.0時代，jQuery可以出色的完成任務。但是面對交互更復雜的網(wǎng)頁就顯得力不從心了。

同時，繁榮的互聯(lián)網(wǎng)生態(tài)也對工程師的開發(fā)效率提出了更高要求。

以史為鑒，珍妮紡紗機的出現(xiàn)提高了紡織生產(chǎn)力，預示著第一次工業(yè)革命的開啟。前端領域急需自己的“紡紗機”。

一批有悟性的工程師嘗試將后端行之有效的工作范式遷移到前端。終于，第一代前端框架誕生。

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

前文提到過，jQuery是一套可以抹平瀏覽器兼容性的繪畫工具包。

即使使用了工具包，畫家也必須親自使用工具包內的工具一筆一畫繪制。效率低，面對復雜畫面時還容易出錯。

作為前端界的珍妮紡紗機，框架就像一部繪畫機器，畫家對機器描述這幅畫的樣子，機器使用工具包內的工具完成繪制。

資本迅速捕捉到這次變革蘊含的利益，緊隨Backbone.js，大公司紛紛開發(fā)了各自的前端框架。谷歌開發(fā)了Angular.js，蘋果開發(fā)了Ember.js，微軟開發(fā)了Knockout.js。

框架的出現(xiàn)意味著前端工作復雜性上升。一部分程序員開始專職前端工作。

于是，前端工程師作為一個獨立的崗位被提出。誰也沒有想到，這個由變革而生的職業(yè)，會在變革的道路上越走越遠。

第一次世界大戰(zhàn)

如果審視一個國家的奮斗軌跡，大抵有兩個方向：

• 對內深耕

• 對外擴張

深耕自身領域，從jQuery為代表的工具集到Backbone.js為代表的第一代框架，前端嘗到了奮斗的甜頭。

魯迅曾經(jīng)說過：奮斗只有一次或者無數(shù)次。

著名的程序員問答網(wǎng)站Stack Overflow創(chuàng)始人Jeff Atwood在07年的一篇博文^[3]提出了被后人稱為Atwood定律的觀點：

任何能夠用JavaScript實現(xiàn)的應用系統(tǒng)，最終都必將用JavaScript實現(xiàn)。

作為開疆擴土的宣言，Atwood定律讓前端工程師熱血沸騰。然而，現(xiàn)實是殘酷的。

前文說過，前端的工作是在瀏覽器端使用Javascript語言完成的。在當前，Javascript這門語言只能在瀏覽器中被解析。

這是因為Javascript語言需要由內置于瀏覽器中的Javascript引擎解析為電腦能夠理解的機器碼并執(zhí)行。

前端人遇到了次元壁。

沒想到，僅僅兩年后，Atwood定律第一次應驗，次元壁被打破。破壁人，名叫Ryan Dahl。

Ryan Dahl將谷歌瀏覽器的Javascript引擎（V8引擎）從瀏覽器中取出，并在其之上實現(xiàn)了更多功能，使Javascript擁有了獨立于瀏覽器的運行環(huán)境，這就是Node.js。

理論上，之前需要后端工程師使用傳統(tǒng)后端語言（Java、PHP、Python...）完成的一切工作，前端工程師都可以在Node.js創(chuàng)造的運行環(huán)境中使用Javascript完成。

阻擋前端工程師擴張的，只有他們自己的想象力了。

第二次工業(yè)革命

根據(jù)第35次中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告^[4]，截止2014年，中國手機網(wǎng)民規(guī)模達到85.8%，伴隨著4G普及，中國正式進入移動互聯(lián)網(wǎng)時代。

繁榮的市場催生了更多人才需求。前端工程師作為剛分化出來的新興崗位，門檻較其他存在已久的互聯(lián)網(wǎng)技術崗位低，又享受了互聯(lián)網(wǎng)紅利帶來的高工資，一時入行者眾多。行業(yè)本身也在加速進化。

以“工廠流水線作業(yè)”為代表的效能提升，標志著前端第二次“工業(yè)革命”的到來。

就拿亙古不變的兼容性問題舉例，前端工程師探索出一條行之有效的方法：

書寫完成的Javascript代碼不直接交給瀏覽器運行，而是借由Node.js處理文件的能力，將其中瀏覽器未實現(xiàn)的功能通過當前已有功能來實現(xiàn)，并輸出轉換后的Javascript文件給瀏覽器運行。

這個擁有轉換功能的Node.js工具，就是Babel。

除了Babel，前端流水線上還有很多工具，比如對源代碼進行壓縮混淆的工具uglify，對代碼書寫規(guī)范進行檢查的工具eslint。

這些工具被按需加入流水線的各個環(huán)節(jié)，最終產(chǎn)出的代碼會被打包成瀏覽器能夠識別的代碼。

流水線操作、工程化改革極大的充盈了前端工程師的彈藥庫。當一切都準備就緒，進擊的前端開始第二次擴張。

第二次世界大戰(zhàn)

前端工程師則借助Node.js的能力，開發(fā)后端框架，將前端的勢力范圍擴展到傳統(tǒng)由后端工程師把控的領域。

國內比較有名的包括阿里開源的egg.js和360奇舞團開源的Think.js。

一些大公司的架構逐漸從

前端?-->?后端

過渡為

前端?-->?Node.js中間層?-->?后端

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

時間來到2016年，第一代前端框架淡出舞臺。業(yè)界逐漸形成了第二代前端框架三足鼎立的局面，其中：

• React.js 由Facebook開發(fā)，在三大框架中最接近Javascript

• Vue.js 由華人程序員尤雨溪開發(fā)，以上手簡單著稱

• Angular 由谷歌開發(fā)，由第一代框架Angular.js發(fā)展而來，以大而全著稱

移動互聯(lián)網(wǎng)時代什么崗位最搶手？當然是移動開發(fā)。

前文提到，如果前端框架是繪圖機器，前端工程師的職責就是向這臺機器描述“要繪制的畫面”。

其中“描述”是與端無關的，只有具體的“繪制行為”才與端有關。

前端用熟悉的Javascript描述畫面，再由框架繪制在IOS、Android端，那不就能搶占移動開發(fā)的地盤了么？

這點子就像妙蛙種子吃著妙脆角到了妙妙屋 —— 妙到家了

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

• Facebook基于React.js開發(fā)了React-Native

• Vue.js與阿里合作開發(fā)了weex

• 基于Angular語法Ionic團隊開發(fā)了Ionic

新世界

在前端攻城略地如火如荼進行中，外界環(huán)境悄然發(fā)生了變化。

根據(jù)第40次中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告^[5]，手機網(wǎng)民規(guī)模已經(jīng)由12年的72%提升到17年的96% ，移動互聯(lián)網(wǎng)進入存量市場。

各大互聯(lián)網(wǎng)巨頭早已完成流量入口的把持，當務之急是豐富業(yè)務品類，將用戶的注意力更多保留在自家產(chǎn)品的陣營中。

在這個思想驅動下，中國在技術創(chuàng)新上走在了世界的前沿 —— 小程序誕生了。

從技術上講，如果說前端在各個領域發(fā)展的是擁有各種能力的葫蘆娃，那小程序就是葫蘆娃結合體 —— 葫蘆小金剛。

• 借鑒了React.js的虛擬DOM特性

• 使用前端打包工具webpack

• 使用Javascript內核

• 語法參考Vue.js

可以說，作為一個新興的端，小程序的開發(fā)天生就是為前端工程師準備的。

緊跟微信之后， 百度、阿里、字節(jié)跳動、360、小米、華為紛紛推出自己的小程序。

活在當下

回首最近兩年前端領域最火的概念，無一不是踐行前端工程師“對內深耕、對外擴張”的傳統(tǒng)。

對內深耕：

• Typescript：解決Javascript作為動態(tài)語言書寫太靈活，在大型、復雜應用開發(fā)時缺少束縛的問題。

• 微前端：借鑒后端微服務的理念，將一個應用拆分為多個完備、可復用的子應用。使多個團隊可以在同一個大應用中獨立開發(fā)各自的模塊。提升開發(fā)效率。

螞蟻金服開源的微前端框架 —— qiankun

• Low-Code：低代碼平臺。將一些特定領域（比如營銷活動頁、可視化大屏）的開發(fā)任務抽象為工具，用鼠標拖拽組件就能完成頁面開發(fā)。

對外擴張：

• flutter：由谷歌開發(fā)的移動端框架，目標是寫一份代碼，就能在多個端（主要是IOS、Android）運行。由于其使用的Dart語言與Javascript類似，受到前端青睞。

• serverless：繼Node.js對后端工程師下手后，終于開始對運維工程師下手了。serverless的目標是讓開發(fā)者不需要關注服務器運維，可以專注于業(yè)務邏輯的開發(fā)。

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

Deno

還有很多概念由于當前業(yè)務場景有限，或者門檻、投入產(chǎn)出比等方面的原因，并未普及開。比如Web Components、WebAssembly。

后記

遙想90年代，在互聯(lián)網(wǎng)的發(fā)源地美國看來，我們就是個落后的第三世界國家。

95年，中國第一家互聯(lián)網(wǎng)公司瀛海威^[6]成立。中國互聯(lián)網(wǎng)人也曾發(fā)出這樣的疑問：中國人離信息高速公路還有多遠？

四分之一個世紀過去了，從最初復刻國外成熟互聯(lián)網(wǎng)公司經(jīng)營模式，到發(fā)展中國特色的互聯(lián)網(wǎng)文化，到如今為全世界樹立現(xiàn)代化生活的典范。

一代代中國互聯(lián)網(wǎng)人以其樸素的東方哲學，為這個國家的發(fā)展貢獻力量：越過信用卡時代直接進入移動支付時代、開啟了共享經(jīng)濟大潮、將互聯(lián)網(wǎng)融入衣食住行的每個角落。

時代的一粒灰落在個人頭上就是一座山，在這個變革的行業(yè)，知識以“月”為單位進化。996，007早已不是新聞。無數(shù)人被這艘巨輪甩下，無數(shù)人前仆后繼地在追趕他。

有懷揣理想的默默努力，有背負責任的負重前行。更多的，是認清了生活的真相后仍然熱愛它。

代碼不止，奮斗不息。加油，前端人。

參考資料