【譯】2018 年前端開發回顧

時間 2019-11-17

標籤前端開發回顧简体版

原文原文鏈接

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

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

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

WebAssembly 一般被認爲是互聯網的將來。它的目標是經過提供在 web 上運行的二進制格式來最大化性能，減小文件大小，實現多語言 web 開發。前端

在 2017 年末全部主流瀏覽器宣佈他們支持 WebAssembly。而後在 2018 年 2 月，WebAssembly 有三個主要的版本：vue

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

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

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

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

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

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

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

另外一個巨大的版本是 React Suspense，它是一種管理在 React 組件內部獲取數據的方法。它在等待異步響應時暫停渲染數據。Suspense 指的是延遲函數背後用來管理組件的代碼分割。最終的設想是可以經過 suspense API 管理全部異步加載，例如 API 請求。它還容許緩存來自請求的結果。macos

舉的例子顯示了許多加載中的旋轉，當你的 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 命名空間下。