2021年前端開發回顧

本文將回顧2020年一些重要的前端新聞,事件和JAVAScript趨勢。

WebAssembly 發佈 1.0 版本的核心規範

WebAssembly被認為是 web 的未來。 這個目標是透過提供在 web 上執行的二進位格式來最大化效能、減少檔案大小並支援多種語言的 web 開發

2017年底,所有主流瀏覽器都宣佈支援 WebAssembly。 在2018年2月,WebAssembly有三個主要版本:

NPM 各個熱門前端庫(框架)下載量比較

下載數排名前的分別為 React,jQuery,Angular 和 Vue。 以下是它們的拆線圖:

## React庫不斷改進,依舊稱霸前端

React在 web 開發領域佔據主導地位已有多年,而且在 2018 年期間絲毫沒有放緩。 根據Stackoverflow 的調查,它仍然是最受歡迎的一個前端庫。

核心 React 團隊在更新庫和添加功能方面非常活躍。 在整個2018年,看到React v16發佈版增加了許多功能,包括新的生命週期方法、新的上下文API、指標事件、延遲函數和 React.memo 。 還有,最受關注的兩個特性是 React Hook 和 Suspense API

React Hooks 得到了一些強烈的反饋,許多開發人員都喜歡這個更新。 Hooks 是一種使用 useState 功能向函數元件添加狀態的方法,它還將管理生命週期事件。

另一個新的特性是 React Suspense,它是一種管理 在 React 元件內部獲取數據的方法。 它在等待渲染非同步回應時資料,Suspense 是延遲函數背後用來管理元件的代碼分割的。 最終的設想是能夠通過Suspense 管理所有異步載入,例如API請求,它還允許緩存來自請求的結果。

一般顯示載入狀態的例子是如 isFetching 為 true 時在螢幕上顯示載入圖示。 使用 Suspense,可以對 UI 進行細粒度控制,以指定等待時要顯示的回退元件,等待時間以及如何管理導航。 許多人甚至認為 Suspense 可以消除對 Redux 的需求。

Vue 迅速成長,github stars 數量超過 React

在2017年實現爆炸式增長后,Vue在2018年繼續增長。 事實上,它在GitHub stars數量已經超過React。

雖然Vue深受歡迎,但它在實際(國外)使用中仍遠遠落後於React和Angular。 但,Vue 擁有一個仍在增長的充滿激情的使用者群,而且這個庫將在未來幾年成為一股強大的力量。

Vue 3更新計劃

在11月14日-16日於多倫多舉辦的 VueConf TO 2018 大會上,尤雨溪發表了名為 「 Vue 3.0 Updates 」 的主題演講,對 Vue 3.0 的更新計畫、方向進行了詳細闡述。 目前該演講的 PPT 也已上傳至 Google 文件,感興趣的可點此查閱。 本次版本主要圍繞以下幾個版本來升級:

  • 更快
  • 更小
  • 更易於維護
  • 更多的原生支援
  • 更易於開發使用

完整的ppt位址:Vue 3.0 Updates

Angular依然活躍,版本7發佈

今年10月,Angular在其流行的UI框架的第7版中又發佈了另一個主要版本。 從早期的 AngularJS MVC架構到使用更為現代的元件的 Angular 包,Angular 已經有了大量的增長, 隨著這種增長,它已被進一步採用。

雖然 Angular 沒有 React 和 Vue 等庫中看到的那種狂熱開發都及消費者,但它仍然是大型專業專案的主要選擇。 許多開發人員在使用 React 時都會感到疲憊,因為它需要工程師在管理構建管道的同時做出許多依賴和架構決策。

另一方面,Angular 從開發人員那裡省去許多決策,並提供更常見的代碼模式。 Angular 是一個非常規範化的完整框架,CLI 管理所有構建步驟。 專業環境的另一個好處是,Angular 需要TypeScript。 Angular 已經在 web 開發世界中挖掘出了它的價值,並繼續被採用。

注意:@angular/core 代表新的 Angular, angular 代表舊的 Angular

## GraphQL 學習意願高漲,但仍未超過 REST

GraphQL已經被GitHub等技術領導者採用。 然而,它並沒有像一些人預測的那樣迅速起飛。 根據State of JS survey ,只有 1/5 的前端開發人員使用過 GraphQL,但是令人吃驚的是,62.5% 的開發人員聽說過並希望使用它。

## js內嵌css使用更加廣泛

Web開發似乎已經走上了在 JAVAScript 下統一所有內容的道路,這一點在 CSS-in-JS 的採用中得到了體現,其中樣式是使用 JAVAScript 字串創建的。 這允許通過使用JS語法 import/export 共享樣式和依賴項。 它還簡化了動態樣式,因為 CSS-in-JS 元件可以將道具插入到它的樣式字串中。 下面是一個經典的 CSS vs CSS-in-JS 的例子。

要使用 CSS 管理動態樣式,必須管理元件中的類別名稱並根據 state/props 更新它,還需要一個儲存CSS類的變數:

使用 CSS-in-JS ,不用再管理CSS類。 只需通過 props 傳遞給樣式元件,它就可以處理動態樣式。 代碼更清晰,通過基於 props 管理 CSS 的動態樣式,更清晰地分離了樣式和 React 的關注點。 它現在讀取就像普通的 React 和 JavaScript 代碼一樣:

CSS-in-JS的兩個主要庫分別是 styled-components 件和 emotion 。 styled-components] 已經存在了很長一段時間,並且被越來越多的人採用,但是 emotion 正在迅速得到普及,許多開發人員發現它是首選庫。 事實上,Kent C. Dodds 甚至不贊成他自己的 CSS-in-JSS庫,,更傾向於emotion 因為它很有魅力。

當使用單個檔元件時,Vue 還支援開箱即用的有作用域的CSS。 通過 scoped 屬性添加到元件的樣式標記,Vue 將使用 CSS-in-JS 技術來定義樣式,以便它們不會滲透到其他元件中。

此外,Angular 通過「檢視封裝」支援CSS的作用域,這是默認打開的。

疲於使用各種CLI工具的情況有所改善

跟上最新的庫、正確配置應用程式並做出正確的架構決策,這些都不是什麼秘密。 這種痛苦催生了管理工具的 CLI 包的創建,讓開發人員能夠專注於應用程式。 在 2018 年,這種 CLI 已成為開發人員創建應用程式的主要方式。 流行的框架包括 Next.js (SSR代表React), Create-React-App(用戶端React), Nuxt.js(用於Vue的SSR)、Vue CLI(用戶端Vue)、Expo CLI(用於React Native),Angular 預設情況下支援。

靜態網站生成工具繼續發展

隨著JavaScript革命的發展,每個人都喜歡學習最新最好的庫,但是完成一些專案時,我們意識到並非每個網站都需要成為一個複雜的單頁面應用程式(SPA)。 這導致了靜態網站生成的增長。 這些工具允許在自己喜歡的庫(如React或Vue)中編寫代碼,但在構建期間生成靜態HTML檔,允許我們立即為使用者提供完整構建的頁面。

靜態網站很棒,因為它們提供了性能與簡單性的結合。 使用在建譯時呈現的HTML檔,可以立即向使用者發送一個頁面,並不需要 SSR 或 CSR 代碼,允許頁面幾乎在瞬間載入。 然後在客戶機上下載必要的 JavaScript 檔,從而實現單頁體驗。

靜態網站非常適合構建個人網站或部落格,但是它們可以很容易地擴展到更大的應用程式。 已經看到了構建靜態網站的流行框架的興起,比如 GatsbyReact static for React 應用,以及 VuePress for Vue 應用。

無伺服器架構與 JAMstack

隨著靜態網站的日益普及,我們也看到了後端的持續增長以補充它們。 在過去的幾年裡,無伺服器架構已經成為web開發中的一個流行詞,因為它能夠在降低成本的同時解耦客戶機和伺服器代碼。

無伺服器架構的一個擴展是 JAMStack (JAvaScript、Api、Markup)。 JAMStack 理念基於上一節討論的靜態網站概念。 由於預先構建的標記,它允許快速載入時間,並透過為伺服器使用可重用 Api 在客戶機上成為一個動態 SPA。 在2018年,甚至看到了有史以來的第一場J AMStack 黑客馬拉松。 freeCodeCamp、Netlify和GitHub聯手舉辦了一場面對面和在線的駭客馬拉松,開發人員可以在 GitHub 總部編寫代碼,或者與世界各地的其他開發人員聯繫。

TypeScript可能是JAVAScript的未來(但對於Flow就不一樣了)

JavaScript 因為沒有靜態類型變數而受到批評。 試圖糾正這一問題的兩個主要庫是 TypeScriptFlow,但 TypeScript 似乎是最受歡迎的。 事實上,在 Stack Overflow 調查中,TypeScript 的受歡迎程式高於 JAvaScript 本身,分別為 67% 和 61.9%。 根據 JS 的現狀調查,超過 80% 的開發者想要使用 TS 或者已經在使用它。 對於Flow,只有34%的開發人員正在使用它或希望使用它。

所有跡象表明,TypeScript 是 JS 中靜態類型的首選解決方案,許多人選擇它而不是 JAVAScript。 2018年,TS 的npm 下載量大幅增長,而流量卻非常平穩。 TypeScript看起來正在從一個狂熱的追隨者轉變為廣泛的採用。

## webpack 4發佈

Webpack 3發佈僅8個月後,版本4就發佈了。 Webpack 4 繼續推動簡單和更快的構建,聲稱改進了98%。 它選擇了合理的預設值,在沒有外掛程式的情況下處理更多的開箱即用的功能,並且不再需要開始使用配置檔。 Webpack 現在也支援 WebAssembly,並允許直接導入 WebAssembly 檔。

Babel 7發佈

自第6版開始將近3年後,Babel 7 於 2018 年發佈。 Babel 是將 ES6 + 代碼轉換為 ES5 的庫,使 JavaScript 代碼跨瀏覽器相容。

Babel 7.0帶來的不相容性變更:

  • 刪除對未維護的 Node 版本的支援:0.10,0.12,2,5
  • 通過切換到使用scoped包將現已遷移到 @babel 命名空間,這有助於區分官方軟體包,因此 babel-core 將成為 @babel/core
  • 刪除(並停止發佈)任何年度預設(preset-es2015 等), @babel/preset-env 取代了對這些內容的需求,因為它包含了所有年度添加內容以及針對特定瀏覽器集的能力
  • 同時刪除「Stage」預設(@babel/preset-stage-0 等),轉而選擇單獨的提案。 同樣,默認情況下從@babel/polyfill 刪除提案
  • 對部分套件進行重新命名:任何關於 TC39 提議的外掛程式現在變更為 -proposal 而不再是 -transform 。 即,@babel/plugin-transform-class-properties 變更為 @babel/plugin-proposal-class-properties
  • 為某些面向使用者的套件在 @babel/core 上引入 peerDependency (如,babel-loader, @babel/cli, etc)

2021年的預測

  • 隨著基礎的建立和對改進 web 體驗的不斷推動,WebAssembly 將開始普及。
  • React 依然高居榜首,但 Vue 和 Angular 的用戶數量仍會增長。
  • CSS-in-JS可能會成為預設的樣式化方法,而不是普通的CSS樣式。
  • 開發人員是否可以重新審視原生Web元件?
  • 毫無疑問,性能仍然是關注的焦點,諸如 PWAs 和代碼分離之類的事情成為每個應用程式的標準。
  • 在使用PWA的基礎上,web變得更加當地語系化,具有離線功能和無縫的桌面/行動體驗
  • CLI工具繼續的改進,以抽象出構建應用程式的繁瑣方面,讓開發人員專注於業務開發。
  • 更多的公司採用具有統一代碼庫的行動解決方案,如React Native或Flutter。
  • Docker、Kubernetes等工具會更加流行
  • GraphQL 使用方面會有了飛的增長,並被更多的公司使用。
  • 虛擬實境技術利用A-Frame、React VR和谷歌VR等庫取得了長足的進步。

原文:[https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c)

新舊交替,你敢相信? 下一個應用程式可能沒有後端……

Google Web Vitals – 使用者體驗量化