前端開發 2018 回顧及 2019 展望

前端發展的世界發展迅速。非常快。本文將回顧2018年最重要的前端新聞，值得關注的事件和 JavaScript 趨勢。

WebAssembly 釋出了主要版本，核心規範達到 1.0

WebAssembly 通常被認為是 web 的未來。 它旨在透過提供在 web 上執行的二進位制格式，最大限度地提高效能，減小檔案大小，並支援多種語言的 web 開發。

2017 年末，所有主流瀏覽器都宣佈支援 WebAssembly 。 然後在 2018 年 2 月，WebAssembly 有 3 個主要版本：

核心規範釋出 1。0

WebAssembly 的 JavaScript 介面

WebAssembly 的 Web API

NPM 熱門前端庫下載

從 NPM 下載量來看 React、jQuery、Angular 和 Vue 是 4 個最受歡迎的前端模組。請進一步閱讀以瞭解前端庫的最新發展。

React 繼續保持統治地位

React 多年來一直主導 Web 開發，2018 年它根本沒有放慢速度。根據 Stackoverflow 調查，它仍然是最受歡迎的庫之一。

React 核心團隊非常積極地更新該庫並新增功能。 在整個 2018 年，我們看到了 React v16 版本的許多新增內容，包括新的 生命週期方法，新的 context API，指標事件，lazy 函式 和 React。memo 。 但是，最受關注的兩個特性是 React Hooks 和 Suspense API 。

React Hooks得到了一些響亮的反饋，很多開發人員喜歡這個更新。 Hooks 是一種使用 useState 函式向函式元件新增狀態的方法，它還將管理生命週期事件。

Ryan Florence 展示了 React Hooks 使他的示例應用程式清潔90％。（油管影片不展示）

另一個巨大的版本， React Suspense ，是一種在 React 元件內部管理資料獲取的方法。 它在等待非同步響應時掛起資料渲染。可以透過在 React。lazy（） 呼叫中包裹一個動態 import（匯入） 來使用 Suspense 元件 進行 程式碼拆分 。最終的設想是能夠透過 suspense API 管理所有非同步載入，例如 API 請求。它還允許快取請求的結果。

人為的例子是在你的 isFetching 標誌為 true 時在螢幕上顯示許多載入 spinners 。 使用 Suspense ，您可以對UI進行細粒度控制，以指定在等待時希望顯示什麼回退元件、等待多長時間以及如何管理導航 許多人甚至認為 Suspense 可以消除對 Redux 的需求。 檢視 Dan Abramov 關於使用Suspense API 構建應用程式的演講。（油管影片不展示）

這個人為設計的示例在螢幕上顯示了許多載入旋轉器，而您的isfetch標誌是true。使用懸念，您可以對UI進行細粒度控制，以指定在等待時希望顯示什麼回退元件、等待多長時間以及如何管理導航。許多人甚至認為懸疑可以消除重來的需要。看看Dan Abramov關於使用Suspense API構建應用程式的演講。

Vue 繼續增長，GitHub Stars 已超過 React

在 2017 年爆炸之後，Vue 在 2018 年繼續增長。實際上，它的 GitHub Stars 甚至超過了 React 。

雖然 Vue 很受歡迎，但在實際使用中你會發現他借鑑可很多 React 和 Angular 的思想和功能。然而，Vue 擁有一個熱情的使用者群，而且還在不斷增長，而且該庫看起來將成為未來幾年的新力量。

Evan You（Vue Creator）向我們展示了 Vue 3 的最新版本

Vue 正朝著 3。0 版本發展。創作者 Evan You 在11月份在多倫多 VueConf 和下面的文章中向我們概述了它。他已經在網上釋出了他的 PPT，影片即將推出。

你可以在這裡 預覽 Vue。js 3。0 新特性。你可以在本文中找到完整的 PPT 連結。

Angular 依然活躍，釋出v7

Angular 依然活躍，在 10 月份釋出了主版本 v7 版本。Angular 已經見證了從早期的 AngularJS MVC 架構到更現代的使用元件的 Angular 包的大量成長。隨著這種增長，它得到了進一步的採用。

雖然 Angular 與 React 和 Vue 等庫相比，沒有狂熱粉絲，但它仍然是專業專案的熱門選擇。許多開發人員在使用 React 時都會感到疲勞，因為它需要工程師在管理構建管道的同時做出許多依賴關係和架構決策。

另一方面，Angular 為開發人員中刪除了許多需要決策的東西，並有助於確保更常見的程式碼模式。 Angular 是一個高度 opinionated（武斷，意思是沒有太多的其他方式）的完整框架，CLI 管理所有構建步驟。專業環境的另一個好處是 Angular 需要 TypeScript 。 Angular 已經在 Web 開發世界中樹立了自己的價值所在，並繼續被採用。

注意：@angular/core 表示新的Angular，而 angular 表示舊的 AngularJS

GraphQL在 “想要學習” 的選項中增長，但並沒有超越 REST

GraphQL 已被 GitHub 等技術引領者採用。 然而，它並沒有像一些預測的那樣快速地飛漲。 據 JS 狀態調查顯示，只有 1/5 的前端開發人員使用過 GraphQL ，但是有 62。5％ 的開發人員已經聽說過它並希望使用它，相當驚人。

CSS-in-JS 獲得更多采用

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

要使用CSS管理動態樣式，您必須管理元件中的類名並根據 state / props 更新它。 您還需要一個 CSS 類來進行變化：

JavaScript 程式碼：

// Component JS file

const MyComp = （{ isActive }） => {

const className = isActive ？ ‘active’ ： ‘inactive’；

return

}

// CSS file

。active { color： green； }

。inactive { color： red； }

使用 CSS-in-JS ，您不需要再管理CSS類。 您只需將 props 傳遞給樣式化元件，它就會處理動態樣式。 程式碼更清晰，我們透過允許 CSS 管理基於 props 的動態樣式，更清楚地分離了樣式和 React 的關注點。 它現在讀取就像普通的 React 和 JavaScript 程式碼一樣：

JavaScript 程式碼：

const Header = styled。div`

color： ${（{ isActive }） => isActive ？ ‘green’ ： ‘red’}；

`；

const MyComp = （{ isActive }} => （

）

CSS-in-JS 的兩個主要庫是 styled-components 和 emotion 。 styled-components 已經存在更長時間並且更多采用，但 Emotion 正在快速發展，許多開發人員發現它是首選庫。 實際上，Kent C。 Dodds 甚至棄用了他的 CSS-in-JS 庫 Glamorous ，支援 Emotion 。

使用單個檔案元件時，Vue 還支援開箱即用的 CSS 。 透過將 scoped 屬性新增到元件的 style 標記中，Vue 使用 CSS-in-JS 技術來定義樣式，以便它們不會滲透到其他元件中。

此外，Angular 透過 “view encapsulation（檢視封裝）” 支援開箱即用的 CSS scoping。 預設情況下會啟用此功能。

開發人員使用 CLI 工具來正確地配置和構建應用程式

眾所周知，要跟上最新的庫、正確配置應用程式並做出正確的架構決策，這可能會讓人感到筋疲力盡。 這種痛苦催生了管理工具的 CLI 包的建立，它讓開發人員能夠專注於應用程式。這種工具已成為開發人員在 2018 年建立應用程式的主要方式。流行的框架包括 Next。js（用於 React SSR，服務端渲染）， 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 檔案，以獲得單頁體驗。

靜態站點非常適合構建個人網站或部落格，但它們可以輕鬆擴充套件到更大的應用程式。我們已經看到了用於構建靜態網站的流行框架的興起，例如 TypeScriptGatsby 和用於 React 應用程式的 React Static，以及用於 Vue 應用程式的 VuePress。事實上，靜態網站已經變得如此受歡迎，以至於 Gatsby 實際上已經組建了一家公司，並在去年的開源庫中獲得了風險投資資金。

無伺服器架構和 JAMStack

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

無伺服器理念的擴充套件是 JAMStack（JavaScript，API，Markup）。 JAMStack 理念建立在上一節討論的靜態站點概念之上。由於預先構建的標記，它允許快速載入時間，並透過利用伺服器的可重用 API 成為客戶端上的動態 SPA 。在 2018 年，我們甚至看到了第一個 JAMStack 駭客馬拉松。 freeCodeCamp，Netlify 和 GitHub 聯手舉辦了面對面和線上駭客馬拉松活動，允許人們在 GitHub 總部進行編碼，或者與世界各地的其他開發人員聯絡。

要了解JAMStack網站在保持效能的同時可以擴充套件多大，Quincy Larson解釋瞭如何使用JAM架構為 freecodecamp。org 提供支援： How freeCodeCamp Serves Millions of Learners Using the JAMstack

TypeScript 可能是 JavaScript 的未來（但對於 Flow 來說就不一定了）

JavaScript 因沒有靜態型別變數而飽受批評。 試圖糾正這個問題的兩個主要庫是 TypeScript 和 Flow ，但 TypeScript 看起來是最受歡迎的。 事實上，在 Stack Overflow 調查中，TypeScript 的評分高於 JavaScript 本身，為 67％ ，而最受喜愛的語言為 61。9％ 。 根據 JS 的狀態調查，超過 80％ 的開發人員希望使用 TS 或已經使用它並享受它。 對於 Flow，只有 34％ 的開發人員正在使用它或想要使用它。

根據所有跡象，TypeScript 是 JS 中靜態型別的首選解決方案，許多人選擇使用普通的 JavaScript 。 在 2018 年，TS 的 npm 下載數量大幅增長，而Flow 保持不變。 TypeScript 看起來正在從狂熱追隨者轉向廣泛採用。

Webpack 4 釋出

Webpack 3 釋出僅 8 個月後，版本 4 釋出了。 Webpack 4 繼續推動簡化和更快的構建，聲稱高達 98％ 的改進。 它選擇合理的預設值，在沒有外掛的情況下處理更多功能，並且不再需要使用配置檔案。 Webpack 現在還支援 WebAssembly，並允許您直接匯入 WebAssembly 檔案。

微軟正在為 Edge 瀏覽器採用 Chromium 核心：Microsoft Edge goes Chromium （and macOS）

Ryan Dhal（Node 建立者）告訴我們他在 Node 上犯的錯誤，並簡要介紹了 TypeScript 執行時 Deno 。

展望 2019 年

隨著基礎的建立和不斷推動的 Web 體驗改進，WebAssembly 將開始看到更多的生命力。

React 保持領先，但 Vue 和 Angular 使用者會繼續增長。

CSS-in-js 可能會成為預設的樣式化方法，而不是普通的CSS。

發人員是否可以重新審視原生 Web Components？

毫不奇怪，效能仍然是關注的焦點，諸如 PWAs 和程式碼分割之類的事情成為每個應用程式的標準。

在採用 PWA 的基礎上，web 變得更加本地化，具有離線功能和無縫的桌面/移動體驗。

我們繼續看到 CLI 工具和框架的增長，以繼續抽象出構建應用程式的繁瑣方面，允許開發人員專注於生成功能。

更多的公司採用具有統一程式碼庫的移動解決方案，如 React Native 或 Flutter 。

Containerization 的影響（即Docker， Kubernetes）在前端過程中變得更為普遍。

GraphQL 在採用方面會有大的飛躍，並在更多公司中得到應用。

TypeScript 開始成為標準 JavaScript 的預設選擇。

虛擬現實使用 A-Frame，React VR 和 Google VR 等庫向前邁進。

英文原文：https：//levelup。gitconnected。com/a-recap-of-frontend-development-in-2018-715724c9441d

中文翻譯及來源：https：//www。css88。com/archives/10384 著作權歸原作者所有

哎，默默去學習去了