一份用于了解大量激烈競爭的現(xiàn)代前端技術(shù)使用、關(guān)系以及趨勢的實驗性報告。

是否考慮過別人是如何開發(fā)應(yīng)用程序的前端的呢？

我的初始目標(biāo)是想構(gòu)建一個用于記錄前端技術(shù)的模板。為什么這件事非常重要呢？因為，如果你打算為你的公司、合作伙伴以及合約開發(fā)者制定一個標(biāo)準(zhǔn)，你可能需要這樣一個模板記錄你所使用的技術(shù)。為此，我做了一個關(guān)于前端技術(shù)使用狀況調(diào)查。針對最基本的前端技術(shù)，我試著設(shè)計了一個問卷。通過 Twitter，在大約一天時間里，我收到170個反饋，這些反饋均來自各類組織、大企業(yè)和初創(chuàng)公司的前端開發(fā)者。盡管不算多，但還不壞?；蛟S Smashing Magazine 可以找到更多的人重新調(diào)查一下。

此外，我添加了一些參考過谷歌趨勢的觀點。對于這個略具代表性的結(jié)果來說，這些趨勢似乎并不是非?？煽?，但是它們可以給你一些額外的關(guān)于總體趨勢和時間關(guān)系的視角。請不要對此太過認真，這并不是一項科學(xué)研究。感謝你們參與調(diào)查，感謝你們的幫助。這項報告的詳細信息在這里。

前端構(gòu)建工具與開發(fā)組件

建立一套完整的前端技術(shù)及其工具集需要花費大量的精力，這里面的具體細節(jié)甚至可以復(fù)雜到令人煩躁的程度。為此我有意識地做了一些工作，使其限制在常用技術(shù)和工具范圍之內(nèi)。這次調(diào)查問卷的主題列表如下。我知道其中的文本編輯器或者 IDE 并不是特別重要，但我想知道它是否會對其它選項產(chǎn)生影響。

• Editor / IDE
• Version Control System
• CSS Reset / Normalize
• CSS Pre-Processor
• CSS Pre-Processor Add-Ons
• CSS Framework
• Templating
• JS Core Libraries
• JS Framework
• Package Manager
• Build System

Sublime Text 占有份額巨大

在目標(biāo)組中，簡單、靈活、可擴展的編輯器 Sublime Text 擊敗了所有功能齊備的 IDE 如 WebStorm。在 Other 組中，沒有一套編輯器占據(jù)主導(dǎo)地位，Coda 或 Visual Studio 只獲得了很好的選票。查看谷歌趨勢時，你可以看到類似的情景。我不知道最近發(fā)布的 Atom （由 Github 牽頭）或 Brackets （由Adobe 牽頭）在它們成長起來之后，將會是個什么情況。

你選擇用來編輯 JS、CSS 和 HTML 的編輯器或 IDE 是哪一款？

前端編輯器興趣時序圖，谷歌趨勢制作

我只是處于好奇，增加了 Eclipse，讓它和其它新編輯器進行比較。如你所見，它所占比例仍然巨大，但作為一款流行 IDE 來說，它的用戶數(shù)量正在急劇下降。

前端編輯器興趣時序圖（與 Eclipse 比較），谷歌趨勢制作

Git 幾乎是每一位現(xiàn)代程序員的最愛

好吧，這是一個無聊而且意料中的結(jié)果... 尤其在開源軟件項目蓬勃發(fā)展之后（感謝 Github），Git 大有一統(tǒng)版本控制市場的趨勢。

你更喜歡哪一個版本控制系統(tǒng)？

版本管理系統(tǒng)興趣時序圖，谷歌趨勢制作

CSS Reset VS. Normalize

一個不重要但很有趣的問題。不像 CSS Reset 消除所有 CSS 基本樣式，normalize 只是讓 CSS 呈現(xiàn)的外觀在所有瀏覽器上看起來更為一致，并不完全取消它們的特性。

你使用 CSS reset 或 normalize 嗎？

隨著基于標(biāo)準(zhǔn) HTML5 項目的流行，normalize.css 開始成為傳統(tǒng) CSS reset 方法的一個最佳替代品。

CSS reset/normalize 興趣時序圖，谷歌趨勢制作

SASS/SCSS 完勝 LESS

這或許是一個技術(shù)認知問題，按照我的觀點，Compass 的出現(xiàn)使得 Sass/SCSS 的人氣超過了LESS。

你更喜歡使用哪一種 CSS 預(yù)編譯器？

CSS 預(yù)編譯器興趣時序圖，谷歌趨勢制作

Compass 幫助你穿越黑暗

隨著 CSS 預(yù)處理器的崛起， mixin 庫及其最佳實踐的必要性也增長了。Compass 真的很棒，提供了完整的 mixin 機制和更多為 Sass 開發(fā)人員準(zhǔn)備的東西，迄今為止還沒有出現(xiàn)同樣讓 LESS 或者 Stylus 流行起來的預(yù)處理器。

你更喜歡使用哪一種 CSS 預(yù)處理器插件？

到目前為止，唯一增長的預(yù)處理器插件似乎就是基于 Sass 語法的 Compass。

CSS 預(yù)編譯器興趣時序圖，谷歌趨勢制作

不使用 CSS 框架，或者，如果用的話，幾乎非 Bootstrap 莫屬

這還挺有意思，大部分開發(fā)者表示，他們不喜歡使用像 Bootstrap 這樣的 CSS 樣式框架，但即便如此，Bootstrap 仍然占據(jù)了大部分份額。

你更喜歡使用哪一個 CSS 框架？

嗯，真是令人印象深刻！Bootstrap 做了一件了不起的事情。讓我們欣喜的是，Bootstrap 都快成為前端樣式的標(biāo)準(zhǔn)指南了。

CSS 框架興趣時序圖，谷歌趨勢制作

模板化

模板化趨勢（客戶端）仍然是一個比較新的話題，超過三分之一的開發(fā)人員表示，他們目前沒有采用模板化技術(shù)。我覺得這可能是由該問題誤導(dǎo)所致，因此我覺得對客戶端模板進行一些篩選是很有必要。但不管怎樣，Jade 在 Other 類別中占據(jù)了最大的份額。

你更喜歡使用哪一種模板引擎或語法？

由于這個問題存在一定誤導(dǎo)性，因此以下內(nèi)容僅供娛樂?

Web 相關(guān)模板引擎興趣時序圖，谷歌趨勢制作

嘿，現(xiàn)在推薦一個另類模板語言正恰逢其時，它就是 Markdown。一個主要用于編輯和寫作的簡潔易用的標(biāo)記語言?？偟膩砜矗琈arkdown 已經(jīng)具備了成為通用型 HTML 模板的潛力。

Web 相關(guān)模板引擎興趣時序圖（包括 MarkDown），谷歌趨勢制作

jQuery 依然不可或缺

我原先以為類似 Zepto 這樣的庫可能影響更大，但結(jié)果表明，大家更喜歡使用 jQuery，當(dāng)然這樣做會在性能或帶寬上有一定損失，不過還是可以接受的。

你更喜歡使用哪一個 JavaScript 核心類庫？

JavaScript 核心類庫興趣時序圖，谷歌趨勢制作

Angular 在上升，Backbone 下降了（譯注：Angular 似乎有下降的趨勢，React 正在受到越來越多的關(guān)注）

另一個令人難以置信的軟件是 Angular，這真是一個巨大的進步，由于有谷歌的大力支持，它正在成為頭號 JS 框架。但是，你可以在調(diào)查結(jié)果中看到，許多開發(fā)人員仍然沒有采用像 Angular 一樣的大型開發(fā)框架。

你更喜歡使用哪一個 JS 開發(fā)框架？

Backbone 損失了一些關(guān)注度，而 Angular 的人氣卻在不斷增長。Ember 依然保持穩(wěn)定發(fā)展，而 Dojo 在這場競賽中似乎已經(jīng)趨向于沒落。

JS 開發(fā)框架興趣時序圖，谷歌趨勢制作

包管理（依賴管理）

這不是一個特別有用的問題，更像一個是否采用 bower 的問題。但不管怎樣，它給出了npm 和 bower 兩個選項，因此總的來說，包管理的興趣正不斷地增長。npm 用于前端包管理是因為 node 和 bower 的結(jié)合。

你更喜歡使用哪一個包管理器？

包管理器興趣時序圖，谷歌趨勢制作

Grunt vs Gulp

盡管 Web 開發(fā)領(lǐng)域的構(gòu)建系統(tǒng)還比較新，但是對于創(chuàng)建一個專業(yè)的代碼構(gòu)建過程（最小化、連接和測試等方面）來說，還是非常必要的。在這一領(lǐng)域，，Grunt 獲得飛躍式的發(fā)展，迄今為止已經(jīng)匯集了大量資源。Gulp 只是個新手，雖然最近得到了很多關(guān)注，但是 Grunt 仍然在資源豐富性上保持優(yōu)勢，從目來看，Gulp 正迎頭趕上。

你更喜歡使用哪一種構(gòu)建系統(tǒng)？

構(gòu)建系統(tǒng)興趣時序圖，谷歌趨勢制作

如果我們把前端構(gòu)建工具 grunt 和 gulp 與傳統(tǒng)的構(gòu)建工具如 Ant 和 Maven 分別予以比較，其結(jié)果可能會像我們使用 Eclipse 時所看到的那樣，Java 及其相關(guān)技術(shù)仍然收到歡迎。這里的亮點在于，一般來說 Ant 與 Grunt、Gulp 非常相似，而 Maven 則更像是 bower/npm 和 grunt/gulp 的組合，因為它的強大之處恰好在于管理代碼依賴的能力。對于未來的發(fā)展趨勢，我目前還無從得知。

構(gòu)建系統(tǒng)興趣時序圖（包括 ant & maven），谷歌趨勢制作

構(gòu)建任務(wù)

我曾詢問被調(diào)查者，他們在使用 grunt/gulp 構(gòu)建時，通常會做些什么。毫無疑問就是編譯、鏈接和代碼壓縮，但還很多人將其用于圖像優(yōu)化和單元測試。潛在的用途列表可能很長，因為有很多 grunt 和 gulp 插件可供選擇，我在這里就不一一列舉了，我覺得關(guān)于這類信息，其它一些資源可能會對其講述得更加清楚。

在你的構(gòu)建過程中執(zhí)行哪些具體任務(wù)？

小結(jié)

雖然這次參與調(diào)查的人數(shù)不多，而且樣本也不具有代表性，但是從這次調(diào)查的結(jié)果來看，仍然不失為對當(dāng)前常用前端技術(shù)的一個概要描述。對比谷歌全球應(yīng)用趨勢，也讓我對此次調(diào)查有了總體上的認識。我希望這種快速分析可以幫助你在前端技術(shù)使用和發(fā)展趨勢上獲得一些見解。如果你對前端技術(shù)還不熟悉的話，這份報告或許能夠幫助你和你的開發(fā)團隊更好地交流 - 如果你希望了解他們技術(shù)的使用情況，這些流行詞匯一定能派上用場。

我們將繼續(xù)以這樣的方式記錄技術(shù)發(fā)展趨勢和狀態(tài)，如果我們有東西想要分享，我們會在第一時間讓你知道。

作者：Roger Dudler，Frontify 創(chuàng)始人，《Git 簡明指南》作者。

原文： Front-End Technology Stack Round-Up

感謝： Jodoo 幫助審閱并完成校對。

P.S. 如果您喜歡這篇文章并且希望學(xué)習(xí)編程技術(shù)的話，請關(guān)注一下 復(fù)唧唧。