你有兩年以上的前端開發(fā)經(jīng)驗嗎?你會用 Sass 和 Autoprefixer 等高級的CSS輔助技能嗎?你的 JavaScript 知識是否融匯貫通，你是否喜歡使用 Gulp ， npm 和 jQuery ?如果是這樣，根據(jù) Ashley Nolan 的前端問卷調(diào)查，你是一個典型的前端開發(fā)工程師。 

[[190577]] 

01謊言，該死的謊言，統(tǒng)計數(shù)字和調(diào)查問卷

謊言，該死的謊言，統(tǒng)計數(shù)字(英文：Lies, damned lies, and statistics)，是一句著名的西方諺語。主要描述數(shù)字的說服能力，特別是用來諷刺一些使用統(tǒng)計數(shù)字支持、但毫無說服力的分析報告，以及人們傾向于貶低那些不支持其立場的統(tǒng)計結(jié)論。 維基百科

諸如此類的調(diào)查有助于你發(fā)現(xiàn)新工具和你的知識短板。至本文撰寫時，本次問卷調(diào)查收到了5,254份答復(fù)，這是比大多數(shù)民意調(diào)查更具有樣本價值。但是，調(diào)研結(jié)果是否代表真相還是應(yīng)該抱審慎態(tài)度。。。

全球性的統(tǒng)計結(jié)果

這次問卷調(diào)查是全球性的，但將主要來自英語國家。 在其他地方開發(fā)或使用的流行工具可能被忽略。

開發(fā)人員知識

本次問卷調(diào)查呼吁經(jīng)驗豐富的開發(fā)人員對調(diào)研問題有深刻理解并且有時間，有興趣去完成本次調(diào)查。

83% 的受訪者有兩年或兩年以上的前端技術(shù)經(jīng)驗，只有 5% 的受訪者不到一年前端經(jīng)驗：

具備較低前端技能的開發(fā)人員不太可能完成本次問卷調(diào)查，因此結(jié)果可能會相應(yīng)偏離。

意見和偏見

受訪者被要求判斷自己的水平。有些人可能比較謙虛，有些有選擇困難綜合癥。有些人可能高估了自己的水平，因為他們可能是一群新手程序員團(tuán)隊中唯一前端開發(fā)人員。自我偏見的偏差可以被平均，但沒有辦法證明。

過去的行為不代表未來的趨勢

調(diào)查結(jié)果突顯了開發(fā)人員已經(jīng)使用的工具。這并不意味著這些工具是有用的，可以節(jié)省時間或?qū)⒃趯淼捻椖恐惺褂谩?/p>

02CSS

63%的開發(fā)人員將他們自己的CSS知識評為高級或?qū)＜宜剑?/p>

雖然 CSS 是一個看似簡單的 屬性 和 值 的鍵值對集合，但是 CSS 是眾所周知地難以掌握。 CSS3引入了一系列新效果，并且越來越難以掌握所有的知道。例如，我對新的 CSS網(wǎng)格模塊 知之甚少，還有當(dāng)開發(fā) Flexbox 布局時常常需要翻閱手冊(或隨機(jī)嘗試性的使用各種屬性和值)!

10%的受訪者承認(rèn)不到一年的開發(fā)經(jīng)驗，卻聲稱已經(jīng)掌握高級的CSS知識!我懷疑他們很快就會意識到，懂的越多，意味著不懂的也就越多!

CSS 預(yù)處理器

超過 63% 的受訪者使用 Sass – 無可爭議的預(yù)處理器冠軍。8%的受訪者還使用 PostCSS，雖然它通常與其他預(yù)處理器結(jié)合使用以提供有用的功能 – 如AutoPrefixer( 65% 的受訪者采用)。

近 14% 的受訪者不使用預(yù)處理器，而更喜歡使用原始 CSS 代碼。當(dāng)你認(rèn)為它是最簡單的(和***的)開始前端開發(fā)的方式時，這個比例似乎有點(diǎn)低。如果 86% 的開發(fā)人員使用 CSS 預(yù)處理器，我預(yù)計平均每個網(wǎng)站的CSS文件請求應(yīng)該低于7.2個。

近 70% 的受訪者嘗試過 Less ，19% 的受訪者嘗試了 Stylus 。80% 從未聽說過 Rework。

CSS 命名方案

46% 的受訪開發(fā)人員使用命名方案，但是對于那些將 CSS 水平自我評價為高級或?qū)＜壹墑e的人來說，這一比例上升到 57% 。

***的選擇是 BEM ，占40%，其次是 CSS模塊(CSS Modules)(16%)，OOCSS(15%)和 SMACSS(13%)。

其它CSS工具

當(dāng)前 39% 的項目中正在使用 Modernizr 。這似乎令人驚訝，因為它的主要用途是兼容大部分已經(jīng)被棄用的舊版本IE。(Microsoft已于2016年1月停止支持IE10及以下版本。)

14% 的受訪者使用 Stylelint 來檢查CSS有效性。這似乎很低，但***的IDE和編輯器有一些類似的 CSS 檢查，所以可能沒有必要。

23% 的開發(fā)人員不使用任何CSS工具或命名方案。

03JavaScript

如果你認(rèn)為 CSS 的各種工具已經(jīng)很混亂了，歡迎來到迷人的 JavaScript 世界!

JavaScript 開發(fā)人員比較謙虛，51% 的受訪者認(rèn)為自己的JavaScript 知識達(dá)到了高級或?qū)＜宜剑?/p>

庫和框架

盡管有相關(guān)性的質(zhì)疑，超過 99% 的開發(fā)人員在某些時候使用 jQuery，并且 31% 的受訪者認(rèn)為對很多項目來說 jQuery 是必要的。70% 的受訪者在當(dāng)前項目中繼續(xù)使用 jQuery ，這與 W3Techs 觀察到的數(shù)據(jù)相似：

框架情況更令人困惑：

已有 38% 的現(xiàn)有項目采用了React。然而，只有 29% 的開發(fā)人員使用它感到舒適，18% 的受訪者認(rèn)為它是必要的。只有0.1%的網(wǎng)站被發(fā)現(xiàn)正在使用React，但請記住，調(diào)查結(jié)果是從前端開發(fā)人員收集的 – 而不是所有的Web開發(fā)人員。

有 25% 的項目使用 Angular 1，雖然只有8%的人認(rèn)為它是不可替代。Angular 2則相對受冷落，只比8%多一點(diǎn)。只有3%的人在多數(shù)項目中使用它。

Vue.js 已經(jīng)被 10% 的項目采用，但少于 6% 的開發(fā)人員對框架感到舒適，3% 認(rèn)為它是必要的。

對于明年的問卷調(diào)查，這個問題可能有用：“你是否放棄了一個框架或者在項目中切換框架?

盡管有大量的JavaScript專家，只有 21% 的人認(rèn)為框架不是必須的，并樂意編寫原生代碼。這是一個令人擔(dān)憂的統(tǒng)計數(shù)據(jù)嗎?30% 的開發(fā)人員認(rèn)為他們的框架抽象技能集可以滿足他們的全部需求?

任務(wù)執(zhí)行器和模塊打包工具

Gulp是***的贏家，接近 44% 的開發(fā)人員在使用。然而，更簡單的 npm scripts 腳本在2016年增加了 23% ，達(dá)到 26% 。

Grunt 已經(jīng)失去了優(yōu)勢，跌落到 12%。另外，9% 的受訪者選擇了不使用任務(wù)運(yùn)行器。

那些使用模塊打包工具在2016年增加了 20%，達(dá)到 68% 。 Webpack 是最為流行，占 31% ，Browserify 為 11% ，RequireJS 為 8% 。

我很驚訝，“其他”模塊打包工具占不到 4%，當(dāng)有幾個任務(wù)運(yùn)行器插件可以更簡單的管理依賴關(guān)系，例如 gulp-deporder 。也許因為每個開發(fā)人員都在使用JavaScript 轉(zhuǎn)譯器…

ES6到ES5的轉(zhuǎn)譯器 (transpilers)

62% 的開發(fā)人員正在使用諸如 Babel 之類的工具，將簡潔的 ES6 代碼轉(zhuǎn)換為舊版瀏覽器支持的 ES5 代碼。

31% 的人聽說過可能性，但沒有使用工具，和 7% 從未聽說過這個詞。

這個數(shù)字似乎相當(dāng)高。Internet Explorer 和老的應(yīng)用程序不支持***的 JavaScript 語法，但是如果您要編寫 ES6 代碼，為什么還要支持他們呢?

如果你確實需要支持 IE11 及以下版本，編寫 ES5 代碼不是更容易嗎?

其他JavaScript工具

41%的開發(fā)人員使用 ESLint ， 19% 使用 JSLint 和 14% 使用 JSHint 來檢查他們的代碼的有效性 – 例如缺少括號，省略分號，格式縮進(jìn)等。

23%的受訪者不使用代碼檢查工具 – 雖然，也有可能他們依靠他們的文本編輯器或 IDE 來發(fā)現(xiàn)最嚴(yán)重的語法錯誤。

使用測試工具的用戶在一年中增長了 12% ，達(dá)到了 52% 。

歷史上，JavaScript 測試一直是一個挑戰(zhàn)。

諸如測試驅(qū)動開發(fā)(TDD)等技術(shù)可以捕獲邏輯問題，但不能解決異步事件遇到的問題，例如當(dāng) UI 在特定瀏覽器中執(zhí)行某種意外操作時。

幸運(yùn)的是，行為驅(qū)動開發(fā)(BDD)的可能性已經(jīng)出現(xiàn)，以檢查在真實的瀏覽器中的活動，并使前端測試更具可行性。 ***的系統(tǒng)有：

• Mocha – TDD/BDD (23%)
• Jasmine – BDD (17%)
• QUnit – TDD (4%)
• Jest – TDD/BDD (3%)
• Ava – TDD/BDD (2%)

***，有 94% 的受訪者使用 npm – Node.js 的包管理器。出乎意料，有 32% 曾經(jīng)使用過 TypeScript 。

04你在2017年應(yīng)該使用什么?

關(guān)于 CSS，Sass 的知識，PostCSS 和 BEM 很明顯是必要的。也就是說，開發(fā)的多樣性很廣。我建議你研究一些預(yù)處理器和命名方案，以便了解每個工具可以實現(xiàn)什么 – 即使是你選擇不使用它們。

JavaScript 方面的工具不太好說。有一些明顯的特征和趨勢：

Node.js 和 npm 將變得至關(guān)重要，因為你采用的工具記得上都是 Node.js 和 npm 實現(xiàn)管理的。

Gulp 和/或 Webpack 也值得嘗試一下。

了解ES6，即使您仍然在向后兼容的 ES5 項目上工作。

我從不羨慕那些嘗試為新項目選用類庫或框架的人。從調(diào)研結(jié)果來看，jQuery是明顯是***的。然而隨著 IE 的消亡，jQuery 的跨瀏覽器支持變得沒那么重要，并且許多功能已經(jīng)和瀏覽器原生 API 和 CSS 重復(fù)。

你可以選擇一個框架，如 React，因為它很受歡迎 – 但這并不代表它就適用于你的應(yīng)用。即使 React 將最終被更好，更優(yōu)秀的東西取代。

我的建議：從眾多框架中挑選某一個之前，先學(xué)習(xí)HTML，CSS，JavaScript 和瀏覽器開發(fā)的基礎(chǔ)知識。無論 JavaScript 社區(qū)如何評價哪些工具集，這些知識將終生受用。也許有一天，你甚至?xí)帉懗鲆粋€高大上的工具，也成為各種框架中的一員。

感謝 Ashley Nolan 的前端工具調(diào)查和結(jié)果分析。