靈感之源 <BR> <b><a rel="nofollow noopener" href="http://www.xnlab.com"><font color=red style="font-size:32">新產(chǎn)品發(fā)布：智能網(wǎng)絡(luò)資源系統(tǒng)</font></a></b>

這個(gè)Web前端開(kāi)發(fā)技術(shù)棧，大約20個(gè)層級(jí)，大約100個(gè)技術(shù)點(diǎn)，從底層一直到最頂層： 瀏覽器， 渲染引擎、JavaScript引擎， HTML/JavaScript/CSS三支柱， 編輯器， 編譯任務(wù)， 編譯工具， 打包、調(diào)試、質(zhì)量， 測(cè)試， JS基礎(chǔ)類庫(kù)， JS類庫(kù)， UI框架， CSS預(yù)處理器， 模板， 現(xiàn)代化， 安全/模式， 中間語(yǔ)言， 跨平臺(tái)解決方案 等100多個(gè)技術(shù)點(diǎn)

前言

互聯(lián)網(wǎng)建立50多年了，網(wǎng)站開(kāi)發(fā)技術(shù)日新月異，但web前端始終離不開(kāi)瀏覽器，最終還是HTML+JavaScript+CSS這3個(gè)核心，圍繞這3個(gè)核心而開(kāi)發(fā)出來(lái)大量技術(shù)框架/解決方案。

我從2000年初開(kāi)始做網(wǎng)站開(kāi)發(fā)，使用的技術(shù)不斷迭代，一些消失了，更多的出現(xiàn)了。

最近寫過(guò)  .NET技術(shù)大系概覽 （迄今為止最全的.NET技術(shù)棧） ，相信很多網(wǎng)友感嘆掌握的.NET技術(shù)遠(yuǎn)沒(méi)有這個(gè)技術(shù)棧里面所描述的多。

 

爆棧三部曲

•  Web前端開(kāi)發(fā)大系概覽 （前端開(kāi)發(fā)技術(shù)棧） ，包含大約180個(gè)技術(shù)點(diǎn)
•  數(shù)據(jù)庫(kù)開(kāi)發(fā)大系技術(shù)棧 （300多技術(shù)點(diǎn)）
•  .NET技術(shù)大系概覽 （迄今為止最全的.NET技術(shù)棧） 

問(wèn)題

大家是否想過(guò)：

• Web前端開(kāi)發(fā)究竟包含哪些技術(shù)呢？
• 我所掌握的技術(shù)這個(gè)子集，在Web前端技術(shù)大系這個(gè)超集里面占的比例是多少呢？
• 我究竟還沒(méi)有掌握多少Web前端技術(shù)呢？
• 面試的時(shí)候會(huì)考哪些技術(shù)呢？

相信很多網(wǎng)友看過(guò)我之前寫的.NET技術(shù)大系概覽 （迄今為止最全的.NET技術(shù)棧），一個(gè)簡(jiǎn)單易懂的棧圖可以概括.NET這個(gè)龐大的技術(shù)生態(tài)圈里面基礎(chǔ)技術(shù)：

 

然后我也寫了數(shù)據(jù)庫(kù)開(kāi)發(fā)大系技術(shù)棧 （300多技術(shù)點(diǎn)），一個(gè)簡(jiǎn)單易懂的棧圖可以概括數(shù)據(jù)庫(kù)這個(gè)龐大的技術(shù)生態(tài)圈里面基礎(chǔ)技術(shù)：

 

那么，Web前端開(kāi)發(fā)是否也應(yīng)該有這樣的技術(shù)棧概覽圖呢？

搜索了很久，沒(méi)有找到一個(gè)符合我要求的“較為全面”地表述Web前端技術(shù)大系的圖表。

互聯(lián)網(wǎng)上來(lái)去都是那幾個(gè)簡(jiǎn)單的，譬如這個(gè)：

 

 

或者這個(gè)：

 

 或者這個(gè)：

 

 

不過(guò)這些都遠(yuǎn)遠(yuǎn)沒(méi)有高度概括整個(gè)Web前端開(kāi)發(fā)技術(shù)，和我需要的不一樣。

 

 

Web前端開(kāi)發(fā)技術(shù)棧

現(xiàn)在流行一個(gè)說(shuō)法，是Full Stack （全棧），簡(jiǎn)單地說(shuō)是萬(wàn)金油，說(shuō)得體面一點(diǎn)就是前端、后臺(tái)、存儲(chǔ)、架構(gòu)等都懂，我覺(jué)得我不是全棧，而是爆棧(stack overflow)，開(kāi)玩笑了。。。。

 

這個(gè)Web前端開(kāi)發(fā)技術(shù)棧，大約20個(gè)層級(jí)，大約100個(gè)技術(shù)點(diǎn)，從底層一直到最頂層：

• 瀏覽器
• 渲染引擎、JavaScript引擎
• HTML/JavaScript/CSS三支柱
• 編輯器
• 編譯任務(wù)
• 編譯工具
• 打包、調(diào)試、質(zhì)量
• 測(cè)試
• JS基礎(chǔ)類庫(kù)
• JS類庫(kù)
• UI框架
• CSS預(yù)處理器
• 模板
• 現(xiàn)代化
• 安全/模式
• 中間語(yǔ)言
• 跨平臺(tái)解決方案

這個(gè)圖表里的分類未必準(zhǔn)確，相關(guān)技術(shù)也難免會(huì)有遺漏，歡迎大家指點(diǎn)以便不斷改進(jìn)。

 

Web前端技術(shù)實(shí)在太繁多限于篇幅，，這里沒(méi)有羅列一些技術(shù)。

 

以下是預(yù)覽圖：

 

 

因?yàn)閮?nèi)容太多，要看完整技術(shù)棧圖的，可以訪問(wèn)GitHub。

 

GitHub開(kāi)源

在GitHub開(kāi)源了：WebFrontEndStack

 

交互式瀏覽

點(diǎn)擊 這里 查看基于HTML的交互式圖示 (鼠標(biāo)拖動(dòng)/滾輪縮放)