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

[[190577]] 

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

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

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

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

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

開(kāi)發(fā)人員知識(shí)

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

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

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

意見(jiàn)和偏見(jiàn)

受訪者被要求判斷自己的水平。有些人可能比較謙虛，有些有選擇困難綜合癥。有些人可能高估了自己的水平，因?yàn)樗麄兛赡苁且蝗盒率殖绦騿T團(tuán)隊(duì)中唯一前端開(kāi)發(fā)人員。自我偏見(jiàn)的偏差可以被平均，但沒(méi)有辦法證明。

過(guò)去的行為不代表未來(lái)的趨勢(shì)

調(diào)查結(jié)果突顯了開(kāi)發(fā)人員已經(jīng)使用的工具。這并不意味著這些工具是有用的，可以節(jié)省時(shí)間或?qū)⒃趯?lái)的項(xiàng)目中使用。

02CSS

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

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

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

CSS 預(yù)處理器

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

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

近 70% 的受訪者嘗試過(guò) Less ，19% 的受訪者嘗試了 Stylus 。80% 從未聽(tīng)說(shuō)過(guò) Rework。

CSS 命名方案

46% 的受訪開(kāi)發(fā)人員使用命名方案，但是對(duì)于那些將 CSS 水平自我評(píng)價(jià)為高級(jí)或?qū)＜壹?jí)別的人來(lái)說(shuō)，這一比例上升到 57% 。

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

其它CSS工具

當(dāng)前 39% 的項(xiàng)目中正在使用 Modernizr 。這似乎令人驚訝，因?yàn)樗闹饕猛臼羌嫒荽蟛糠忠呀?jīng)被棄用的舊版本IE。(Microsoft已于2016年1月停止支持IE10及以下版本。)

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

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

03JavaScript

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

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

庫(kù)和框架

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

框架情況更令人困惑：

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

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

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

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

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

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

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

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

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

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

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

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

31% 的人聽(tīng)說(shuō)過(guò)可能性，但沒(méi)有使用工具，和 7% 從未聽(tīng)說(shuō)過(guò)這個(gè)詞。

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

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

其他JavaScript工具

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

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

使用測(cè)試工具的用戶(hù)在一年中增長(zhǎng)了 12% ，達(dá)到了 52% 。

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

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

幸運(yùn)的是，行為驅(qū)動(dòng)開(kāi)發(fā)(BDD)的可能性已經(jīng)出現(xiàn)，以檢查在真實(shí)的瀏覽器中的活動(dòng)，并使前端測(cè)試更具可行性。 ***的系統(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)使用過(guò) TypeScript 。

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

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

JavaScript 方面的工具不太好說(shuō)。有一些明顯的特征和趨勢(shì)：

Node.js 和 npm 將變得至關(guān)重要，因?yàn)槟悴捎玫墓ぞ哂浀蒙隙际?Node.js 和 npm 實(shí)現(xiàn)管理的。

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

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

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

你可以選擇一個(gè)框架，如 React，因?yàn)樗苁軞g迎 – 但這并不代表它就適用于你的應(yīng)用。即使 React 將最終被更好，更優(yōu)秀的東西取代。

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

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