2019前端工具調查報告(譯文)

原文地址: frontend-tooling-survey-2019-results

到如今已經有一段時間了,可是 2019 年 前端工具調查的結果就在這裏!css

今年,3005 名開發人員回答了 27 個問題,涉及範圍普遍的前端工具和方法學。 像往常同樣,我衷心感謝每一位花時間填寫這封信的人。 組織和撰寫這項調查今年特別具備挑戰性,由於咱們家又多了一個女嬰(所以這些調查結果被推遲了!)。前端

像往常同樣,查看前端工具在過去 12 個月中發生了什麼變化,看看咱們的想法和觀點是否獲得業內其餘開發人員的贊同,這是頗有趣的。vue

這些結果(但願)有助於洞悉前端工具的當前使用趨勢和知識水平,並經過查看先前調查的數據來顯示這些趨勢隨着時間的變化。react

快速感謝

這項調查每一年都要花費大量時間,並且獲得了 Wes Bos (經過參與調查)和個人僱主 Just Eat 的支持。web

結果

那麼,讓咱們開始吧! 本身拿一杯茶 / 咖啡 / 飲料,讓咱們來看看結果...api

前言免責聲明

這些結果表明了在該行業工做的前端開發人員的一個樣本。 所以,他們不該該被看成福音書,僅僅指出一個粗略的趨勢。網絡

迴應

如上所述,今年的調查收到了 3,005 份回覆。與去年的調查(5,461 份)相比略有降低。架構

我發現今年宣傳這個調查有點困難,多是由於網絡開發調查的數量在不斷增長,但也多是由於我能夠花費大量的我的時間來宣傳這個詞。 綜合考慮,超過 3000 個回覆仍然是難以置信的。框架

至於今年的回覆來自哪裏,該調查的連接發佈在 Twitter、 Reddit、 HackerNews、 designnernews、 Echo.js、 LinkedIn 和 Frontendfront 上。許多新聞通信(包括 FrontEnd Focus 和 CSS Weekly 等)也有用到。frontend

在可能的狀況下,您會看到我已將 2018 年調查的百分比變化與今年的數字一塊兒包括在內。

問題索引

  1. 通常前端經驗
  2. CSS 知識水平
  3. 使用 CSS 處理器
  4. CSS 處理器經驗
  5. 使用 CSS 框架
  6. CSS 命名模式
  7. CSS Linting
  8. CSS 工具體驗
  9. Css 方法和命名經驗
  10. 使用 CSS 工具
  11. CSS-in-JS 用法
  12. 使用 CSS 新特性
  13. JavaScript 知識水平
  14. 任務管理器
  15. 瞭解 JavaScript 庫和框架
  16. 最經常使用的 JS 框架 / 庫
  17. 最基本的 JS 框架 / 庫
  18. 模塊打包器的使用
  19. 模塊打包器和任務管理器的經驗
  20. JavaScript 轉換器
  21. JavaScript 擴展語言
  22. JavaScript 靜態代碼檢查
  23. JavaScript 測試
  24. 性能工具及特色
  25. 可訪問性測試
  26. JavaScript 包管理器
  27. 通用工具的使用

Q1 - 通常前端經驗

調查的第一個問題是用來找出每一個受訪者的前端經驗的多少。

問題是-你使用前端技術大概有多長時間?

如下是調查結果:

回答 投票數 百分比
0-1 年 91 3.03%
1-2 年 279 9.28%
2-5 年 859 28.59%
5-10 年 860 28.62%
10-15 年 503 16.74%
超過 15 年 413 13.74%

59.1% 的受訪者從事前端技術工做超過 5 年。 這比去年(54.18%)略有上升,因此今年的受訪者對前端技術有更多的經驗。 然而,值得注意的是,這可能部分是因爲一些參與了去年調查的受訪者,如今(天然)將有更多的經驗。

只有 12.31% 的受訪者表示他們的工做經驗少於兩年。

與之前的調查同樣,絕大多數調查對象在前端技術方面具備至關高的經驗。 在考慮其餘調查結果時,這一點是值得考慮的。

Q2 - CSS 知識水平

第二個問題是看受訪者如何評價他們本身對 CSS 的知識,問: 你如何評價你本身對 CSS 及其相關工具和方法的知識?

如下是他們的回答:

水平 投票數 百分比
初學者 35 1.16%
初學者(初級和中級之間) 243 8.09%
中級 815 27.12%
高級(介於中級和專家之間) 1452 48.32%
專家 460 15.31%

90.75% 的受訪者表示,他們本身 Css 方面的知識處於中等或以上水平,大多數(63.63%)認爲本身是高級或專家。

正如我每一年提到的,任何關於普遍知識水平的問題,這是很是主觀的答覆。 一我的對於如何成爲 CSS 專家的想法可能與另外一我的的想法有很大的不一樣。

儘管如此,可以將這些知識水平與調查中其餘問題的結果進行過濾是頗有用的——例如,看看經驗更豐富的開發人員是否更喜歡某些工具,而不是那些初學者可能使用的工具。 在之後的問題中,我將在適當的地方回顧這些結果。

Q3 - 使用 CSS 處理器

咱們關於 CSS 工具的第一個問題是關於 CSS 處理工具的。

在前幾年,這個問題要求受訪者選擇他們喜歡的 CSS 預處理工具。 今年,這個問題稍微改變了一下,容許受訪者選擇多個工具,問哪一個是你常用的 CSS 處理器?

自 2016 年調查開始以來,Sass 一直是這個領域的主要工具,那麼今年有什麼變化嗎?

注意: 我已經將這些數據與去年的數據進行了比較,但重要的是要考慮到受訪者如今能夠選擇多個答案,而不只僅是一個。 所以,結果極可能顯示,全部工具的使用率至少有小幅上升。

預處理器 投票數 百分比 差別百分比(至 2018 年)
Sass 2,322 77.27% +11.88%
PostCSS 863 28.72% +20.06%
Less 422 14.04% +7.52%
沒有預處理器 395 13.14% -1.44%
Stylus 98 3.26% +1.08%
Other 80 2.66% -0.01%

和前幾年同樣,Sass 仍然是開發人員使用的主要 CSS 處理工具,77.27% 的受訪者表示他們使用了它。

有趣的是,PostCSS 如今是第二經常使用的工具,有 28.72% 的受訪者使用它。 受訪者如今能夠選擇多種工具,這顯然有助於更準確地表示 PostCSS 的使用狀況,除了使用像 Sass 這樣的工具以外,還常用 PostCSS。

Q4 - CSS 處理器經驗

下一個問題是繼上一個問題以後的又一個問題,受訪者被要求說明他們在 CSS 處理工具方面的經驗水平。

如下是調查結果:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
Sass 或 SCSS 語法 0.33% (10) 6.82% (205) 15.34% (461) 77.50% (2,329)
Less 1.40% (42)) 35.81% (1,076) 35.34% (1,062) 27.45% (825)
Stylus 21.06% (633) 61.93% (1,861) 11.35% (341) 5.66% (170)
PostCSS 15.44% (464) 41.30% (1,241) 22.73% (683) 20.53% (617)

這些結果與前一個問題的結果一致,超過四分之三的受訪者(77.50%)說他們以爲使用 Sass 很舒服,而只有 7.15% 的人說他們從未使用過 Sass。

PostCSS 知識水平相對於去年的結果有所提升,由於 20.53%的受訪者表示他們對使用該工具感到滿意。

與去年的結果相比,Less 和 Stylus 的知識水平看起來至關停滯。

從問題 3 和 4 的結果來看,很明顯 Sass 仍然是 CSS 預處理的主要工具。

Q5 - 使用 CSS 框架

下一個問題是關於 CSS 框架的使用狀況,回答者要求說明下列哪一個 CSS 庫是您在項目中使用最頻繁的(若是有的話)。

去年咱們看到 Bootstrap 在這個領域處於領先地位,可是 12 個月過去了,狀況有所改變嗎?

讓咱們來看看結果:

回答 投票數 百分比 差別百分比(至 2018 年)
沒有框架 1,054 35.07% +2.15%
Bootstrap 840 27.95% -7.01%
自定義框架 497 16.54% +1.29%
Tailwind CSS 129 4.29% N/A
Bulma 96 3.19% +0.75%
Foundation 79 2.63% -1.31%
Materialize 72 2.40% -0.24%
Semantic UI 63 2.10% +0.16%
Tachyons 25 0.83% N/A
PureCSS 18 0.60% -0.10%
其餘 132 4.39% -0.83%

與去年的結果相比,最流行的答案——只有三分之一多一點(35.07%)——是來自那些聲稱他們沒有使用任何框架的開發人員。

雖然再也不是這個問題的首選,Bootstrap 仍然是最流行的 CSS 框架,有 27.95% 的受訪者使用它。 與去年相比,降低了 7.01% 。

在 Bootstrap 以後,第二流行的 CSS 框架是 Tailwind CSS。

與去年的結果顯示了相似的趨勢,當觀察 CSS 框架對 CSS 知識水平的關係時,有一個明顯的區別。 例如,聲稱本身是初學者或初學者級別的開發人員比聲稱本身是高級或專家級別開發人員的開發人員更有可能使用 Bootstrap (43.17%)。

在研究自定義 CSS 框架的使用時,還發現了知識水平之間的明顯差別(但能夠說是預料到的)。 整體而言,16.54% 的受訪者表示他們使用了定製框架。 在調查那些聲稱本身是 CSS 初學者或初學者的受訪者時,這一比例降低到了 8.63% ,而在調查擁有 CSS 高級或專家知識的開發者時,這一比例上升到了 20.35% 。

不過整體而言,與去年的結果相比,現成的 CSS 框架的使用彷佛略有降低。

Q6 - CSS 命名模式

調查中的下一個問題是: 你在編寫 CSS 時使用 CSS 命名方案嗎? 好比 BEM 或者 SUIT?

答覆以下:

回答 投票數 百分比 差別百分比(至 2018 年)
是的 1,565 52.08% +3.15%
沒有-我據說過 CSS 命名方案,但沒有使用 1,153 38.37% -0.76%
沒有-我歷來沒有據說過 CSS 命名方案 287 9.55% -2.39%

自從 2016 年調查開始詢問開發者關於 CSS 命名方案以來,大多數人(52.08%)回答說他們使用了 CSS 命名方案,比去年的結果增長了 3.15% 。

從未據說過 CSS 命名方案的開發人員也降低到了 9.55% ,比去年同期降低了 2.39% 。

從這些結果能夠清楚地看出,這個工具領域的使用水平仍在上升,目前少數開發人員沒有使用 CSS 命名方案。

Q7 - CSS Linting

自從咱們在 2016 年開始詢問受訪者關於這個主題的意見以來,CSS Linting 的使用量一直在逐漸增長。

去年,大多數開發人員(50.56%)仍然選擇不使用他們的 CSS 代碼風格檢查工具,因此看看一年後這種狀態是否發生了變化是頗有趣的。

問題是——你用工具來格式化你的 CSS 嗎?

如下是調查結果:

回答 投票數 百分比 差別百分比(至 2018 年)
是的 1,599 53.21% +3.77%
不-我不 lint 個人 CSS 1,406 46.79% -3.77%

與 CSS 命名方案同樣,結果顯示,大多數受訪者(53.21%)選擇 lint 他們的 CSS,比去年的調查結果相同的人數增長了 3.77% 。

從結果中也能夠清楚地看出,更高級的 CSS 開發人員更有可能 lint 他們的 CSS 嵌入其中。 只有 28.42% 的擁有初學者或初學者 CSS 知識的人說他們使用 CSS 靜態格式化工具,而擁有高級 CSS 知識或更高級 CSS 知識的人則有 60.15% 。

從結果中還能夠清楚地看到,更高級的 CSS 開發人員更有可能 lint 他們的 CSS。初學者或新手 CSS 知識的人中只有 28.42%的人說他們使用 CSS linter,而具備高級 CSS 知識或更高水平的人中有 60.15%。

隨着 Stylelint 這樣偉大的工具變得愈來愈廣爲人知(咱們將在下一個問題中看到) ,CSS lint 在開發人員中穩步上升。

Q8 - CSS 工具體驗

接下來的四個問題涉及許多不一樣的 CSS 方法和幫助工具的知識和使用級別。

首先,問題 8 要求被調查者陳述他們使用 Autoprefixer、 Modernizr 和 Stylelint 的經驗。

結果以下:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
Autoprefixer 16.71% (502) 15.17% (456) 17.60% (529) 50.52% (1,518)
Modernizr 12.51% (376) 28.99% (871) 34.48% (1,036) 24.03% (722)
Stylelint 37.74% (1,134) 24.86% (747) 14.38% (432) 23.03% (692)

在這三個工具中,Autoprefixer 是最著名的,有 50.52% 的開發者回覆說以爲使用它很舒服。

在過去的 12 個月中,Stylelint 知識水平增加最快,有 23.03% 的開發者如今對使用該工具感到滿意——增加了 5.16% 。

Modernizr 略有降低,表示從未據說過它的受訪者數量有所上升,表示使用它感到溫馨的受訪者數量有所降低(降低了 3.49% ,降至 24.03%)。

Q9 - CSS 方法和命名經驗

繼上一個問題以後,調查對象被問到-請說明你使用如下 CSS 方法的經驗。

結果以下:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
CSS-in-JS 7.72% (232) 39.43% (1,185) 25.32% (761) 27.52% (827
SMACSS 40.27% (1,210) 39.13% (1,176) 12.71% (382) 7.89% (237)
面向對象 CSS (OOCSS) 30.22% (908) 47.29% (1,421) 14.18% (426) 8.32% (250)
Atomic Design 27.99% (841) 40.60% (1,220) 16.87% (507) 14.54% (437)
ITCSS 63.89% (1,920) 24.29% (730) 5.56% (167) 6.26% (188)
BEM 13.48% (405) 22.16% (666) 20.83% (626) 43.53% (1,308)
SUIT CSS 68.92% (2,071) 24.96% (750) 3.73% (112) 2.40% (72)

與去年的結果稍有不一樣,大多數 CSS 方法在使用度方面都有所提升。

BEM 仍然是大多數受訪者(43.53%)表示他們感到溫馨的使用方法,比去年的結果上升了 5.37% 。

12 個月增幅最大的是 CSS-in-JS,開發人員表示,他們對使用該模式感到滿意的比例上升了 7.6% ,達到 27.52% 。

與去年相比,SMACSS、 OOCSS、 Atomic Design 和 ITCSS 的受訪者中至少據說過它們或者稍微使用過它們的人數都有所增長,其中 Atomic Design 和 ITCSS 的受訪者增長最爲顯著。

具體而言,縱觀上述 CSS 架構方法,即 SMACSS、 OOCSS、 Atomic Design、 ITCSS 和 CSS-in-js,認爲使用其中至少一種方法感到溫馨的受訪者比例,從去年的 34.90% 上升至 2019 年的 42.26% ,上升了 7.36% 。 當看到那些至少有用一點這些 CSS 方法的受訪者時,這個數字從 2018 年的 66.49% 上升到了 70.75%

這些結果代表跨 CSS 方法和命名模式的用戶認知正在上升,BEM、 CSS in-js 和 Atomic Design 是這一領域最著名的。

Q10 - 使用 CSS 工具

繼續關注 CSS 方法,問題 10-這些 CSS 方法或工具你目前在你的項目中使用?

讓咱們來看看結果。

在下面的可用答案中省略了 n.b.CSS-in-JS,由於問題 11 只關注 CSS-in-JS 的用法。

工具 / 方法 投票數 百分比 百分百變化(截至 2018 年)
Autoprefixer 1708 56.84% +0.13%
BEM 1368 45.52% +2.01%
Stylelint 826 27.49% +4.71%
Modernizr 634 21.10% -8.24%
Atomic Design 463 15.41% +0.19%
面向對象 CSS (OOCSS) 218 7.25% -1.98%
SMACSS 173 5.76% -0.89%
ITCSS 155 5.16% +0.36%
SUIT CSS 46 1.53% +0.03%
我不使用任何這些方法或工具 664 22.10% +5.18%

Autoprefixer 在這些工具和方法中使用最多(56.84%) ,其次是 BEM (45.52%)和 Stylelint (27.49%)。 這些數據都比 2018 年略有增加,其中 Stylelint 的增幅最大,達到 4.71% 。

在過去的 12 個月裏,Modernizr 的使用率降低了 8.24% ,降至 21.10% ,延續了去年觀察到的使用率降低的趨勢。

雖然 CSS 方法的使用程度彷佛略有增加,但它們的使用水平與 2018 年的水平至關接近。 Atomic Design 仍然是最流行的 CSS 設計方法,有 15.41% 的開發者使用它。

整體而言,這些數字代表,自 2018 年以來,這一領域已經進入了整合的一年。

Q11 - CSS-in-JS 用法

下一個問題是今年調查的一個新問題,它詢問了一個最近很受關注的領域—— css in-js。

使用 CSS-in-JS 工具的開發人員數量已經增加到了這樣一個程度,看看哪些工具在這個領域是最流行的會頗有趣。

因此問題是-你更喜歡哪一個 CSS-in-JS 工具?

工具 / 方法 投票數 百分比
我不在個人項目中使用 css in-js 1,662 55.31%
Styled Components 812 27.02%
CSS Modules 292 9.72%
Emotion 119 3.96%
JSS 50 1.66%
Aphrodite 10 0.33%
Radium 1 0.03%
其餘 59 1.96%

44.69% 的受訪者表示,他們如今使用 css in-js 工具,其中最流行的選項是 Styled Components (27.02%)。 CSS Modules(9.72%)和 Emotion (3.96%)是開發人員接下來最流行的工具。

大多數開發人員(55.31%)回答說他們不使用 css in-js 工具。 這仍然是一個相對較新的工具領域,而且考慮到它是專門用於某些用例的,所以看到這種狀況並不使人驚訝。

正如您可能預期的那樣,當聲稱擁有高級或專業 JS 技能的開發人員進行過濾時,使用 css in-JS 工具的受訪者比例上升到了 51.38% 。 這也許並不奇怪,由於 CSS-in-JS 一般與 JavaScript 框架結合使用。

總的來講,很明顯 css in-js 正在成爲許多開發人員工具包的重要組成部分。 看看這些數字在將來會有什麼變化是頗有趣的。

Q12 - 使用 CSS 新特性

最後一個與 CSS 相關的問題集中在受訪者對 CSS 新特性的瞭解上。

關於最新的 CSS 特性,有這麼多的文章和討論,瞭解有多少開發人員已經開始將這些特性付諸實踐,並得到了使用它們的經驗,老是頗有趣。

所以,受訪者被要求-請說明您的經驗,如下 CSS 功能。

如下是調查結果:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
CSS Grid 0.90% (27) 21.90% (658) 48.62% (1,461) 28.59% (859)
Flexbox 0.43% (13) 2.50% (75) 16.67% (501) 80.40% (2,416)
CSS 自定義屬性 8.95% (269) 30.58% (919) 32.58% (979) 27.89% (838)
CSS Houdini 51.75% (1,555) 46.46% (1,396) 1.56% (47) 0.23% (7)

Flexbox (上漲 12.81% 至 80.40%)、 CSS Grid (上漲 10.11% 至 28.59%)和 CSS 自定義屬性(上漲 8.86% 至 27.89%)的開發人員數量都有所上升,你們如今以爲使用它們很舒服。

幾乎全部受訪的開發者都使用過 Flexbox,97.07% 的受訪者表示他們至少使用過一點(2018 年這一數字爲 93.53%)。 能夠確定地說,如今全部前端開發人員都指望擁有 Flexbox 的知識。

CSS Grid 和 CSS 自定義屬性都發現,從據說過或讀到過它們到至少使用過一點這個功能的受訪者數量有很大的變化。 對這些功能的瞭解彷佛仍在增加,更多的受訪者表示他們已經使用了一些這些功能,而不是那些以爲使用它們很舒服的人。

Css Houdini ——一組幫助開發人員本地擴展 CSS 的 api ——今年第一次被問及。 46.46% 的受訪者表示他們據說過或讀過該功能,但只有 1.79% 的人至少使用過一點。 這個特性仍然是最前沿的,因此目前不多有開發人員使用它也許並不奇怪。

Q13 - JavaScript 知識水平

接下來是調查的第二部分,問題集中在 JavaScript 和它的工具生態系統上。

首先,我問了受訪者-你如何評價本身對 JavaScript 及其相關工具和方法的知識?

如下是結果:

知識 投票數 百分比
初學者 70 2.33%
初學者(初級和中級之間) 261 8.69%
中級 901 29.98%
高級(介於中級和專家之間) 1,237 41.16%
專家 536 17.84%

絕大部分受訪者認爲本身至少達到中級或中級以上水平(88.98%) ,大多數受訪者認爲本身是高級或專家(59.0%)。

若是說這反映了咱們整個行業的知識水平,那就錯了——更有可能的是,這隻反映了參加調查的這我的的知識水平。 正如您在此上下文中可能指望的那樣,權重更傾向於高級。

Q14 - 任務管理器

去年咱們看到 NPM Scripts 的使用在必定程度上領先於 Gulp。 他們在 12 個月內鞏固了他們的地位嗎?

受訪者被問到的問題是: 在典型的項目工做流程中,您更喜歡使用哪一個任務管理器?

任務執行者 投票數 百分比 百分比變化(截至 2018 年)
NPM Scripts 1,933 64.33% +16.44%
Gulp 557 18.54% -11.02%
沒有使用 273 9.08% -1.61%
Grunt 76 2.53% -3.26%
圖形用戶界面應用程序(即 Codekit) 30 1.00% -0.04%
Make 21 0.70% +0.06%
其餘 115 3.83% -0.56%

從這些結果能夠清楚地看出,NPM 腳本已經穩固地鞏固了它在這一類別中的地位。 64.33% 的受訪者表示他們如今使用它,比去年增長了 16.44% 。

幾乎全部這類工具的使用率都有所降低,18.54% 的開發人員使用 Gulp (降低了-11.02%) ,只有 2.53% 的開發人員使用 Grunt (降低了-3.26%)。

9.08% 的受訪者表示他們沒有使用任務管理器,儘管這一比例比去年的結果降低了 1.61% 。

所以,這種趨勢彷佛繼承了去年的結果,開發人員穩步地從 Gulp 和 Grunt 遷移到 NPM Scripts。

Q15 - 瞭解 JavaScript 庫和框架

在如下三個問題中,咱們詢問了受訪者對 JavaScript 庫和框架的知識和使用水平。

去年,React,Vue 和 Angular 2 + 在知識水平上得到了最大的收益。 仍然是大多數開發人員感到溫馨的工具,但它的實際使用水平大幅降低。

這個問題着眼於各類工具的知識水平,要求受訪者指出他們在哪些 JavaScript 庫和框架中有經驗。

如下是調查結果:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
jQuery 0.03% (1) 2.80% (84) 21.80% 75.37% (2,265)
Lodash 8.09% (243 22.50% (676) 28.75% (864) 40.67% (1,222)
Underscore 12.58% (378) 32.58% (979) 26.39% (793) 28.45% (855)
React 0.27% (8) 24.53% (737) 26.86% (807) 48.35% (1,453)
Vue.js 0.43% (13) 50.18% (1,508) 26.19% (787) 23.19% (697)
Angular 1 0.57% (17) 50.75% (1,525) 29.85% (897) 29.85% (897)
Angular 2+ 0.40% (12) 63.73% (1,915) 20.07% (603) 15.81% (475)
Ember 5.49% (165) 79.03% (2,375) 8.22% (247) 7.25% (218)
Preact 21.30% (640) 65.02% (1,954) 9.08% (273) 4.59% (138)
Backbone 8.55% (257) 65.69% (1,974) 18.20% (547) 7.55% (227)
Knockout 23.43% (704) 62.53% (1,879) 10.88% (327) 3.16% (95)
Aurelia 44.79% (1,346) 51.48% (1,547) 2.73% (82) 1.00% (30)
MeteorJS 18.24% (548) 71.45% (2,147) 8.95% (269) 1.36% (41)
Polymer 18.64% (560) 71.48% (2,148) 8.39% (252) 1.50% (45)
D3.js 13.48% (405) 49.68% (1,493) 29.55% (888) 7.29% (219)

調查結果顯示,使用 jQuery (75.37%)、 React (48.35%)、 Lodash (40.67%)、 underline (28.45%)和 Vue.js (23.19%)的調查對象中,使用效果最好的工具是 jQuery (75.37%)。

使用 React 和 Vue 的開發人員數量增加最快,48.35% 的開發人員說他們如今使用 React 感到很舒服(比 2018 年增長了 7.92%) ,23.19% 的開發人員說 Vue 也是如此(增長了 6.12%)。

對 jQuery 持相同觀點的受訪者數量略有降低,爲 75.37% (比 2018 年降低了 4.36%)。

Lodash 的知識水平也有所提升,使用該知識的人稍微增長了(28.75%),使用它的人感到溫馨(40.67%)分別增長了+ 3.15%和+ 3.70%。

今年,D3.js 首次成爲這個問題的一個選項,7.29% 的開發者表示他們以爲使用 D3.js 很舒服。

查看全部 JavaScript MV * 框架的知識水平——所以列表中除了 jQuery、Underscore、 Lodash 和 D3.js 以外的全部框架——78.54% 的受訪者表示,他們以爲至少使用了其中一個框架。 這個數字比去年增加了 8.04% ,自 2016 年以來增加了 28% ,代表了前端開發者至少了解其中一個工具的重要性。

Q16 - 最經常使用的 JS 框架 / 庫

接下來的問題是: 您目前在項目中使用最頻繁的 JavaScript 庫和 / 或框架是什麼?

受訪者被要求選擇他們在項目中使用的全部(或不選擇)工具。

答覆以下:

投票數 百分比 百分比變化(截至 2018 年)
React 1,569 52.21% +4.82%
jQuery 1,106 36.81% -14.24%
Lodash 986 32.81% -1.01%
Vue.js 816 27.15% +4.21%
Angular (v2+) 472 15.71% +1.59%
D3.js 267 8.89% N/A
Ember 201 6.69% +0.68%
Underscore 199 6.62% -1.22%
AngularJS 191 6.36% -4.06%
Preact 75 2.50% -0.48%
Backbone 55 1.83% -0.72%
Polymer 35 1.16% -0.58%
Knockout 30 1.00% -0.83%
Aurelia 26 0.87% -0.25%
MeteorJS 24 0.80% -0.57%
我不使用任何這些方法或工具 120 3.99% +0.38%

自 2015 年調查開始以來,jQuery 第一次再也不是最經常使用的 JS 工具,React 如今佔據了這個位置。

52.21% 的開發者說他們常用 React 在他們的項目,比去年增長了 4.82% 。 36.81% 的受訪者表示他們常用 jQuery,比去年降低了 14.24% 。

其次是 Lodash (32.81%)、 Vue.js (27.15%)和 Angular v2 + (15.71%) ,與 2018 年相比分別有 -1.01% 、 + 4.21% 和 + 1.59% 的變化。

Q17 - 最基本的 JS 框架 / 庫

最後一個關於 JS 框架的問題是: 在你的大多數項目中,你認爲哪一個 JavaScript 庫或框架對你來講是必不可少的?

去年,React 得到了來自開發者的最大份額的回覆,可是 12 個月以來有什麼變化嗎?

讓咱們來看看:

投票數 百分比 百分比變化(截至 2018 年)
React 985 32.78% +4.31%
它們都不是必不可少的——我只是在個人項目中使用本地 JavaScript 就感到很舒服 651 21.66% +0.05%
Vue.js 404 13.44% +3.22%
jQuery 335 11.15% -8.59%
Angular (v2+) 255 8.49% +2.30%
Ember 167 5.56% +1.17%
Lodash 73 2.43% -0.99%
AngularJS 22 0.73% -0.97%
Aurelia 18 0.60% 0%
Backbone 11 0.37% +0.08%
Preact 8 0.27% 0%
Underscore 7 0.23% -0.19%
Polymer 7 0.23% -0.28%
MeteorJS 4 0.13% -0.05%
Knockout 1 0.03% -0.13%
D3.js 1 0.03% N/A
其餘(請註明) 56 1.86% +0.07%

在 32.78%的受訪者中,React 鞏固了其在今年業績中的地位,他們認爲這是最重要的 JavaScript 庫或框架。這個數字比去年的調查增加了+ 4.31%。

21.66% 的開發者表示,他們認爲在這個類別中沒有必要的工具。

其次是 Vue.js,增加了 13.44% (比去年增加了 3.22%) ,jQuery 增加了 11.15% (降低了 8.59%) ,Angular v2 + 增加了 8.49% (上升了 2.3%)。

當按經驗水平過濾時,結果會更加明顯。 具備 0-2 年前端開發經驗的開發人員中,有 45.14%的人表示 React 對他們相當重要。 當查看那些具備 10 年以上經驗的開發人員時,這一數字降低到了 24.02%。 具備該經驗水平的開發人員中,有 28.06%的人還說,沒有庫或工具對他們來講是必不可少的。

總的來講,從與 JS 庫和框架相關的全部三個問題的結果來看,React 的發展水平和使用率仍在增加,而 vue.JS 顯然是第二受歡迎的 JavaScript 框架(儘管仍然落後於 React 的受歡迎程度)。

jQuery 的使用率雖然穩步降低,但仍然很高——比起 Lodash,它仍然被更多的受訪者頻繁使用。

Q18 - 模塊打包器的使用

在過去的幾回調查中,Webpack 在這類工具中佔據了主導地位。 那麼,是否有工具開始削弱它的統治地位呢?

問題是——您是否在工做流程中使用了 JavaScript 模塊打包器?

如下是調查結果:

模塊打包器 投票數 百分比 百分比變化(截至 2018 年)
Webpack 2,204 73.34% +7.66%
我不使用模塊打包器 440 14.64% -5.91%
Parcel 85 2.83% +1.79%
Rollup 62 2.06% -0.12%
Browserify 49 1.63% -2.09%
RequireJS 37 1.23% -1.32%
SystemJS 3 0.10% N/A
其餘(請註明) 125 4.16% +0.15%

在過去的 12 個月裏,Webpack 持續增加,73.34% 的受訪者表示他們把 Webpack 做爲他們的模塊捆綁器。 這比去年增加了 7.66% 。

其次是 Parcel and Rollup,分別佔 2.83% 和 2.06% 。

聲稱本身沒有使用模塊打包器的開發人員數量也降低了 5.91% ,降至 14.64% 。 這意味着 85.36% 的受訪者正在使用模塊打包器。

Q19 - 模塊打包器和任務管理器的經驗

下一個問題是詢問被調查者關於他們在前面提到的模塊打包機和任務管理器中的經驗水平。

結果以下:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
Gulp 1.66% (50) +0.21% 20.33% (611) 45.79% (1,376) 32.21% (968) + 2.20% 45.79% (1,376) 45.79% (1376) -3.76%
NPM Scripts 3.13% (94) - 1.23% 9.15% (275) 64.39% (1,935) 23.33% (701) - 3.42% 64.39% (1,935) + 8.25%
Grunt 2.93% (88) + 0.68% 34.51% (1,037) 24.59% (739) 37.97% (1,141) +1.93% + 1.93% 24.59% (739) -3.98%
Webpack 2.03% (61) -0.61% 13.28% (399) 52.38% (1,574) 32.31% (971) +0.92% + 0.92% 52.38% (1,574) +5.70%
Browserify 11.91% (358) +2.33% 52.95% (1,591) 9.38% (282) 25.76% (774) -0.76% 9.38% (282) -2.41%
Parcel 30.18% (907) -15.14% 49.78% (1,496) 7.05% (212) 12.98% (390) +7.47% 7.05% (212) +4.32%

結果顯示,大部分受訪者認爲最適合使用的工具是 NPM Scripts (64.39%)、 Webpack (52.38%)和 Gulp (45.79%)。

Npm Scripts 和 Webpack 發現,使用它們的開發人員數量增加最快。

使用 Parcel 的人數也出現了不錯的增加,使用過至少一點 Parcel 的受訪者(12.98% ,上升了 7.47%)和使用駕輕就熟的受訪者(7.05% ,上升了 4.32%)均比 2018 年有所上升。

Q20 - JavaScript-轉換器

在最近的兩次調查中,Javascript 的轉換器已經發展到一個水平,以致於如今絕大多數開發人員如今都在其工做流程中使用它。

雖然我不認爲 JavaScript 的使用在過去的 12 個月裏有所降低,可是看看它的使用水平以及它仍在增加的程度仍是頗有趣的。

問題是-您是否使用工具將您的 JavaScript 從 ES6 編譯成 ES5? (即 Babel)

研究結果以下:

回答 投票數 百分比 百分比變化(截至 2018 年)
是的 2,451 81.56% + 4.80%
不,我據說過這些工具,但沒用過 466 15.51% - 4.01%
沒有我從沒據說過 JavaScript 轉換器 88 2.93% - 0.79%

編譯器的使用持續增加,目前有 81.56%的受訪者在其工做流程中使用,增加了 4.8%。

如您所料,在前端開發方面經驗較少的開發人員不太可能使用編譯器,有 0-2 年經驗的受訪者中有 70%表示這樣作。

Q21 - JavaScript 擴展語言

下一個問題是去年增長的一個新問題,關注擴展語言,好比 TypeScript 和 Flow。

TypeScript 是當時大多數受訪者都習慣使用的工具,可是這種狀況在 12 個月後發生了變化嗎?

問題是-請說明您使用如下 JavaScript 擴展的經驗。

如下是今年的調查結果:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
TypeScript 1.16% (35) - 1.07% 36.74% (1,104) 31.91% (959) 30.18% (907) +2.35% + 2.35% 31.91% (959) +10.03% + 10.03%
Flow 27.92% (839) - 5.99% 55.97% (1,682) 4.33% (130) 11.78% (354) +0.83% + 0.83% 4.33% (130) - 0.34%
Elm 29.42% (884) + 0.10% 63.93% (1,921) 1.30% (39) 5.36% (161) 5.36% (161 名) + 0.29% 1.30% (39) + 0.09%
ClojureScript 32.31% (971) - 1.24% 65.69% (1974) 0.27% (8) 1.73% (52) - 0.65% 0.27% (8) - 0.21%
Dart 27.75% (834) N/A 67.62% (2032) 0.50% (15) 4.13% (124) N/A 不適用 0.50% (15) N/A

TypeScript 仍然是大多數受訪者感到舒服的工具,其使用率爲 31.91% ,比去年增加了 10.03% 。

這一類別中的其餘工具的數據沒有真正的變化,沒有真正的增加或降低。

這些結果彷佛代表,當涉及到這類工具時,TypeScript 是大多數開發人員正在尋找的工具。 雖然大多數開發人員還不知道,可是它正在逐年穩步增加,看看這種狀況在將來是否會繼續下去是頗有趣的。

Q22 - JavaScript 靜態代碼檢查

當涉及到 JS 工做流時,JavaScript lint 工具其實是組成的一部分,去年,ESL​​int 顯然是大多數開發人員所使用的工具。

我問的問題是——你用什麼工具來檢查你的 JavaScript? (若有的話)

工具 投票數 百分比 百分比變化(截至 2018 年)
ESLint 2,286 76.07% +15.39%
我不使用 JavaScript linter 360 11.98% -3.42%
JSLint 143 4.76% -2.44%
JSHint 67 2.23% -1.74%
StandardJS 43 1.43% -0.16%
其餘(請註明) 106 3.53% +2.54%

結果顯示了一個很是明顯的趨勢,ESLint 的使用量仍然在上升,而全部其餘 lint 工具的使用量彷佛都在降低。 76.07% 的受訪者表示他們使用 ESLint,比去年增長了 15.39% 。

ESLint 使用率的提升可能要歸功於 TSLint 團隊在 2 月份決定棄用 TSLint,並將精力集中在改善 ESLint 的 TypeScript 支持上。

表示不使用 JavaScript linter 的受訪者比例今年也降低到了 11.98% 。 這意味着 88.02% 的開發者正在使用一個工具來幫助他們在這個領域工做,這比 12 個月前的 84.6% 的調查對象增長了 3.42% 。

所以,沒有真正的驚喜,但進一步鞏固與 ESLint 很是認爲是該類別的首選工具。

Q23 - JavaScript 測試

下一個問題是關於 JavaScript 測試工具的使用。

今年,這個問題的格式略有改變,由於受訪者的反饋顯示,許多開發人員使用了多種工具,而不只僅是一種。 所以,受訪者能夠選擇多個答案,而不是隻選擇一個來反映這種行爲。

我在去年的結果中加入了百分比差別做爲參考,可是因爲這種格式上的改變,全部的工具的使用率均可能至少會有一個小小的增加。

問題是-這些工具中的哪個是你用來測試你的 JavaScript 的? (若有的話)

如下是調查結果:

工具 投票數 百分比 百分比變化(截至 2018 年)
Jest 1,348 44.86% +22.83%
我不使用工具來測試個人 JS 1,071 35.64% -7.98%
Mocha 785 26.12% +12.17%
Jasmine 585 19.47% +8.52%
Enzyme 560 18.64% +16.86%
Cypress 378 12.58% N/A
QUnit 184 6.12% +1.94%
Ava 102 3.39% +2.25%
Tape 57 1.90% +0.98%
其餘(請註明) 109 3.63% +3.63%

和 2018 年同樣,Jest 仍然是大多數受訪者使用的工具,佔 44.86% 。 其次是 Mocha(26.12%)、Jasmine(19.47%)和 Enzyme(18.64%)。

使用任何工具測試 JavaScript 的開發者比例上升到 64.36% ,比去年增長了 7.98% 。

我認爲今年的結果代表,如今有很是普遍的工具可用來進行 JavaScript 測試。 儘管 Jest 是目前最流行的工具,但在這個領域還有不少其餘值得探索的流行選項。

Q24 - 性能工具及特色

下一個問題是關於開發人員如何在構建項目時考慮性能的新增問題。

如今有這麼多的工具和原生特性,當提到頁面性能時,我很好奇哪些工具在整個社區中使用最多。

我問的問題是,這些工具、庫或語言特性中,哪些是你用來幫助提升性能的? (若有的話)。 受訪者能夠選擇一個或多個選項列出。

讓咱們來看看結果:

工具 投票數 百分比
Lighthouse 1,566 52.11%
這些工具都沒有 952 31.68%
WebPageTest 730 24.29%
Service Workers 695 23.13%
Pingdom 317 10.55%
AMP (Accelerated Mobile Pages) 174 5.79%
其餘(請註明) 109 3.63%

Lighthouse 是最受受訪者歡迎的選擇,有 52.11%的人說他們在進行性能測試時使用了它。

使人驚訝的是,第二受歡迎的選項是「這些工具都沒有 ,31.68% 的受訪者說他們沒有使用任何提到的工具或特性。

在其餘可用的選項中,24.29% 的開發者說他們使用 WebPageTest,23.13% 的開發者說他們在他們的項目中使用了 Service Workers。

有趣的是,只有 5.79% 的開發者說他們在他們的項目中實現了 AMP (加速移動頁面)。 考慮到谷歌在過去幾年裏爲 AMP 的實施所付出的努力,彷佛在受訪者的使用水平方面仍然是至關小衆的。

Q25 - 可訪問性測試

今年調查的另外一個新問題是,調查受訪者對可訪問性測試工具的使用水平。

問題是這些可訪問性工具中哪些是你用來測試你的網站 / 應用程序的? 受訪者能夠選擇指定的一個或多個選項。

如下是調查結果:

工具 投票數 百分比
我不使用任何工具來測試個人網站 / 應用程序的可訪問性 1,897 63.13%
Colour Contrast Checker (i.e. contrastchecker.com) 667 22.20%
Screenreader (i.e. JAWS, Voiceover) 464 15.44%
WAVE 285 9.48%
其餘(請註明) 282 9.38%

使人驚訝的是,63.13% 的受訪者表示他們沒有使用任何工具來測試他們的項目的可訪問性。

22.20% 的受訪者表示他們使用了顏色對比度檢查器,只有 15.44% 的人表示他們使用了屏幕閱讀器進行可訪問性測試。

我不得不說,這些數字讀起來很是使人沮喪。

看看這些原始數據,你就會發現爲何人們不使用這些工具,可是做爲一個相信每一個人都有權訪問咱們正在建設的網站的人,看到幾乎三分之二的開發者沒有使用工具來測試他們的項目的可訪問性是使人失望的。

像 Wave 和 Axe 這樣的工具(不少受訪者在「其餘工具」下提到過)很是容易使用,若是你尚未使用過,我強烈建議你試試看。

但願咱們可以更多地展現這些工具的價值和易用性,這些使用數字在開發人員中可能會增長更多。

Q26 - JavaScript 包管理器

今年調查的倒數第二個問題是關於 JS 包管理器的,問題是——您在工做流中主要使用哪一個 JavaScript 包管理器?

去年,NPM 是最受歡迎的軟件包管理器,可是 Yarn 在過去的 12 個月裏有什麼進展嗎?

你們是這樣迴應的:

回答 投票數 百分比 百分比變化(截至 2018 年)
NPM 1,965 65.39% +2.00%
Yarn 895 29.78% -0.36%
我不使用包管理器 135 4.49% -1.24%
其餘 10 0.33% -0.40%

查看調查結果,NPM 的使用率略有增加,65.39% 的受訪者說他們如今使用它。

Yarn 使用率保持至關穩定,降低了一小部分,爲 29.78% 。

總的來講,大多數人彷佛很高興使用 NPM 做爲他們的軟件包管理器,與去年的數據相比,在這個類別中沒有觀察到真正的變化。

Q27 - 通用工具的使用

最後一個問題考察了各類前端工具的知識水平(其中一些工具不徹底適合前面提到的任何類別)。

被調查者被要求-請說明您使用如下前端工具的經驗。

如下是人們的反應:

從沒據說過 據說過 / 瞭解過 用了一點 使用時感受溫馨
NPM 0.43% (13) -0.41% 1.80% (54) 87.02% (2,615) 10.75% (323) -1.14% - 87.02% (2,615) +2.24%
Yarn 3.29% (99) -2.95% 22.30% (670) 50.62% (1,521) 23.79% (715) +2.84% 50.62% (1,521) +4.32%
Babel 2.70% (81) -1.07% 16.71% (502) 9.62% (1,491) 30.98% (931) +1.22% + 49.62% (1,491) 4 +4.08%
Prettier 15.67% (471) -14.76% 21.60% (649) 40.43% (1,215) 22.30% (670) +6.25% 40.43% (1,215) +16.53%
Yeoman 24.76% (744) +5.63% 40.67% (1,222) 7.89% (237) 26.69% (802) -3.07% 7.89% (237) -1.37%

在這些工具中,NPM 是大多數受訪者認爲他們感受舒服的工具(87.02%), 和 Babel,分別佔 50.62% 和 49.62% ,是開發人員第二熟悉的工具,在過去的 12 個月裏,這兩個工具的開發人員知識水平都有小幅提高。

與去年的調查結果相比,最大的變化是如今使用 Prettier 的受訪者數量增長了 16.53% ,達到 40.43% 。

自由開發者的知識水平略有降低,去年也出現了這一趨勢。

總結

這樣咱們就能夠了–在工具方面又是有趣的一年!

在工具的某些領域,開發人員顯然是在圍繞一個工具進行整合。 例如,ESLint、 NPM Scripts 和 Webpack 分別用於 JavaScript 的 lint、任務運行和模塊打包。

看看 JavaScript 框架和庫,React 保持了它做爲受訪者中最重要的框架的地位,受訪者將 Vue.JS 列爲第二重要的 JS 框架 / 庫。 很大比例的開發人員(21.66%)仍然認爲沒有單一的框架或庫是必不可少的,原生 JS 每一年都在變得更增強大。

今年調查結果中最使人震驚的數字來自無障礙測試,63.13% 的受訪者表示他們沒有使用任何工具來測試他們的項目。 做爲一個行業,咱們必須作得更好——不只僅是由於這是道德上應該作的正確事情,還由於從法律的角度來看,無障礙訴訟正變得愈來愈廣泛

在 CSS 工具方面,Sass 仍然是最流行的 CSS 處理器,可是 Bootstrap 的流行度略有降低,由於大多數開發者如今選擇不在他們的項目中使用任何 CSS 框架。

如今有 53.21% 的開發者使用 CSS linter,52.08% 的開發者使用 CSS 命名方案。

Css in-js 也在以穩定的速度增加,44.69% 的開發人員表示他們使用了 css in-js 工具。

總的來講,我認爲隨着咱們的前端工具變得更加成熟,整合彷佛正在發生,這是使人鼓舞的。 隨着更強大的工具的出現,取代這些工具的需求再也不那麼廣泛,我認爲咱們正在這些結果中看到這一點的證據。

在大多數工具類別中,如今都有明確的領導者-幾年前尚未作到這一點。 這有助於減小知識流失,可能使全部級別的開發人員均可以更輕鬆地知道在選擇新工具時最好在哪裏花時間,這只是一件好事。

再次感謝參加今年活動的每個人。

若是任何人對任何結果有任何疑問,請在 Twitter 上與我聯繫,我會盡我所能提供幫助。

發佈於 2019 年 11 月 12 日

相關文章
相關標籤/搜索