一文帶你瞭解2018年最流行的前端技術

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測試

 

1、前端工做經驗：

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

結果以下：

 

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

 

2、CSS知識水平：

第二個問題考察了受訪者如何評價他們本身對CSS的認識 - 你如何評價本身對CSS及其相關工具和方法的認識？

結果以下：

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

 

3、CSS處理器使用狀況：

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

結果以下：

 

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

 

4、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來編寫更適合他們和他們的團隊的方法。

 

5、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，代表它如今的知名度不錯。

 

6、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網格和自定義屬性在現代瀏覽器中獲得很好的支持，認爲這些數字會快速增加並非不合理的。

 

7、JavaScript知識

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

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

這些結果是：

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

與上一次調查相比，受訪者認爲本身在高級或專家級別的人數略有增長，隨後初級或新手級別的受訪者人數略有減小。

 

8、開發流程工具

早在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腳本提供了一種簡單的方式來運行任務，而無需額外學習工具。這能夠解釋爲何更多的初學者正在使用它們而不是替代品。

 

9、關於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框架變得多麼重要。

 

10、目前在項目中最常使用哪些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年的相應數字。

 

11、您認爲哪些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框架。

 

12、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。很明顯，除非有新的工具在將來出現並得到牽引力，不然它的使用水平可能會繼續上升，由於它在開發者中變得愈來愈廣泛。

 

十3、JavaScript擴展語言

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

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

結果以下：

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

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

這彷佛是目前正在得到更多推進力的JavaScript領域，因此看看這些工具在將來幾年是否會得到更多用途會頗有趣。

 

十4、JavaScript檢查工具

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

當時ESLint是最受歡迎的工具，但如今狀況如何呢？

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

讓咱們看看結果：

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

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

與模塊捆綁同樣，彷佛這個工具領域已經有所解決，而ESLint如今被認爲是大多數開發人員的首選工具。

 

十5、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，隨着這些數字的不斷增加，咱們感到很是高興。

 

總結：

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

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

  一、CSS處理器：Saas、Less、PostCSS

  二、CSS框架：Bootstrap（當之無愧的王啊）

  三、CSS工具：Autoprefixer、Modernizer

  四、CSS佈局功能：Flexbox、CSS Grid

  五、開發工做流工具：NPM、Gulp、Grunt

  六、JavaScript庫和框架：jQuery、React、Vue、Lodash、Angular 2+、Underscore

  七、JavaScript模塊打包工具：Webpack、Browserify

  八、JavaScript擴展語言：TypeScript、Flow

  九、JavaScript檢查工具：ESLint、TSLint、JSLint

  十、JavaScript測試：Jest、Mocha、Jasmine

 

參考：

 The Front-End Tooling Survey 2018 - Results