2018年即將過半，前端開發這個行業又進一個臺階了。找來一個現代前端技術圖譜看看，真是嚇尿了——寶寶心裡苦啊！

仔細想想，這要是全學會了還得了，也太不切實際了。還是來看看現在流行的是有哪些東西，跟著潮流走總不會錯的。

每一個開發者都有著自己的知識和習慣，根據自己的知識和習慣，很容易地理所當然使用哪些工具。通過分析瞭解行業內開發者對開發工具的使用，這些結果有助於深入瞭解前端工具的當前趨勢。無論你是剛剛開始學習網絡開發，還是一位有經驗的開發人員，這些分析數據對你的學習或工作都能帶來不少的好處。

根據Wes網站的最新調查結果，本文主要從以下幾個方面瞭解前端工具的當前趨勢：

1. 前端工作經驗
2. CSS知識水平
3. CSS處理器的使用情況
4. CSS框架
5. CSS工具體驗
6. CSS功能用法
7. JavaScript知識水平
8. 開發流程工具
9. 關於JavaScript庫和框架的知識
10. 目前在項目中最常使用哪些JavaScript庫和/或框架
11. 您認為哪些JavaScript庫或框架對您的大部分項目至關重要
12. JavaScript模塊打包的使用
13. JavaScript擴展語言
14. JavaScript語法檢查
15. JavaScript測試

一、前端工作經驗：

所問的問題是 - 你從事前端技術工作多久了？

結果如下：

從結果看，54.23％的受訪者從事前端技術工作超過5年，只有16.36％的受訪者表示他們的經驗不到2年。從這些數字中可以清楚地看出，今年大多數受訪者在前端技術方面擁有相當高的經驗。

二、CSS知識水平：

第二個問題考察了受訪者如何評價他們自己對CSS的認識 -

結果如下：

89.9％的受訪者表示他們在CSS方面的知識處於中級或以上水平，其中大多數（45.63％）的評級為高級。與關於知識水平的任何問題一樣，這對於回答問題的人來說是非常主觀的。一個人想要成為CSS專家的想法可能與另一個人的想法不同。不考慮這種主觀性，能夠利用這些知識水平來了解它如何影響開發人員正在使用的工具是有用的。

三、CSS處理器使用情況：

所問問題 - 你選擇什麼CSS處理工具？

結果如下：

結果顯示，Sass仍然是這個領域的主導工具，65.33％的受訪者選擇使用它。這一數字實際上比2016年的結果略有上漲（+ 1.84％）。Less的使用量繼續呈現下降趨勢，只有6.44％的受訪者使用它，比2016年的結果下降了3.78％。

四、CSS框架：

所以問的問題是 - 請指出您的項目中最常使用的以下哪些CSS框架（如果有的話）。

結果如下：

到目前為止，最流行的CSS框架是Bootstrap，超過三分之一的受訪者（34.69％）使用它。

這些結果的有趣之處在於與那些選擇使用自定義或根本不使用框架（48.33％）的用戶相比，選擇使用現成的CSS框架的受訪者數量（51.67％），這是一個處於分裂持平的結果。

當根據CSS進行響應開發時，Bootstrap在初學者和新手中的使用更為普遍，僅僅考慮這些受訪者時，使用率會增加到51.07％。在較高的知識水平下，框架使用量在每個類別水平下降，這些受訪者中有37.39％的專家級別的CSS沒有首選的CSS框架和Bootstrap，遠低於21.64％。

這種模式在定製框架中重複使用，25.61％的那些擁有CSS專業知識的人表示他們使用自定義框架，而初學者或新手級知識的人則只有6.21％說相同的事情。

這些數字是有道理的 - 作為開發人員通過CSS獲得更多知識，他們更有可能擺脫使用現成的解決方案，使用他們學習的CSS來編寫更適合他們和他們的團隊的方法。

五、CSS工具體驗

要求受訪者說明他們使用Autoprefixer，Modernizr和Stylelint的經驗。

讓我們來看看結果：

從2016年的數據來看，Stylelint和Autoprefixer使用率都有所提高，Modernizer使用率有所下降。

Stylelint的使用率有了很大提高，有18.40％的受訪者表示他們覺得使用它很舒服。這一數字比2016年上漲8.03％，但從未聽說過這一數字的比例最高（43.30％），儘管這一數字比2016年下降了11.80％。

令人驚訝的是，超過三分之一的開發人員表示他們處於CSS的高級水平或更高級別，但從未聽說過Stylelint。如果這個數字在未來幾年不會繼續下降，我會非常驚訝。

Autoprefixer的使用率仍然很高，49.46％的受訪者樂於使用它。同樣，雖然Modernizr的使用率略有下降，但只有10.4％的受訪者從未聽說過Modernizr，表明它現在的知名度不錯。

六、CSS功能用法

接下來的問題是關於新的CSS功能。

有了這麼多關於最新的CSS功能的書面和討論，我認為找出有多少開發人員已經開始將這些功能付諸實踐並獲得使用它們的經驗會很有趣。

因此，詢問了受訪者 - 請使用以下CSS功能說明您的體驗。

結果如下：

從結果中可以清楚地看出，大多數開發者現在都瞭解Flexbox，68.04％的受訪者表示他們覺得使用它很舒服。如果包括那些至少使用過它的受訪者，這個數字會上升到94.84％。

有些令人驚訝的是，更多的受訪者表示，他們覺得使用CSS自定義屬性（19.05％）比CSS Grid（17.95％）舒服，儘管看看有多少人使用每個功能至少有一點，但CSS Grid提前達到了62.25％相比之下，45.5％的受訪者對CSS Custom Properties表示同樣看法。

從這些數字看來，似乎很多人都在使用CSS Grid，但還有很多人還沒有完全掌握它。看看開發人員現在如何使用flexbox進行開發，使用CSS網格和自定義屬性在現代瀏覽器中得到很好的支持，認為這些數字會快速增長並不是不合理的。

七、JavaScript知識

下半年的調查集中在JavaScript，它是工具的生態系統。

首先，詢問了受訪者 - 您如何評價自己對JavaScript及其相關工具和方法的知識？

這些結果是：

這些結果中看到的知識水平之間的分歧與2016年的結果非常相似。與CSS類似，絕大多數受訪者認為自己在JavaScript中處於中級或更高水平，超過四分之三（86.85％）的受訪者將其評為這一級別。

與上一次調查相比，受訪者認為自己在高級或專家級別的人數略有增加，隨後初級或新手級別的受訪者人數略有減少。

八、開發流程工具

早在2016年，Gulp是使用最廣泛的任務跑步者，43.59％的受訪者表示他們使用該工具。然而，NPM腳本的使用量有大幅增長，所以看看開發人員現在在他們的工作流程中使用什麼是很有趣的。

被調查者被問到的問題是 - 你喜歡在典型的項目工作流程中使用哪個工具？

讓我們來看看結果

有趣的是，NPM腳本的使用已經在一定程度上超過了Gulp，現在成為最常用的工具，擁有47.79％的比例。與2016年相比，這是一個巨大的增長21.98％。

Gulp現在是這一領域使用次數最多的工具，有29.70％，比2016年下降13.89％。雖然Gulp的用量下降，但重要的是要考慮到幾乎三分之一的受訪者仍在使用，這是相當大的數量。

Grunt的使用率也有所下降，只有5.83％的開發者現在在他們的工作流程中使用它。不使用工具的人數與2016年的數據保持一致（10.59％）。

對這些結果進行更深入的研究發現，在初學JavaScript中級知識的受訪者中，NPM腳本使用率實際上高於平均值50.45％。

所以這裡要注意的主要趨勢是，看起來更多的開發人員正在轉向使用NPM腳本來處理他們的工作流任務，而不再使用像Grunt和Gulp這樣的工具。這可能是由於與WebPack和React等工具更好的協同作用，或者僅僅是因為NPM腳本提供了一種簡單的方式來運行任務，而無需額外學習工具。這可以解釋為什麼更多的初學者正在使用它們而不是替代品。

九、關於JavaScript庫和框架的知識

在2016年，jQuery仍然是前端開發人員非常流行的工具，React成為最受歡迎的框架，領先於Angular。

那麼18個月以來情況如何改變？有沒有新的工具出現？

首先，要求受訪者表示他們使用一些JavaScript庫和框架的經驗。

結果如下：

從廣泛的角度看，這些結果顯示，受訪者認可使用jQuery（79.91％），React（41.02％），Vue.js（17.19％）和Angular 2+（12.63％ ）。儘管jQuery的開發人員數量仍然最多，但是與2016年的結果相比，這一數字已經下降了6.80％。

另一方面，React在這一類中獲得了12.89％的增長，使得它成為大多數受訪者表示他們感覺舒適的框架。Vue.js似乎也獲得了開發者的大量支持，有17.19％的受訪者表示他們覺得使用起來很舒服，比2016年的結果增加了11.71％。

與React和Vue.js相比，Angular 2+略有減少。

就JS實用程序庫而言，越來越多的受訪者表示他們使用Lodash（37.61％）比Underscore（28.66％）感到舒服。

考慮所有JavaScript MV *框架的知識水平 - 除了jQuery，Underscore和Lodash之外，列表中的所有內容 - 70.98％的受訪者表示，他們感覺適用至少使用這些框架之一。這比2016年調查中的相同數字增長了近10％（從61.71％），並且自2015年以來增長了20％。

這些數字表明瞭在現代前端開發中至少了解一個JavaScript框架變得多麼重要。

十、目前在項目中最常使用哪些JavaScript庫和/或框架

結果如下：

今年的數字顯示出一些相當大的變化。

jQuery在開發者中的使用率仍然很高 - 有50.52％的受訪者在他們的項目中使用它 - 但是React現在是非常接近的第二，47.77％。與2016年業績相比，這實際上是一個巨大的波動幅度，超過30％，jQuery使用率下降19.73％，React用量增長10.86％。

Lodash是第三大使用工具（34.26％），有趣的是，Vue.js是下一個最常用的工具，22.92％的受訪者表示他們經常在他們的項目中使用它。這使得Vue剛剛領先於Angular 2+，它獲得了13.77％的回應。

Angular 2的使用量比2016年下降了14.86％，但這並沒有轉化為Angular 2+的增長，只增長了5.3％。很明顯，Angular開發人員已經轉向了其他框架，而不是簡單地轉向最新版本的框架。

所有其他框架的使用量均低於2016年的相應數字。

十一、您認為哪些JavaScript庫或框架對您的大部分項目至關重要？

下一個問題要求受訪者選擇他們認為對他們至關重要的一個庫或框架。

在2016年，jQuery是最重要的，約三分之一的開發者認為jQuery對他們至關重要。

讓我們看看是否仍然如此：

在頂端發生了變化，React現在是大多數受訪者認為最重要的工具，有28.82％（1,469）。jQuery現在下降到第三位，為19.44％（991），僅次於21.54％（1,098）的受訪者表示沒有工具對他們至關重要。

正如我們在前面的問題中看到的，Vue.js（10.34％）被認為是受訪者中最重要的JavaScript框架，在Angular 2+（5.91％）和Ember（4.59％）之前。

用經驗水平進行深入研究可以發現一些有趣的見解，當看到在前端技術方面的經驗不到2年的開發人員的反應時，這些數字更加明顯，32.24％的人表示React是他們最重要的工具，12.36％的人對Vue.js表示相同。同樣，18.47％的人選擇jQuery作為他們選擇的工具，低於所有經驗水平的平均值。

從歷史上看，jQuery一直是初學者用來幫助他們開始使用JavaScript的工具，但從這些數字看，更多初學者正在選擇學習框架。這在很多方面都是有道理的，因為現在有更多關於如何開始使用React和Vue.js的文章，而不是與jQuery相關的文章。

總的來說，jQuery的使用水平雖然仍然很高，但開始趨於下降。看看Vue.js是否能夠繼續增長並將自己確立為React未來冠軍的重要競爭者將是一件有趣的事情。

就目前而言，React顯然是前端開發人員選擇的JavaScript框架。

十二、JavaScript模塊打包的使用

回顧2016年，Webpack在JavaScript模塊打包商領域佔據明顯領先地位，41.23％的受訪者使用它。

那麼從那時起有什麼變化，或者這個領先地位持續增長？問的問題是 - 你在工作流中使用了JavaScript模塊捆綁器嗎？

讓我們來看看結果：

自2016年以來，Webpack的使用量進一步顯著增加，大多數受訪者（66.04％）現在使用它 - 自上次調查以來增長了+ 24.81％。

Browserify（3.73％）和RequireJS（2.41％）的使用量分別下降了6.93％和5.34％。

模塊打包的整體使用水平持續上升，其中79.77％（4,066）的受訪者現在正在使用其中一種工具，比2016年的結果增加12％，自2015年以來增長了32％。

開發人員似乎已經在JavaScript工具這個領域選擇了Webpack。很明顯，除非有新的工具在未來出現並獲得牽引力，否則它的使用水平可能會繼續上升，因為它在開發者中變得越來越普遍。

十三、JavaScript擴展語言

TypeScript和最近的Flow，由於它們為JavaScript帶來靜態類型的有用性，已經獲得了更多的動力。

問的問題是 - 請使用JavaScript的以下擴展語言指出您的體驗

結果如下：

查看結果，TypeScript是大多數受訪者認為可以使用的工具，佔21.66％。相比之下，只有4.79％的人認同Flow - 我認為這個數字會更高。

接近一半的受訪者（49.6％）表示他們至少使用了TypeScript。

這似乎是目前正在獲得更多推動力的JavaScript領域，所以看看這些工具在未來幾年是否會獲得更多用途會很有趣。

十四、JavaScript檢查工具

現在JavaScript腳本檢查工具被認為是大多數開發人員工具箱的一部分，2016年超過76％的受訪者使用了它。

當時ESLint是最受歡迎的工具，但現在情況如何呢？

我問 - 你用什麼工具來檢查你的JavaScript？（如果有的話）

讓我們看看結果：

自上次調查以來，ESLint的使用率進一步增長，61.11％的受訪者現在使用它。TSLint是下一個受歡迎工具，有10.03％的受訪者使用它。

總的來說，使用JS檢查的受訪者比例上升了8％，達到84.85％。

與模塊捆綁一樣，似乎這個工具領域已經有所解決，而ESLint現在被認為是大多數開發人員的首選工具。

十五、JavaScript測試

自2015年第一次調查以來，JavaScript測試取得穩步增長，52.07％的受訪者表示他們在2016年使用了一種工具來測試其JavaScript。

但是，可用工具中並沒有明確的領導者。那麼情況仍然如此？

我問的問題是 - 你用什麼工具測試你的JavaScript？（如果有的話）

Jest已經成為最受歡迎的測試工具，22.29％的受訪者表示他們使用它。令人驚訝的是，這比2016年上漲了18.86％ - 這是一個非常巨大的飛躍。看起來Jest真的在社區中引起了共鳴，並提供了與之前所提供的不同的東西。

Mocha和Jasmine的使用量因此下滑，分別為14.05％和10.54％。

令人鼓舞的是，使用任何工具測試JS的開發者的比例已經上升到56.56％ - 比2016年的結果增加4.5％。

看到更多的開發人員使用工具來幫助他們測試JavaScript，隨著這些數字的不斷增長，我們感到非常高興。

總結：

前些年很多入門的前端（我也是其中一個），看來經過這兩年都進入高級了呀（別人問我是什麼級別的，我也會回答是高級，就算沒實力也能掙面子啊，是不是？）。嗯，前端現在是整個行業競爭都很大！

不扯了，該總結下前端流行的技術了：

1. CSS處理器：
   Saas、Less、PostCSS
2. CSS框架：Bootstrap（當之無愧的王啊）
3. CSS工具：Autoprefixer、Modernizer
4. CSS佈局功能：Flexbox、CSS Grid
5. 開發工作流工具：NPM、Gulp、Grunt
6. JavaScript庫和框架：jQuery、React、Vue、Lodash、Angular 2+、Underscore
7. JavaScript模塊打包工具：Webpack、Browserify
8. JavaScript擴展語言：TypeScript、Flow
9. JavaScript檢查工具：ESLint、TSLint、JSLint
10. JavaScript測試：Jest、Mocha、Jasmine

出處：https://www.cnblogs.com/jofun/p/9073414.html

閱讀更多 會技術的葛大爺 的文章

關鍵字: jQuery 前端開發 編程語言