本文來源于全球的5254份前端工具使用的調查報告,期望通過本文能夠幫助大家更好的了解最新的前端開發工具趨勢。
83%的受訪者具有兩年以上的前端技術經驗,隻有5%的受訪者不到一年:
開發者中有63%為進階開發者和專家:
盡管CSS被認為隻是屬性-參數值對的簡單集合,但是CSS卻是很難掌握的。CSS3引入了許多的新特性,要想完全的掌握CSS變得越來越困難。
超過63%的開發者使用Sass,這也使得Sass成為無可争議的預處理首選者。8%的開發者使用PostCSS,通常情況下,PostCSS都是和AutoPrefixer等預處理器配合使用的。
僅有14%的開發者不使用任何預處理,他們更喜歡使用原始的CSS代碼。盡管這種方式開發效率較慢,但是卻是剛開始學習前端開發的最容易和最好的方式。如果86%的開發者使用預處理器,則平均一個網站需要進行7.2個CSS檔案的請求。
僅有10%的受訪者嘗試過Less,19%的受訪者嘗試過Stylus,80%的受訪者從未聽聞Rework。
46%的開發者在編碼時會使用一種命名方式,對于CSS進階開發者和專家來說,這個比例上升到了57%。
最受歡迎的命名方式是BEM,占到總數的40%。接下來是CSS Modules(16%)、OOCSS(15%)和SMACSS(13%)。
39%的受訪者在目前的項目中使用Modernizr。14%的受訪者使用Stylelint來檢查CSS的有效性。23%的開發者不使用任何CSS工具或命名方式。
受訪者中有51%是JavaScript的進階開發者或專家。
盡管存在相關性問題,但是超過99%的開發者都曾使用過jQuery,有31%的受訪者認為使用jQuery對大多數項目來說都很重要。目前仍有近70%的受訪者繼續在現有的項目中使用jQuery:
架構的情況看起來比較讓人迷惑:
38%的項目目前正在使用React,然而隻有29%的開發者認為使用React很流暢,18%人開發者認為使用React很有必要。0.1%的網站被發現使用了React,但請記着,這些調查結果隻取自于前端開發人員,并不是所有的網頁開發者。
25%的項目目前正在使用angular 1,然而隻有8%的開發人員認為使用Angular 1很有必要,同時選擇使用Angular 2的隻有8%。
Vue.js已被用于10%的項目中,但隻有不到6%的開發人員對這個架構感到滿意,3%的人認為使用Vue.js很有必要
有44%的開發者使用Gulp,是以Gulp是當仁不讓的最受歡迎工具。同時,更為簡單的npm script也從2016年的23%使用率上升到了26%。
Grunt的使用率下滑到了12%。有11%的受訪者選擇不使用任何任務執行工具。
使用子產品綁定的開發者自2016年以來增長了20%,達到68%。其中Webpack是最受歡迎的子產品綁定工具,占到了31%,其次是Browserify(11%)、RequireJS(8%)。
62%的開發人員正在使用Babel這樣的編譯器,來将ES6代碼編譯為對舊浏覽器更為友好的ES5代碼。31%的受訪者聽說過這樣的編譯器,但是并未使用過。7%的開發者從未聽說過這樣的編譯器。
62%這個資料是比較高的。IE和舊的應用并不支援最新的JavaScript文法,是以如果你正在編寫的是ES6代碼,那麼就需要最新的浏覽器來支援。如果項目需要在舊的浏覽器版本下運作,那麼最好編寫ES5代碼。
41%的開發者使用ESLint,19%的開發者使用JSLint,14%的開發者使用JSHint這樣的工具來檢查代碼的合法性。
23%的受訪者表示,他們不使用任何代碼合法性檢查工具。但是他們可能會使用文本編輯器和IDE來檢查代碼錯誤。
測試工具的使用率在一年時間之内增長了12%,達到了52%。但是縱觀過去,JavaScript的測試一直是個挑戰。測試驅動開發(TDD)這樣的技術雖然能夠捕獲邏輯錯誤,卻不能捕獲異步事件下發生的錯誤。幸運的是,行為驅動開發(BDD)很可能會融合到真實浏覽器的檢查活動中,這樣也會促使前端測試更加可操作。
目前最流行的系統有:
Mocha – TDD/BDD(23%)
Jasmine – BDD(17%)
QUnit – TDD(4%)
Jest – TDD/BDD(3%)
Ava – TDD/BDD(2%)
94%的受訪者表示,他們使用過Node.js包管理器npm,有23%的受訪者使用過TypeScript。
總得來說,開發工具是多種多樣的。開發人員應該多研究一些預處理器和命名方式等,以便選擇最适合自己的。
有以下幾點值得注意:
如果你需要使用更多的工具,那麼Node.js和npm值得選擇
Gulp和Webpack值得嘗試
學習ES6,即便你一直工作在向後相容的ES5項目中。
根據調查結果,在選擇庫時,jQuery是一個合理的選擇。在選擇架構時,可以選擇React,因為它很受歡迎。如果你還沒標明架構,那麼可以先學習HTML、CSS、JavaScript和浏覽器開發的基礎知識。這些知識能夠幫助你更好了解架構,甚至也可能促使你為架構系統的改進做出貢獻。
原文連結:https://www.sitepoint.com/front-end-tooling-trends-2017/
轉載請注明出自:葡萄城控件
相關閱讀:
<a href="http://www.grapecity.com.cn/enterprise-solutions/activereports_server/library/%20" target="_blank">【報表福利大放送】100餘套報表模闆免費下載下傳</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/frameworks_compared.html">最流行的5個前端架構對比</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/front_end_framework_2017.html" target="_blank">2017年前端架構、類庫、工具大比拼</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/angular_react.html" target="_blank">Angular vs React 最全面深入對比</a>