互聯網的飛速發展,催生了不少高薪職業,程序員即是其中佼佼者。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早已不是新聞。無數人被這艘巨輪甩下,無數人前仆後繼地在追趕他。
有懷揣理想的默默努力,有揹負責任的負重前行。更多的,是認清了生活的真相後仍然熱愛它。
代碼不止,奮鬥不息。加油,前端人。
參考資料
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
公衆號:前端食堂
掘金:童歐巴
知乎:童歐巴
這是一個終身學習的男人,他在堅持本身熱愛的事情,歡迎加入前端食堂,和這個男人一塊兒開心的變胖~
推薦閱讀:
在看和轉發是莫大鼓勵❤️
本文分享自微信公衆號 - 前端食堂(webcanteen)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。