2017年前端開發工具趨勢

来源:http://www.cnblogs.com/qianduantuanzhang/archive/2017/11/09/7810893.html
-Advertisement-
Play Games

你有兩年以上的前端開發經驗嗎?你會用 Sass 和 Autoprefixer 等高級的CSS輔助技能嗎?你的 JavaScript 知識是否融匯貫通,你是否喜歡使用 Gulp , npm 和 jQuery ?如果是這樣,根據 Ashley Nolan 的前端問卷調查,你是一個典型的前端開發工程師。 ...


你有兩年以上的前端開發經驗嗎?你會用 Sass 和 Autoprefixer 等高級的CSS輔助技能嗎?你的 JavaScript 知識是否融匯貫通,你是否喜歡使用 Gulp , npm 和 jQuery ?如果是這樣,根據 Ashley Nolan 的前端問卷調查,你是一個典型的前端開發工程師。

 

 

01謊言,該死的謊言,統計數字和調查問卷

 

謊言,該死的謊言,統計數字(英文:Lies, damned lies, and statistics),是一句著名的西方諺語。主要描述數字的說服能力,特別是用來諷刺一些使用統計數字支持、但毫無說服力的分析報告,以及人們傾向於貶低那些不支持其立場的統計結論。 維基百科

 

諸如此類的調查有助於你發現新工具和你的知識短板。至本文撰寫時,本次問卷調查收到了5,254份答覆,這是比大多數民意調查更具有樣本價值。但是,調研結果是否代表真相還是應該抱審慎態度。。。

 

全球性的統計結果

 

這次問卷調查是全球性的,但將主要來自英語國家。 在其他地方開發或使用的流行工具可能被忽略。

 

開發人員知識

 

本次問卷調查呼籲經驗豐富的開發人員對調研問題有深刻理解並且有時間,有興趣去完成本次調查。

 

83% 的受訪者有兩年或兩年以上的前端技術經驗,只有 5% 的受訪者不到一年前端經驗:

 

 

 

具備較低前端技能的開發人員不太可能完成本次問卷調查,因此結果可能會相應偏離。

 

意見和偏見

 

受訪者被要求判斷自己的水平。有些人可能比較謙虛,有些有選擇困難綜合症。有些人可能高估了自己的水平,因為他們可能是一群新手程式員團隊中唯一前端開發人員。自我偏見的偏差可以被平均,但沒有辦法證明。

 

過去的行為不代表未來的趨勢

 

調查結果突顯了開發人員已經使用的工具。這並不意味著這些工具是有用的,可以節省時間或將在將來的項目中使用。

 

 

02CSS

 

63%的開發人員將他們自己的CSS知識評為高級或專家水平:

 

雖然 CSS 是一個看似簡單的 屬性 和 值 的鍵值對集合,但是 CSS 是眾所周知地難以掌握。 CSS3引入了一系列新效果,並且越來越難以掌握所有的知道。例如,我對新的 CSS網格模塊 知之甚少,還有當開發 Flexbox 佈局時常常需要翻閱手冊(或隨機嘗試性的使用各種屬性和值)!

 

10%的受訪者承認不到一年的開發經驗,卻聲稱已經掌握高級的CSS知識!我懷疑他們很快就會意識到,懂的越多,意味著不懂的也就越多!

 

CSS 預處理器

 

超過 63% 的受訪者使用 Sass – 無可爭議的預處理器冠軍。8%的受訪者還使用 PostCSS,雖然它通常與其他預處理器結合使用以提供有用的功能 – 如AutoPrefixer( 65% 的受訪者採用)。

 

近 14% 的受訪者不使用預處理器,而更喜歡使用原始 CSS 代碼。當你認為它是最簡單的(和最好的)開始前端開發的方式時,這個比例似乎有點低。如果 86% 的開發人員使用 CSS 預處理器,我預計平均每個網站的CSS文件請求應該低於7.2個。

 

近 70% 的受訪者嘗試過 Less ,19% 的受訪者嘗試了 Stylus 。80% 從未聽說過 Rework。

 

CSS 命名方案

 

46% 的受訪開發人員使用命名方案,但是對於那些將 CSS 水平自我評價為高級或專家級別的人來說,這一比例上升到 57% 。

 

最受歡迎的選擇是 BEM ,占40%,其次是 CSS模塊(CSS Modules)(16%),OOCSS(15%)和 SMACSS(13%)。

 

其它CSS工具

 

當前 39% 的項目中正在使用 Modernizr 。這似乎令人驚訝,因為它的主要用途是相容大部分已經被棄用的舊版本IE。(Microsoft已於2016年1月停止支持IE10及以下版本。)

 

14% 的受訪者使用 Stylelint 來檢查CSS有效性。這似乎很低,但最流行的IDE和編輯器有一些類似的 CSS 檢查,所以可能沒有必要。

 

23% 的開發人員不使用任何CSS工具或命名方案。

 

 

03JavaScript

 

如果你認為 CSS 的各種工具已經很混亂了,歡迎來到迷人的 JavaScript 世界!

 

JavaScript 開發人員比較謙虛,51% 的受訪者認為自己的JavaScript 知識達到了高級或專家水平:

 

 

 

庫和框架

 

儘管有相關性的質疑,超過 99% 的開發人員在某些時候使用 jQuery,並且 31% 的受訪者認為對很多項目來說 jQuery 是必要的。70% 的受訪者在當前項目中繼續使用 jQuery ,這與 W3Techs 觀察到的數據相似:

 

 

框架情況更令人困惑:

 

  • 已有 38% 的現有項目採用了React。然而,只有 29% 的開發人員使用它感到舒適,18% 的受訪者認為它是必要的。只有0.1%的網站被髮現正在使用React,但請記住,調查結果是從前端開發人員收集的 – 而不是所有的Web開發人員。

  • 有 25% 的項目使用 Angular 1,雖然只有8%的人認為它是不可替代。Angular 2則相對受冷落,只比8%多一點。只有3%的人在多數項目中使用它。

  • Vue.js 已經被 10% 的項目採用,但少於 6% 的開發人員對框架感到舒適,3% 認為它是必要的。

 

對於明年的問卷調查,這個問題可能有用:“你是否放棄了一個框架或者在項目中切換框架?

 

儘管有大量的JavaScript專家,只有 21% 的人認為框架不是必須的,並樂意編寫原生代碼。這是一個令人擔憂的統計數據嗎?30% 的開發人員認為他們的框架抽象技能集可以滿足他們的全部需求?

 

任務執行器和模塊打包工具

 

Gulp是最大的贏家,接近 44% 的開發人員在使用。然而,更簡單的 npm scripts 腳本在2016年增加了 23% ,達到 26% 。

 

Grunt 已經失去了優勢,跌落到 12%。另外,9% 的受訪者選擇了不使用任務運行器。

 

那些使用模塊打包工具在2016年增加了 20%,達到 68% 。 Webpack 是最為流行,占 31% ,Browserify 為 11% ,RequireJS 為 8% 。

 

我很驚訝,“其他”模塊打包工具占不到 4%,當有幾個任務運行器插件可以更簡單的管理依賴關係,例如 gulp-deporder 。也許因為每個開發人員都在使用JavaScript 轉譯器…

 

ES6到ES5的轉譯器 (transpilers)

 

62% 的開發人員正在使用諸如 Babel 之類的工具,將簡潔的 ES6 代碼轉換為舊版瀏覽器支持的 ES5 代碼。

31% 的人聽說過可能性,但沒有使用工具,和 7% 從未聽說過這個詞。

 

這個數字似乎相當高。Internet Explorer 和老的應用程式不支持最新的 JavaScript 語法,但是如果您要編寫 ES6 代碼,為什麼還要支持他們呢?

如果你確實需要支持 IE11 及以下版本,編寫 ES5 代碼不是更容易嗎?

 

其他JavaScript工具

 

41%的開發人員使用 ESLint , 19% 使用 JSLint 和 14% 使用 JSHint 來檢查他們的代碼的有效性 – 例如缺少括弧,省略分號,格式縮進等。

 

23%的受訪者不使用代碼檢查工具 – 雖然,也有可能他們依靠他們的文本編輯器或 IDE 來發現最嚴重的語法錯誤。

 

使用測試工具的用戶在一年中增長了 12% ,達到了 52% 。

歷史上,JavaScript 測試一直是一個挑戰。

 

諸如測試驅動開發(TDD)等技術可以捕獲邏輯問題,但不能解決非同步事件遇到的問題,例如當 UI 在特定瀏覽器中執行某種意外操作時。

 

幸運的是,行為驅動開發(BDD)的可能性已經出現,以檢查在真實的瀏覽器中的活動,並使前端測試更具可行性。 最流行的系統有:

  • Mocha – TDD/BDD (23%)

  • Jasmine – BDD (17%)

  • QUnit – TDD (4%)

  • Jest – TDD/BDD (3%)

  • Ava – TDD/BDD (2%)

 

最後,有 94% 的受訪者使用 npm – Node.js 的包管理器。出乎意料,有 32% 曾經使用過 TypeScript 。

 

 

04你在2017年應該使用什麼?

 

關於 CSS,Sass 的知識,PostCSS 和 BEM 很明顯是必要的。也就是說,開發的多樣性很廣。我建議你研究一些預處理器和命名方案,以便瞭解每個工具可以實現什麼 – 即使是你選擇不使用它們。

 

JavaScript 方面的工具不太好說。有一些明顯的特征和趨勢:

  • Node.js 和 npm 將變得至關重要,因為你採用的工具記得上都是 Node.js 和 npm 實現管理的。

  • Gulp 和/或 Webpack 也值得嘗試一下。

  • 瞭解ES6,即使您仍然在向後相容的 ES5 項目上工作。

 

我從不羡慕那些嘗試為新項目選用類庫或框架的人。從調研結果來看,jQuery是明顯是最受歡迎的。然而隨著 IE 的消亡,jQuery 的跨瀏覽器支持變得沒那麼重要,並且許多功能已經和瀏覽器原生 API 和 CSS 重覆。

 

你可以選擇一個框架,如 React,因為它很受歡迎 – 但這並不代表它就適用於你的應用。即使 React 將最終被更好,更優秀的東西取代。

 

我的建議:從眾多框架中挑選某一個之前,先學習HTML,CSS,JavaScript 和瀏覽器開發的基礎知識。無論 JavaScript 社區如何評價哪些工具集,這些知識將終生受用。也許有一天,你甚至會編寫出一個高大上的工具,也成為各種框架中的一員。

 【我有一個前端學習交流QQ群:328058344  如果你在學習前端的過程中遇到什麼問題,歡迎來我的QQ群提問,群里每天還會更新一些學習資源。禁止閑聊,非喜勿進。】


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 定義:設計模式是一套被反覆使用、多數人知曉的、經過分類的、代碼設計經驗的總結。 目的:為了代碼可重用性、讓代碼更容易被他人理解、保證代碼可靠性,設計模式使代碼編寫真正工程化。 使用:每一種設計模式都是在特定場景下總結出來的,選用時需要根據特定的場景選擇,不能為了模式而模式。 定義:設計模式是一套被反 ...
  • 背景 作為中國最大的線上教育站點,目前滬江日誌服務的用戶包含網校,交易,金融,CCTalk 等多個部門的多個產品的日誌搜索分析業務,每日產生的各類日誌有好十幾種,每天處理約10億條(1TB)日誌,熱數據保留最近7天數據,冷數據永久保存。 為什麼做日誌系統 首先,什麼是日誌? 日誌就是程式產生的,遵循 ...
  • arguments 對象 在函數代碼中,使用特殊對象 arguments,開發者無需明確指出參數名,就能訪問它們。 例如,在函數 sayHi() 中,第一個參數是 message。用 arguments[0] 也可以訪問這個值,即第一個參數的值(第一個參數位於位置 0,第二個參數位於位置 1,依此類 ...
  • 結論:內部會調用toString方法,將設置的對象轉換為字元串添加給相應的屬性; 這個問題呢,是通過jQuery的each方法中,回調函數的this指向問題而來; 我們知道,回調函數中的this如果指向的是基本數據類型,那麼系統會自動將這個基本數據類型的值包裝為對應的對象類型; 就比如: 數組裡面存 ...
  • 1.向下滑動 2.移動效果 3.事件與動畫結合 ...
  • 從大一開始學習前端,今年大三,10月份開始投簡歷,陸續收到很多家公司的面試,目前為止的面試通過率是百分之百,總結下麵試題。 今天晚上面的小米不太好,感覺自己回答非常不好,覺得百分百的通過率要終結了,後來面試官打來電話說還OK,真想不到,一會再說小米,他問的問題,哎,真是。。。 算了,說吧。 百度 一 ...
  • 引 如今,各種互聯網的Web應用程式層出不窮,那麼如何快速入門,成長為一個優秀的Web開發工作者呢? 這個問題不容易回答,幾乎所有的培訓機構都不能清晰地解答。 所以對於Web開發剛剛入門的菜鳥們,我覺得只有通過去做,去實驗,學會Web開發,可能是學著學著,實驗著實驗著就會了。 沒有人告訴你如何去做。 ...
  • 中文原地址 1.對所有的引用使用 const 而非 var。這能確保你無法對引用重覆賦值。 當需要變動引用時,使用let。 const和let都是塊級作用域。 2.創建對象的方式: const item = {}; 使用對象屬性的簡寫,且為簡寫的屬性分組。 3.創建數組的方式: const arr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...