2019年前端報告

前端2019年調查報告

背景說明

從開始啓動調查到結束是有一段時間了,可是現有結果出來了。css

本年的結果有超過3000多人蔘加調用,共有27個問題,問題覆蓋前端工具以及思想方法論。在此,很是感謝各位參與的朋友花費時間來回答這些問題。組織和編寫本次調查結果是有點困難的,由於咱們家裏多一個組員——個人女兒(所以調查結果有點延遲,很是抱歉!)前端

與以往同樣,瞭解過去12個月前端工具的變化是很是有趣的事情,看看咱們的想法和建議是否與行業內的其餘是否一致。經過查看調查結果,咱們能夠了解到今年前端工具的流行趨勢和技術水平標準,同時若是你想知道往年的調查結果變化,能夠查看往年前端調查報告react

感謝致辭

每一年都要花費大量的時間去完成調查,感謝個人同事Wes Bos和個人Boss——Just Eat的大力支持。
Wes是在web開發領域中極爲出名的教學者,不管您是剛開始進行Web開發,仍是有經驗的開發人員但願提高您的技能,我都強烈建議您查看Wes的課程,在連接裏你還能夠看到有關Wes的全部課程。web

最後

最後舒適提示,給本身來杯茶、咖啡或者你本身喜歡的飲料,坐下來好好看看今年的調查結果。npm

(本文略長,仔細閱讀須要大概15分鐘左右)。gulp

前言 免責聲明

本結果僅表明部分前端領域的工做人員的想法。所以,調查結果並非一種標準,只是一個對前端領域工具的粗略調查而已。segmentfault

調查反饋

正如以前提到的,本次調查共收到3005份調查反饋。這比去年少了點,去年是5461份。設計模式

我發現今年在宣傳的時候遇到不少困難,這多是因爲市場多了其餘的調查收集,可是也由於我花費了不少時間去收集詳細的報告反饋。儘管有這麼多影響因素存在,收到3005份仍然使人吃驚。瀏覽器

今年的調查報告的宣傳渠道有:Twitter, Reddit, HackerNews, DesignerNews, Echo.js, LinkedIn 和 Frontendfront,特別是前端社區: FrontEnd FocusCSS Weekly架構

你可能會在報告中看到我將2018年的數據與今年進行對比描述。

問題1 你在前端工做了幾年

第一個問題可以得出受訪者在前端領域中工做經歷分佈。

問題內容:你在工做中使用前端技術多久了?

結果:

年限 數量 佔比
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.8%)略微有所上升,因此今年受訪者會對前端會更有經驗。可是值得注意的是,這裏面有部分多是去年已經參與調查的受訪者,因此今年的工做經歷的佔比就有所上升。

只有12.31%的受訪者是工做年齡少於2年的。

與去年相同,今年的受訪者大部分都是前端技術領域的佼佼者,因此其餘問題的答案也至關有參考價值的。

問題2 CSS的知識點

第二個是在調查受訪者對CSS的掌握程度。

問題內容:你如何評價本身對CSS以及相關工具方法的掌握程度?

結果:

掌握程度 數量 佔比
初學 35 1.16%
新手 (在中級和初學之間) 243 8.09%
中級 815 27.12%
高級 (在中級和專家之間) 1452 48.32%
專家 460 15.31%

結果圖

90.75%的受訪者表示,他們對CSS的知識處於中級或以上水平,大多數(63.63%)的人將本身評爲高級或專家。

就像我每一年提到的那樣,關於技術掌握程度的問題都是受訪者主觀的印象。一我的關於成爲CSS專家須要什麼的想法可能與另外一我的的想法相差很大。

暫且不論這個,細分調查者的CSS登記對調查中其餘問題結果仍是頗有的做用的,例如:更高級的開發者偏喜歡的工具,卻不是新手喜歡的工具。在以後的結果裏,我將會參考回當前CSS等級。

問題3 CSS處理器的使用率

第一個關於CSS工具使用的CSS處理器相關的。

在過去調查的幾年裏, 這個問題是問調查者喜歡哪一種CSS處理器。今年,問題將直接修改成容許調查者選擇多個工具。

問題內容:哪些CSS處理器你會使用舒服?

這個問題自從2016年就開始,Sass就一直佔據主流工具,今年是否有其餘變化呢?

注意:在結果已經把今年的數據和去年的數據進行對比,可能今年是多選,因此今年全部工具的使用率有所提高。

CSS處理器 投票數 佔比 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%

CSS處理器

相比較前幾年,Sass處理器在開發者中仍是佔據主流地位,有77.27%的開發者選擇會使用它。

有趣的是,PostCSS處理如今已經排在第二名,有28.72%的調查者使用它。這是因爲開發者如今能夠選擇多個處理器的使用,能夠更清晰表達出PostCSS處理的使用率,所以也說明PostCSS也在逐漸成爲一個主流工具。

問題4 CSS處理器的經驗

下一個問題是跟着上一個問題的, 是問受訪者在CSS處理器的使用經驗。

下面就是結果:
<escape>

處理器/使用經驗 從沒聽過 瞭解過 使用過 使用舒服
標準Sass或SCSS語法 0.33% (10人) +0.13% 6.82% (205人) -2.17% 15.34% (461人) -2.61% 77.50% (2,329人) +4.64%
Less 1.40% (42) +0.21% 35.81% (1,076人) -0.52% 35.34% (1,062人) +1.10% 27.45% (825人) -0.79%
Stylus 21.06% (633人) -1.70% 61.93% (1,861人) +1.56% 11.35% (341人) +0.47% 5.66% (170人) -0.33%
PostCSS 15.44% (464人) -1.99% 41.30% (1,241人) -4.06% 22.73% (683人) +1.98% 20.53% (617人) +4.07%

</escape>

CSS處理器

這些結果和上一個問題保持一致,有超過3分之2的人(77.50%)說他們對Sass常用到,並且僅有7.15%的人從未用過Sass。

PostCSS相對去年則有所提高,20.53%的人說他們常用PostCSS。

Less和Stylus比較穩定,與去年結果相比沒差多少。

從問題3和問題4的結果看來,顯而易見的Sass仍然CSS處理器中的主流工具。

問題5 CSS框架

下一個問題是關於CSS框架的使用經驗>

問題內容: 請指出下面你在項目最常使用的CSS框架?(若是有的話)

去年是Boostrap獨領風騷,今年是否有任何改變嗎?

結果以下:

答案 投票人數 佔比 % 與2018比較
沒使用框架 1,054 35.07% +2.15%
Bootstrap 840 27.95% -7.01%
自定義框架 497 16.54% +1.29%
Tailwind CSS 129 4.29% 沒有
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% 沒有
PureCSS 18 0.60% -0.10%
其餘框架 132 4.39% -0.83%

CSS框架

與前幾年調查結果比較,今年最多人選擇的是有超過3分之1的人選擇沒有使用過框架。

即便再也不是第一名,Boostrap仍然是CSS的主流框架,有27.95%的人選擇了它。相比較去年降低了7.01%。

在Boostrap以後,下一個受歡迎的是Tailwind框架。

與去年的趨勢有點相似,使用CSS框架和CSS的知識水平的仍是有很大的反差。好比:初級開發者會比較喜歡用Boostrap框架,佔43.71%,而高級或專家級別的開發者則降到23.69%。

還有一種明顯的差異(可是在預期內的),就是CSS知識等級與選擇自定義框架的人也有反差。目前有16.54%的人選擇了自定義框架,在新手或初學的開發者中只佔了8.63%會如此作,可是在高級或專家則佔據了20.35%。

總之,就去年而言,今年使用CSS框架的開發者彷佛有所降低。

問題6 CSS命名規範

問題內容: 你有使用過CSS命名規範嗎,好比:BEM 或者 SUIT?

反饋結果以下:

| 選擇 | 人數 | 佔比 | 與2018年比較 |
| - | - | - | - |
|是的 | 1,565 | 52.08% | +3.15% |
|沒,但聽過 | 1,153 | 38.37% | -0.76%|
|沒也從沒聽過 | 287 | 9.55% | -2.39%|

CSS命名規範

自從2016年開發提問CSS命名規範,這是第一次有超過半成的人(52.08%)使用過CSS命名規範,這比去年提高了3.15%。

並且從未聽過CSS命名規範的人也降低到9.55%,這比去年也降低了2.39%。

從這個結果能夠獲得,CSS命名規範正在逐漸成爲主流,也表示愈來愈少的開發者不使用CSS命名規範。

問題7 CSS Lint檢測

自從2016年開始作調查依賴,CSS Lint的使用率就逐年上升。

去年,有50.6%的人選擇從未對CSS作過Lint檢查,因此使人感興趣的是能夠看看今年是否有其餘變化呢?

問題內容:你有使用過任何工具對CSS作lint檢測嗎?

結果以下:

答案 人數 佔比 與2018年比較
1,599 53.21% +3.77%
沒,從未據說過 1,406 46.79% -3.77%

與CSS命名規範同樣,這也是首次有一半的人(53.21%)選擇使用過CSS Lint檢測他們的CSS代碼,這比去年提升了3.77%。

從上面的數據分析,有明顯的對比結果,有60.15%的高級開發者更加喜歡使用CSS Lint檢測代碼,反而只有28.42%的新手或初學者用過。

隨着Stylelint之類的強大工具愈來愈被人所知道,愈來愈多的開發者開始使用CSS Lint檢測他們的CSS代碼。(這在下個問題咱們會進行解析)

問題8 CSS工具使用經驗

後面四個問題將會在涵蓋CSS的方法和輔助工具的使用上,分析不一樣CSS等級開發者的佔比,那麼問題8就是第一個關於工具的。

問題內容:關於Autoprefixer, Modernizr 和 Stylelint的使用經驗。

結果以下:
<escape>

CSS工具/使用經驗 從沒聽過 瞭解過 使用過 使用舒服
Autoprefixer 16.71% (502) -0.81% 15.17% (456) -1.93% 17.60% (529) +0.64% 50.52% (1,518) +2.10%
Modernizr 12.51% (376) +1.45% 28.99% (871) +1.83% 34.48% (1,036) +0.22% 24.03% (722) -3.49%
Stylelint 37.74% (1,134) -6.46% 24.86% (747) -1.01% 14.38% (432) +2.33% 23.03% (692) +5.16%

</escape>

在這三個工具中,Autoprefixer是最受歡迎的,有50.52%的人會使用它很是舒服。

Stylelint則比較去年有了較多提高, 23.03%的人以爲使用很是舒服,比去年提高了5.16%。

Modernizr有小幅度降低,不少人都沒聽過,並且以爲使用很是舒服的人的比去年降低了3.49%,只佔了24.03%。

問題9 CSS方法和命名規範的使用經驗

跟着上一個問題,受訪者會被問:

問題內容:請說一下你會使用哪一種CSS方法和命名規範?

結果以下:

<escape>

CSS方法/使用經驗 從沒聽過 瞭解過 使用過 使用舒服
CSS-in-JS 7.72% (232) -4.59% 39.43% (1,185) -2.14% 25.32% (761) -0.88% 27.52% (827) +7.60%
SMACSS 40.27% (1,210) -0.86% 39.13% (1,176) +0.07% 12.71% (382) +0.99% 7.89% (237) -0.20%
Object Oriented CSS (OOCSS) 30.22% (908) -1.77% 47.29% (1,421) +2.22% 14.18% (426) +0.15% 8.32% (250) -0.60%
Atomic Design 27.99% (841) -5.94% 40.60% (1,220) +3.24% 16.87% (507) +0.22% 14.54% (437) +2.47%
ITCSS 63.89% (1,920) -5.84% 24.29% (730) +3.36% 5.56% (167) +1.51% 6.26% (188) +0.97%
BEM 13.48% (405) -2.52% 22.16% (666) -3.68% 20.83% (626) +0.83% 43.53% (1,308) +5.37%
SUIT CSS 68.92% (2,071) -1.67% 24.96% (750) +1.10% 3.73% (112) +0.40% 2.40% (72) +0.18%

</escape>

與去年相比有了一個明顯的提高,就是不一樣等級的開發者都慢慢接受了CSS方法和命名規範。

BEM仍然是主流的命名規範,佔了43.53%,這比去年提高了5.37% 。

最大的改變是CSS-in-JS,有27.52%的開發者以爲使用起來很舒服,比去年了提高了7.6%。

選擇SMACSS,OOCSS,Atomic Design和ITCSS的人也有所提高,至少大部分都選擇了其中一種CSS方法,其中Atomic Design和ITCSS的收穫最爲明顯。

仔細看上面提到過的CSS架構方法,如:SMACSS, OOCSS, Atomic Design, ITCSS 和 CSS-in-JS ,以爲使用舒服的人從去年的34.90%上升到2019年的42.26%,這足足提高了7.36%。並且至少試過其中一種的開發者也提高到70.75%,2018年的數據是66.49%。

這些結果代表了,CSS方法和命名規範正在不一樣等級開發者中處於上升的趨勢,而BEM, CSS-in-JS 和 Atomic Design正在這個領域的廣爲人知的技術。

問題10 CSS工具使用率

咱們就繼續聚焦在CSS工具上,第10個問題就是:

問題內容:哪些CSS方法或工具你仍在項目使用?

注:下面忽略了CSS-in-JS方法,由於問題11會着重進行調查。

|工具、方法 | 人數 | 佔比 | 與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%
|Object Oriented 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 | 2.10% | +5.18%

從上面結果看來,Autoprefixer是最多使用者的CSS工具,緊接着的是BEM有45.52%和Stylelint的27.49%。這都比2018年提高了一點,尤爲是Stylelint的結果上升了4.71%。

使用率佔比未21.10%的Modernizr比去年降低了8.24%,這去年統計出來與前一年相比,繼續保持降低的趨勢。

儘管CSS方法論的知識等級在不斷提高,可是CSS方法和工具的使用率卻與2018年相差很少。Atomic Design仍然是在開發者中最受歡迎的CSS設計模式,使用率達到15.41%。

總之,這些結果代表2018年到今年,CSS方法和工具已經趨於穩固的趨勢。

問題11 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%
Other 59 1.96%

44.69%的調查者說他們如今正在使用 CSS-in-JS工具,其中大部分人(27.02%)正在使用 Styled Components工具, CSS Modules有9.72%,而Emotion(3.96%)將會成爲下一個最受歡迎的工具。

然而大部分開發者(55.31%)說他們從未使用過CSS-in-JS。所以代表了CSS-in-JS仍然是一個新的領域,並且它的特殊用法,有這樣的結果就不奇怪了。

正如你所期待的,當過濾開發者的知識等級爲高級或專家,那麼使用CSS-in-JS的佔比就上升到 51.38%。這也是由於目前不少JavaScript框架都集合了CSS-in-JS。

畢竟,CSS-in-JS也慢慢成爲了大部分開發者的必備技能之一。同時也很是期待將來CSS-in-JS在將來會有什麼樣的變化。

問題12 CSS新特性的使用率

最後有關CSS的問題就是考察調查者們對於CSS新特性的瞭解。

關於CSS新特性,已經有不少人對其作過研究和寫過博客,同時你們都會十分感興趣別人是如何在項目中使用CSS新特性或者使用它們的經驗。

問題內容:請選擇你使用過下面哪些新特性?

結果以下:

從未聽過 瞭解過 使用過一點 常用
CSS Grid 0.90% (27) -0.33% 21.90% (658) -14.47% 48.62% (1,461) +4.69% 28.59% (859) +10.11%
Flexbox 0.43% (13) -0.25% 2.50% (75) -3.29% 16.67% (501) -9.28% 80.40% (2,416) +12.81%
CSS定義變量 8.95% (269) -1.18% 30.58% (919) -14.06% 32.58% (979) +6.38% 27.89% (838) +8.86%
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%,所以可知,全部的開發者對CSS新特性都會常用。

絕大多數的受訪者都說現有都在使用Flexbox,佔比爲97.07%(2018年爲 93.53%)。所以能夠確定的說,如今前端開發者都必須具有Flexbox知識。

從數據上來分析,聽過和使用過一點CSS Grid佈局和CSS定義變量的開發者比較去年有了很大的變更。可是對於這兩個新特性的使用率,聽過和使用過一點的增加速度仍是比常用的高。

CSS Houdini方法,一種用於提供給開發者擴展CSS本地的API方法,也是今年首次歸入到提問範圍中。46.46% 的受訪者說他們有了解過這個特性,可是僅有 1.79%的人說使用過一點。這個特性目前還在發展中,因此對於這樣的低使用率也不出奇。

問題13 JavaScript知識等級

調查已經進入到後半部分,後面咱們將聚焦在JavaScript領域和它的生態系統與工具。

首先,第一個問題會是:

問題內容:你如何評價本身在JavaScript知識以及有關它的工具方法瞭解程度?

|等級 | 人數| Percentage
| - | - | - |
|初學者 | 70 | 2.33%
|新手 (在中級和初學之間) | 261 |8.69%
|中級 |901 |29.98%
|高級 (在中級和專家之間) | 1,237 |41.16%
|專家 |536 |17.84%

大多數受訪者認爲他們的知識等級在中級以上,佔了88.98%,其中超過一半的人認爲他們的等級爲高級或專家水平。

用這樣子的比例去反應前端行業的佔比是錯誤的,它僅僅只能表明本次受訪者的知識水平佔比狀況。正如您所指望的,本次調查仍是比較傾向於技術較好的人。

問題14 任務構建工具

去年在任務構建工具中,npm scripts領先gulp成爲第一名。今年狀況會發生變化嗎?

問題內容:在你平常項目中,你會首先使用哪一種構建工具進行編譯?

任務構建工具 人數 佔比 與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%
Other 115 3.83% -0.56%

上面的圖能夠很清晰的看出NPM Scripts已經緊緊佔據第一名,有64.33%的人如今正項目中使用着,這比去年提高了16.44% 。

然而其餘的工具使用率卻在不斷降低,18.54%的 Gulp降低了11.02%,2.53%的 Grunt降低了3.26%。

有9.08% 的人說從未使用過構建工具,比去年降低了1.61%。

所以從與去年結果比較而言,前端開發者正在他們的項目工程流中用NPM Scripts表明 Gulp 和 Grunt這兩種構建工具。

問題15 JavaScript框架或庫的使用狀況

接下來的三個問題都會是關於JavaScript框架和庫的使用水平。

去年調查結果中,React、Vue和Angular2+都是最大提高的框架。jQuery雖然還是最讓開發者常用的js庫,可是它在實際中已經沒有那麼多使用地方了。

這個問題主要是着重問受訪者對於JavaScript庫和框架的使用狀況。

結果以下:

從未聽過 瞭解過 使用過一點 常用
jQuery 0.03% (1) -0.08% 2.80% (84) +0.49% 21.80% (655) +3.95% 75.37% (2,265) -4.36%
Lodash 8.09% (243) -3.61% 22.50% (676) -3.23% 28.75% (864) +3.15% 40.67% (1,222) +3.70%
Underscore 12.58% (378) +0.09% 32.58% (979) -2.34% 26.39% (793) +1.98% 28.45% (855) +0.27%
React 0.27% (8) -0.11% 24.53% (737) -6.62% 26.86% (807) -1.18% 48.35% (1,453) +7.92%
Vue.js 0.43% (13) -0.6% 50.18% (1,508) -8.86% 26.19% (787) +3.32% 23.19% (697) +6.12%
Angular 1 0.57% (17) -0.07% 50.75% (1,525) +3.43% 29.85% (897) -0.29% 18.84% (566) -3.06%
Angular 2+ 0.40% (12) -0.30% 63.73% (1,915) -1.31% 20.07% (603) -1.41% 15.81% (475) +3.03%
Ember 5.49% (165) +1.04% 79.03% (2,375) -1.52% 8.22% (247) -0.22% 7.25% (218) +0.69%
Preact 21.30% (640) -2.30% 65.02% (1,954) -0.26% 9.08% (273) +2.41% 4.59% (138) +0.14%
Backbone 8.55% (257) +1.77% 65.69% (1,974) -1.86% 18.20% (547) +1.30% 7.55% (227) -1.22%
Knockout 23.43% (704) +2.88% 62.53% (1,879) -2.44% 10.88% (327) +0.22% 3.16% (95) -0.67%
Aurelia 44.79% (1,346) +3.37% 51.48% (1,547) -3.56% 2.73% (82) +0.33% 1.00% (30) -0.14%
MeteorJS 18.24% (548) +2.86% 71.45% (2,147) -1.91% 8.95% (269) -0.33% 1.36% (41) -0.62%
Polymer 18.64% (560) +0.68% 71.48% (2,148) +0.58% 8.39% (252) -1.10% 1.50% (45) -0.15%
D3.js 13.48% (405) N/A 49.68% (1,493) N/A 29.55% (888) N/A 7.29% (219) N/A

jQuery (75.37%), React (48.35%), Lodash (40.67%), Underscore (28.45%) 和 Vue.js (23.19%)是大部分開發者會選擇常用的js框架或庫。

相比較2018年,React和Vue.js是兩個提高最快的框架,React提高了7.92%,Vue.js則提高6.12%,二者在今年在常用框架中共佔據了48.35%。

jQuery還在持續使用中,佔據了75.37%,不過比2018年降低了4.36%。

Lodash框架也有一點點提高,有使用一點的開發者佔了28.75%,還有40.67%的人說常用,分別去年提高了3.15%和3.70%。

今年 D3.js框架也是首次歸入本問題中,有7.29% 的人說會常用它。

在全部JavaScript MV*框架 (除了 jQuery, Underscore, Lodash 和 D3.js )中,有78.54%的人說會常用其中之一。這個結果比2018年提高了8.04% ,比2016年提高了28%,所以對於前端開發者而言,具有其中一種框架的能力是很是有必要的。

## 問題16 最常使用的JavaScript框架

問題內容:您目前在項目上最常使用哪些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%
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再也不是第一名,而是React取代其成爲第一名。

52.21% 的開發者會在他們的項目常用React框架,比去年提高了4.82% 。36.81%的人說他們會使用jQuery,這比去年降低了14.24%。

Lodash (32.81%), Vue.js (27.15%) 和 Angular v2+ (15.71%)則是下一批最受歡迎的框架,分別比去年變化了-1.01%, +4.21% 和 +1.59%。

問題17 最須要的JavaScript庫或框架

問題內容:在你主要的項目裏,以爲哪一個框架或庫是必不可少的?

去年本問題是React成爲大部分開發者的首選,今年會有什麼變化嗎?

結果以下:

框架或庫 人數 佔比 與2018年比較
React 985 32.78% +4.31%
沒有必需的框架或庫 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%
其餘 56 1.86% +0.07%

React今年仍然穩固榜首,有32.78%的開發者說在他們的主要項目中React是必不可少的,這比去年提高了4.31%。

21.66%的開發者認爲在他們項目沒有什麼框架或庫是必須的。

下一批必需的框架是 Vue.js的13.44% ( +3.22% ), jQuery的11.15% ( -8.59%) 和 Angular v2+ with 8.49% (up +2.3%)。

當將受訪者的結果與技術等級一一過濾後,結果更加清晰。45.14%的開發者(0-2年經驗)說React在他們項目中必不可少的,然而這個數據到了10年以上的開發者則降到24.02%。同時,這些經驗豐富的開發者有28.06%的人認爲在項目中沒有任何框架或庫是必需品。

綜上所述,從上面3個有關JavaScript庫或框架的問題調查結果來講,React不管是在技能等級或使用率都是處於領先地位的,Vue.js是緊跟着排在第二的框架。(就是在有些部分落後於React)

jQuery的使用率雖然在不停降低,可是仍然有不少的使用者,至少比Loash還有更多的使用者。

問題18 JavaScript打包工具

在最近兩次調查中,Webpack一直處於主導地位在打包工具領域。因此今年會有其餘工具挑戰它的地位嗎?

問題內容:你會使用哪一種打包工具?

結果以下:

打包工具 人數 Percentage 與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%
其餘工具 125 4.16% +0.15%

Webpack依然保持增加的趨勢,有73.34%的開發者說他們的打包工具都是它,這比去年多了7.66%。

下一批常使用的打包工具是 Parcel 和 Rollup打包工具。

未使用過打包工具的開發比去年降低了5.91%,爲14.64%,這就代表了有85.36%的受訪者都在項目工程中使用打包工具。

相比去年,Webpack仍然是打包工具的領頭羊,並且在將來沒有任何跡象代表其餘工具能代替它的地位。

問題19 JavaScript打包工具或構建腳本的使用經驗

問題內容:受訪者在打包工具或構建腳本上的使用經驗。

結果以下:

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

分析上述結果,排在常用的前三名的工具爲:NPM Scripts (64.39%), Webpack (52.38%) 和 Gulp (45.79%)。

常用NPM Scripts和Webpack工具的人增加速度很快。

Parcel的使用量也有了可觀的增加,受訪者有12.98%的人說使用過一點,比去年增加了7.47%,有7.05%的人說常用,比去年增加了4.32%。

問題20 JavaScript轉義工具

在最近幾年,在開發者的會在項目開發中愈來愈多的使用轉義工具對JavaScript進行轉義。

雖然我不期待JavaScript轉義工具在今年會下降,可是也對它的變化也很感興趣,想知道它到底增加了多少。

問題內容:你是否有使用Babel對JavaScript代碼從ES6轉爲ES5?

結果以下:

選擇 人數 佔比 比較2018年
2,451 81.56% +4.80%
沒,雖聽過但沒使用過 466 15.51% -4.01%
沒,從未聽過 88 2.93% -0.79%

Babel使用率仍在持續的提高,有 81.56%的人說他們已經在項目中使用Babel,這比去年提高了4.8%。

正如你所期待,在較少工做經驗的開發者中有70%的人代表他們不多使用Babel轉義工具。

21 JavaScript擴展語言

本問題的是去年新增的問題,主要調查受訪者對JavaScript擴展語言的瞭解,如:TypeScript 和 Flow。

TypeScript是去年排在常用的首位,可是今年呢?

問題內容:請說出你在JavaScript擴展語言的經驗?

從未聽過 瞭解過 使用過一點 常用
TypeScript 1.16% (35) -1.07% 36.74% (1,104) -11.31% 30.18% (907) +2.35% 31.91% (959) +10.03%
Flow 27.92% (839) -5.99% 55.97% (1,682) +5.50% 11.78% (354) +0.83% 4.33% (130) -0.34%
Elm 29.42% (884) +0.10% 63.93% (1,921) -0.47% 5.36% (161) +0.29% 1.30% (39) +0.09%
ClojureScript 32.31% (971) -1.24% 65.69% (1,974) +2.09% 1.73% (52) -0.65% 0.27% (8) -0.21%
Dart 27.75% (834) N/A 67.62% (2,032) N/A 4.13% (124) N/A 0.50% (15) N/A

TypeScript仍就是大部分開發者會常用的語言,佔了 31.91%,比去年增加10.03%。

可是其餘擴展語言彷佛沒有看到有大的變化,無論是增加仍是減小。

這個結果彷佛就代表了當項目中須要用到JavaScript擴展語言的時候, Typescript 已是大部分開發者的首選項。雖然目前絕大多數的開發者並不瞭解 Typescript ,可是隨着時間的不斷增加,將來 Typescript會發展什麼樣子呢?

問題22 JavaScript Linting

JavaScript Lint工具其實能夠算是JS工程化的一部分了,在去年ESLint已經很清晰佔領Lint工具的主要地位。

問題內容:你會選擇哪個Lint工具在項目中應用?

結果以下:

Lint工具 人數 佔比 與2018年比較
ESLint 2,286 76.07% +15.39%
未使用過 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的使用率卻在不斷提高。76.07%的人代表他們會在項目開發中使用ESLint,這比去年提升了15.39%。

其中有部分緣由可能要感謝Typescript團隊,這多是由於他們在今年2月份宣佈放棄TSLint,和集中能力去改善ESLint在TS項目中的支持(新聞連接)。

今年從未使用過Lint工具的人數降低到了11.98%。這代表了有88.02% 的開發者已經會在項目中使用Lint工具改善代碼質量,這比去年的84.6%提升了3.42%。

沒有意外狀況的話,ESLint將會在Lint工具中持續處於領導地位。

問題23 JavaScript測試工具

本問題主要調查受訪者們在JavaScript測試領域的知識。

今年,本問題有所改變,由於大部分受訪者認爲在項目中他們可能使用多種測試工具。所以,今年受訪者能夠進行多選。

下面結果中將會列出與去年對比的增加比,因爲今年是多選,因此每一個工具均可能是提高的狀況。

問題內容:你會選擇哪些工具來測試你的代碼?(多選)

結果以下:

測試工具 人數 佔比 與2018年比較
Jest 1,348 44.86% +22.83%
沒有使用過 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%
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%) 則是下一批最常使用的測試工具。

有64.36%的開發者會使用測試工具測試他們的代碼,這比去年增加了7.98。

我認爲今年的結果已經代表在JavaScript測試中有不少測試工具可供選擇。即便Jest還是排在首位,可是在市面上還有各類各樣的工具去幫助你測試JavaScript。

問題24 性能測試

本問題是今年新增的,主要爲了找出開發者是如何利用工具來表現他們項目的性能。

目前市面上有不少性能工具或瀏覽器特性能夠用來展現網站性能,可是我仍然期待能夠看到最多使用的工具是什麼。

問題內容:您使用如下哪些工具,庫或語言功能來提升性能?(多選)

結果以下:

工具 人數 佔比
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(Accelerated Mobile Pages),這多是由於Google這幾年一直力推AMP,可是它仍然是小衆市場所能適用的工具。

問題25 輔助功能測試

這也是今年新增的問題,主要是分析出受訪者輔助功能測試工具的使用。

注:輔助功能指的是網站或應用對那些沒法正常訪問的用戶提供輔助性訪問功能,如:提供視覺障礙者訪問功能。

問題內容:你會在網站或應用中會使用哪一種輔助功能測試工具?

工具 人數 佔比
從未使用 1,897 63.13%
顏色對比檢測 (如: contrastchecker.com) 667 22.20%
屏幕閱讀測試 (如: JAWS, Voiceover) 464 15.44%
WAVE 285 9.48%
其餘 282 9.38%

使人吃驚的是, 63.13%的人說他們從未使用過工具檢測網站或應用輔助功能。

22.20%的人說他們會使用顏色對比檢測工具,只有15.44%的人會使用屏幕閱讀工具。

不得不說,這個結果讓人感到十分沮喪。

雖然這個結果能夠得知爲何你們都不使用輔助功能測試工具的現象,可是做爲一名認爲咱們創建的網站或應用應該服務於每一個人,可是看到有超過3分之2的人沒有作輔助功能測試實在太讓人感到悲哀了。

一些工具像Wave或Axe(一些受訪者在其餘工具提到的)是很是容易使用,在這裏我很是推薦你們在項目中進行使用,若是你還沒使用過呢。

同時但願咱們對這些工具的價值和易用性瞭解越多,那麼開發者使用工具可能性就越高。

問題26 Javascript 包管理工具

這是今年調查的倒數第二個問題,主要關於JavaScript包管理工具。

問題內容:你會選擇哪一個JavaScript包管理工具在項目中使用?

去年NPM是最受歡迎的一個,可是yarn緊跟着,過去一年了是否有其餘變化呢?

結果以下:

選擇 人數 佔比 與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是大部分開發者所選的包管理工具,相比較去年,今年的結果也沒有太多變化。

問題27 通用工具的使用

最後一個問題就是前端各種工具的使用(其中部分工具不太適用於以前的類別)。

問題內容:請選擇下列工具你的使用經驗?

結果以下:

從未聽過 瞭解過 使用過一點 常用
NPM 0.43% (13) -0.41% 1.80% (54) -0.69% 10.75% (323) -1.14% 87.02% (2,615) +2.24%
Yarn 3.29% (99) -2.95% 22.30% (670) -4.21% 23.79% (715) +2.84% 50.62% (1,521) +4.32%
Babel 2.70% (81) -1.07% 16.71% (502) -4.22% 30.98% (931) +1.22% 49.62% (1,491) +4.08%
Prettier 15.67% (471) -14.76% 21.60% (649) -8.03% 22.30% (670) +6.25% 40.43% (1,215) +16.53%
Yeoman 24.76% (744) +5.63% 40.67% (1,222) -1.18% 26.69% (802) -3.07% 7.89% (237) -1.37%

從上面的工具中,NPM仍然是大部分受訪者常用的工具,佔了87.02%。而yarn爲50.62%,Babel爲49.62%是下一批最常使用的工具,並且大部分工具都比去年的使用率有所提高。

相比較去年最大的變化是,大部分開發者都會常用Prettier,從去年的16.53%增加到40.43% 。

Yeoman略有降低,從去年的趨勢就可看出。

總結

因此這就是今年咱們調查出來有趣的結果。

在某些前端領域內,開發者們正在肯定使用某幾個工具進行組合。ESLint, NPM Scripts 和 Webpack分別對應着JavaScript Lint,任務腳本和打包工具的主導地位。

反觀過來,在JavaScript框架或庫中,React已經確立了主要地位,然而 Vue.js也緊跟着後面,也有可能成爲首位。21.66%的開發者以爲沒有一個庫或框架在項目開發中必不可少,並且瀏覽器JS也將愈來愈強大了。

今年調查結果最讓人吃驚的是關於輔助功能測試部分,有 63.13%的開發者說他們從未對他們的項目中應用輔助功能進行測試。做爲一名開發者,咱們必須比這作的更好,不只僅是由於這是在道德上市正確的事情,而是無障礙訴訟也愈來愈廣泛。

在CSS領域中,Sass已經是最受歡迎的CSS處理器,但Bootstrap框架的使用率已有略微降低,由於如今大多數開發者在項目開發中不會使用任何CSS框架。

大多數開發者如今會使用CSS Lint和命名規範,比沒有使用要多,其中53.21% 使用CSS Lint, 52.08%使用CSS命名規範。

CSS-in-JS繼續成長增加,44.69%的開發者正在項目中使用。

總之,從上面的調查結果而言,工具的愈來愈成熟,合併也正在發生。同時,工具愈加強大,工具的替換也愈來愈少。這真是使人感到興奮的一個結果。

幾年前,大多數類型工具都尚未出現領導性的工具。可是在目前,已經出現主導定位的工具,這將有助於前端技術的成長和沉澱,並且對於新人進入前端來言,也可以清晰知道本身須要瞭解哪些工具。


在這裏,再次感謝各位參與本次調查的朋友們。

若是各位對調查結果有任何疑問,能夠在Twitter對我進行留言。

本調查報告時間爲:2019年11月12日

本文由博客一文多發平臺 OpenWrite 發佈!
相關文章
相關標籤/搜索