【譯】2018 年前端開發回顧

Treasure.y發表於2018-12-14

前端

原文地址：levelup.gitconnected.com/a-recap-of-…

前端開發的世界移動快，非常快。本文將回顧 2018 年最重要的前端新聞，引人注目的事件，以及 JavaScript 的趨勢。

WebAssembly 主要版本的核心規範達到了 1.0

WebAssembly 通常被認為是網際網路的未來。它的目標是通過提供在 web 上執行的二進位制格式來最大化效能，減少檔案大小，實現多語言 web 開發。

在 2017 年底所有主流瀏覽器宣佈他們支援 WebAssembly。然後在 2018 年 2 月，WebAssembly 有三個主要的版本：

流行的前端庫在 NPM 的下載量

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

React 繼續它的統治地位，隨著庫的發展

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

核心 React 團隊在更新庫和新增功能方面非常活躍。在整個 2018 年，我們看到 React v16 釋出增加了許多功能，包括新的生命週期方法、新的上下文 API、指標事件、延遲函式和 React.memo。然而，最受關注的兩個特性是 React hook 和 Suspense API。

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

在下面的視訊中，Ryan Florence 展示了 React Hooks 讓他的示例應用程式更乾淨了90%

另一個巨大的版本是 React Suspense，它是一種管理在 React 元件內部獲取資料的方法。它在等待非同步響應時暫停渲染資料。Suspense 指的是延遲函式背後用來管理元件的程式碼分割。最終的設想是能夠通過 suspense API 管理所有非同步載入，例如 API 請求。它還允許快取來自請求的結果。

舉的例子顯示了許多載入中的旋轉，當你的 isFetching 標記是 true 的時候。通過 Suspense，您可以對 UI 進行細粒度控制，以指定在等待時希望顯示什麼回退元件、等待多長時間以及如何管理導航。許多人甚至認為 Suspense 可以移除 Redux 的需要。看看 Dan Abramov 談論如何使用 Suspense API 建立一個應用程式 ?.

Vue 繼續在增長，通過 React 在 GitHub 的 Stars 數來看

在 2017 年實現爆炸式增長後，Vue 在 2018 年繼續增長。事實上，它在 GitHub 上接收的 star 數量甚至超過了 React。

恭喜 @vuejs 超越了 React 的明星榜 GitHub！我好像不小心抓住了一個歷史性的時刻。 ——@dan_abramov

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

Evan You（Vue 創造者）向我們展示了將會發版的 Vue 3

Vue 正在向 3.0 版本努力。創造者 Evan You 在 11 月的 VueConf Toronto 和下面連結的一篇文章中對它進行了概述。他已經在網上釋出了他的幻燈片，視訊很快就會出來。

sliders

Angular 繼續被積極利用，釋出了 v7

今年 10 月，Angular 釋出了另一個重要版本，版本 7 是其流行的 UI 框架。Angular 已經見證了從早期的 AngularJS MVC 架構到更現代的使用元件的 Angular 包的大量成長。隨著這種增長，它得到了進一步的採用。

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

另一方面，Angular 從開發人員那裡移除許多決策，並幫助確保了更常見的程式碼模式。Angular 是一個非常固執己見的完整框架，CLI 管理所有構建步驟。專業的環境有另一個好處是，Angular 需要 TypeScript。Angular 已經在 web 開發世界中挖掘出了它的價值，並繼續被採用。

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

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 管理動態樣式，您必須管理元件中的類名，並基於狀態/屬性更新它。你還需要一個 CSS 類的變數:

    // Component JS file
    const MyComp = ({ isActive }) => {
      const className = isActive ? 'active' : 'inactive';
      return <div className={className}>HI</div>
    }
    // CSS file
    .active { color: green; }
    .inactive { color: red; }
複製程式碼

使用 CSS-in-JS，您不再管理 CSS 類。您只需將 props 傳遞給樣式元件，它就可以處理動態樣式。程式碼更加清晰，我們對樣式和 React 的關注點有了更清晰的分離，並通過允許 CSS 管理基於 props 的動態樣式來做出反應。這一切讀起來就像正常的 React 和 JavaScript 程式碼：

    const Header = styled.div`
      color: ${({ isActive }) => isActive ? 'green' : 'red'};
    `;
    const MyComp = ({ isActive }} => (
      <Header isActive={isActive}>HI</Header>
    )
複製程式碼

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

當使用單個檔案元件時，Vue 還支援開箱即用的 scoped CSS。通過將 scoped 屬性新增到元件的樣式標記，Vue 將會使用 CSS-in-JS 技術來使這些樣式在 scope 中，這樣它們就不會滲透到其他元件中。

此外，Angular 通過“檢視封裝”支援 CSS 的作用域。這是預設開啟的。

開發人員可以從 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 程式碼，允許他們幾乎在瞬間載入站點。然後在客戶端上下載必要的 JavaScrip t檔案，從而實現單頁體驗。

靜態站點非常適合構建個人網站或部落格，但是它們可以很容易地擴充套件到更大的應用程式。我們已經看到了構建靜態網站的流行框架的興起，比如 Gatsby 和 React static 對於 React應用，以及 VuePress 對於 Vue 應用。事實上，靜態站點已經變得如此流行，以至於 Gatsby 實際上已經成立了一家公司，並在去年獲得了風險投資。

Serverless 架構和 JAMStack

隨著靜態站點越來越受歡迎，我們也看到了後端對它們的不斷增長。在過去的幾年裡，Serverless 架構已經成為 web 開發中的一個流行詞，因為它能夠在降低成本的同時解耦客戶端和服務端的程式碼。

Serverless 理念的一個擴充套件是 JAMStack （JavaScript、APIs、Markup）。JAMStack 理念基於上一節討論的靜態站點概念。通過預構建標籤，它允許減少載入時間，並通過使用伺服器上可複用的 APIs，從而在客戶端上成為一個動態的單頁應用。在 2018 年，我們甚至看到了有史以來的第一場 JAMStack 黑客馬拉松。freeCodeCamp、Netlify 和 GitHub 聯手舉辦了一場面對面和線上的黑客馬拉松，人們可以在 GitHub 總部編寫程式碼，或者與世界各地的其他開發人員聯絡。

為了理解 JAMStack 網站在保持效能的同時可以擴充套件到多大，[Quincy LarsonQuincy_Larson 解釋了 freecodecamp.org 是如何由 JAM 架構提供支援的。

TypeScript 可能是 JavaScript 的未來（但不能說它是 Flow 的未來）

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

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

Webpack 4 在 2018 年初落地

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

Babel 7.0 釋出

自版本 6 問世後的近 3 年時間，Babel 7 於 2018 年釋出。Babel 是一個庫，它將 ES6+ JavaScript 程式碼轉換為 ES5，使我們的 JavaScript 程式碼跨瀏覽器相容。Babel 釋出的文章說 v7 的改進是“更快，建立了一個升級工具，JS 配置，配置 overrides，更多的 size/minification 選項，JSX片段，TypeScript，新提議，等等!” Babel 相關的一些包開始在 @babel 名稱空間下。