互聯網的飛速發展，催生了不少高薪職業，程序員即是其中佼佼者。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

公衆號：前端食堂

掘金：童歐巴

知乎：童歐巴

這是一個終身學習的男人，他在堅持本身熱愛的事情，歡迎加入前端食堂，和這個男人一塊兒開心的變胖～

「科普」前端工程師簡史