作者: [商見曜](https://developer.hs.net/user/19631)

來源： [恆生LIGHT雲社群](https://developer.hs.net/thread/1982)

把握前端開發歷史脈絡

![E7A82937-8ABF-4b8f-A4BB-2E208690E5E1.png](https://developer.hs.net/storage/attachments/2022/01/20/EOFsndIJiKoi8hfhIk0C3iXxKpawCodbuGbtmFQY.png)

[#光源計劃#](https://developer.hs.net/topic/30)

## 前言

當你接觸一個新事物的時候，你應該先去了解它的歷史。

## 前端發展的起源、架構、變遷

### 前端的起源

一切的開始源於 Timothy John Berners-Lee 在 1989 年發表的一份宣告：他在短短十幾頁的宣告中，提出了一個“全球資訊網”的構想 -- 世界上的電腦互相連線起來。這是 Web 的起源。而在他發表這份宣告前，他已經做了一些相關工作了：建立了一個以超文字系統為基礎的專案，方便研究人員分享及更新訊息的原型系統，叫 ENQUIRE。1989 年 3 月，他寫下了他的初步構想，並在 1990 年重新開發配置系統。他使用與 ENQUIRE 系統相似的概念來建立全球資訊網，為此他設計並構建了第一個網頁瀏覽器，他的軟體還可以作為編輯器（稱為 WorldWideWeb，能在 NeXTSTEP 作業系統上執行），他還設計了世界上第一個網頁伺服器，CERN httpd（超文字傳輸協議守護程式的縮寫）。

### 架構

從他的構想與實踐中，我們發現一開始網頁的架構是這樣的：HTML 是內容，http 是傳輸工具，而 URL 是內容的可訪問地址，css 和 JavaScript 一開始是不存在的。而 Web 的架構則很清晰明瞭：網頁與伺服器透過計算機網路連線。

![jgs.png](https://developer.hs.net/storage/attachments/2022/01/20/Y353CiHxK4byQ4UytVlgpAXl0dgMhtUFWZyuXZWX_thumb.png)

### 變遷

前端的變遷看起來是非常有趣的。

自從 1989 年 Web 出現之後，其實並沒有獨立的前端開發崗位，大多數都是後端開發兼任或者設計兼任的。無論 css 和 JavaScript 兩者的出現都沒有改變這一現狀，網頁依然是傻傻的，每次改變都需要同步到後端，然後後端返回一個完整的網頁我們才能更新網頁。

直到一個技術 Ajax 的誕生。雖然在 2000 年的候 IE 就自己實現了 XMLHttpRequest 這個技術，但是它被正確使用和被大眾接受還是在谷歌推出了 Gmail 和 Gmap 這兩款產品的時候。Ajax 的出現標誌著前端獲得了更多的自主權，前端可以做更多的工作，“網頁應用”的概念第一次被提出。這時期一些經典的庫出現了比如 jQuery。

最近的一次變遷這是由蘋果公司造成的 \-\- 他們釋出了 iphone 手機，極大的拔高了使用者體驗的概念，這時候前端的工作職責也更多了，開始出現獨立的“前端開發崗位”。而隨著基於 V8 引擎的 nodejs 出現，前端工具更加豐富，以前後端的一些模組化，工程化等概念也開始引入前端。這時候一些工具和框架開始大行其道，比如 webpack，react，vue 等。

## 前端的工作領域

### 瀏覽器

瀏覽器作為最開始的網頁瀏覽工具，也是 JavaScript 的誕生環境，也是我們日常使用的工具，我們大多數是透過瀏覽器去訪問我們想要去的地方的。而現在的瀏覽器早已不是曾經的“百花齊放”逼得人搞相容性搞到癲狂的時代了，現在的瀏覽器從核心上來說只有三款了（國內的瀏覽器我真不瞭解）：Chromium--Chrome、Opera、edge，Gecko--Firefox，Webkit-Safari。而 chromium 佔比已經達到了 69%（2021 年），實際性的壟斷地位。（而 Safari 在蘋果生態上很難撼動）

### 伺服器

前端在伺服器開發？這句話看起來就很荒謬，但是隨著 nodejs 的出現，這句話就不再荒謬。隨著 nodejs 生態的發展，npm 包管理工具已經是世界上最大的包管理工具了，超過 130 萬個包使用 npm 管理。經典的 nodejs 伺服器框架有 express、koa 等，它們的出現使得只學習 JavaScript 就可以勝任前後端的開發工作，使得“全棧開發”這個概念得到進一步的實踐。

而在 nodejs 出現十年的時候，它的作者 Ryan Dahl 回憶自己在設計 node 的時候有“十大失誤”，並提出 node 的孿生弟弟 deno，全新的 Rust 語言開發，彌補遺憾，值得關注。

### 終端、跨端

終端，一般來說就是 Teminal cli 工具，比如 vue cli，create-react-app 等，這也是前端開發可以選擇的方向。而跨端的話，對於桌面端來說，現在有 electron、NW.js 這兩個比較熱門的框架來作為開發工具，而對於移動端來說，還有 react-native、flutter 等。

## 前端的業務場景

### TO B(business)

b 端一般是面向企業、機構、銀行、政府等，這類業務場景一般是構建平臺，搭建網站，提供服務。使用者上這個平臺的時候可以購買、使用、監控、管理他們的服務，這類業務會有很多業務邏輯要寫，可信度的要求也比較高，這類業務很賺錢。

### TO C(customer)

c 端一般都是面向普通人，或者說專注於人的基本生活習慣，吃喝玩樂、興趣愛好等，它就比較偏向潮流、時尚，極大的提高使用者體驗的地位，這類的業務場景百花齊放，但是核心是使用者體驗，而且搞這類的企業一般比較年輕（可能），會更加以人為本。

### TO D(developer)

d 端就是面向我們程式設計師自己，自產自銷。一般都是為了解決開發痛點，然後自己提出解決方案，為社群開源，獲取名利來持續運營，典型的例子：尤雨溪。這類的要求比較高，但是基礎工資和後續在業內的發展上限是極高的。

## 前端的語言、框架

### wasm

從 js 誕生之後到現在，瀏覽器中能執行的語言就只有 HTML、Css、Js 三門語言，已經持續 20 多年了。但是在 2019 年的年底，wasm 規範透過了社群認證，主流的瀏覽器都已經關於 wasm 達成了一些共識。它脫胎於 asm.js，更加的開放、安全、快速。從此以後，c++/c 等其他語言的模組就能透過編譯為 wasm 模組被瀏覽器執行，也許有一天，我們可以在瀏覽器上執行大型遊戲也說不定？（網速咋辦啊）

### 框架

我們學習一門框架，往往是出現了一些問題然後我們去找解決方案，不經意瞭解這門框架 / 工具可以正好可以解決這個問題。但我建議，當我們去學習一門優秀的框架的時候，我們可以多去了解一些它的作者，瞭解一下作者對這個工具的設計初衷，瞭解這個人的技術願景，因為這種人往往都是顛覆、或者說極大的改變了行業的人，是行業的引領者。以下是一些優秀的框架和他們的作者。  
![3A8A5816-4BC0-41dd-BA05-450D0A282DA6.png](https://developer.hs.net/storage/attachments/2022/01/20/RggOH9OW7Uove3qAitdl7wlsI7BCMb6mq1ASrg42_thumb.png)

## 前端的學習路徑

那很粗淺的瞭解了一下前端發展的歷史，我們該怎麼學習前端呢？這裡我推薦一個網站 [roadmap](https://roadmap.sh/frontend)。以下是一張截圖，圖裡紫色的標是必須掌握的，綠色的標是推薦學習的，灰色的標是什麼時候用到再學就可以的，而沒有標的就...  
![85AB44E3-FF43-4b45-9246-C088355963BC.png](https://developer.hs.net/storage/attachments/2022/01/20/JDZH0o9ZvY4ylGLSVlG9kKlh0j93UKg2Y5rVrau7_thumb.png)

從這張圖裡我們可以看一些基本的知識。學習前端要學習計算機網路知識，這是前後端聯調的基礎；需要學習 html+css+js 經典套餐，這是二十年來的必經之路；學習版本管理 git，因為協作是我們工作順利的保障；學習一個包管理工具 npm/yarn，（不適用 npm 的應該不算應用吧 hh）；學習一種構建工具 webpack 老牌強隊了，esbuild 是超快的速度，而 vite 是新興的產物；學習一門前端框架，react 和 vue 都是一時之選。.. 就像那句話，保持學習。

## 總結

今天向大家介紹了一下前端的起源，它的工作領域，主要的業務場景，發展，和學習路徑，希望大家看完之後有所收穫，對大家理解前端開發這個崗位有所幫助。

## REFERENCES

1.  [wiki-蒂姆·伯納斯-李](https://zh.wikipedia.org/wiki/%E8%92%82%E5%A7%86%C2%B7%E4%BC%AF%E7%BA%B3%E6%96%AF-%E6%9D%8E)
2.  [www三十年](https://www.36kr.com/p/1723347714049)

## Recommended reading

1.  [誕生文獻-Information Management: A Proposal](https://cds.cern.ch/record/369245/files/dd-89-001.pdf)
2.  [深入理解現代瀏覽器](https://github.com/75team/w3c/blob/master/articles/20190603_cncuckoo_%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E7%8E%B0%E4%BB%A3%E6%B5%8F%E8%A7%88%E5%99%A8.md)
3.  [http概覽](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)

## more Information

大家瞭解了以上資訊，對 web 標準的關注可以瞭解一下 web 標準組織

-   [w3c](https://www.w3.org): world wide web consortium
-   [ECMA](https://www.ecma-international.org): Ecma International
-   [WHATWG](https://whatwg.org/): Web Hypertext Application Technology Working Group
-   [IETF](https://www.ietf.org): Internet Engineering Task Force

---

想向技術大佬們多多取經？開發中遇到的問題何處探討？如何獲取金融科技海量資源？

恆生LIGHT雲社群，由恆生電子搭建的金融科技專業社群平臺，分享實用技術乾貨、資源資料、金融科技行業趨勢，擁抱所有金融開發者。

掃描下方小程式二維碼，加入我們！

![](https://oscimg.oschina.net/oscnet/up-2ffc37e7e18e069c0d68ff447ee4acb6751.png)

把握前端開發歷史脈絡

相關文章