前端開發 2018 回顧

時間 2019-11-18

標籤前端開發回顧简体版

原文原文鏈接

英文原文：A Recap of Frontend Development in 2018javascript

參與翻譯 (4人) : IrisHuang, Hunter5, 木槿星晴, kjmengcss

僅中文中英文對照僅英文html

前端開發界發展十分迅速。本文將講述2018年有關JavaScript的最前沿新聞，重大事件以及發展趨勢。前端

WebAssembly 核心規範發佈了 1.0 版本

WebAssembly 常常被認爲是 Web 世界的將來。它旨在經過提供在網頁上運行的二進制格式，最大限度的提升性能，壓縮文件大小，並支持多語言的 Web 開發。vue

2017 年底，全部主流瀏覽器都宣佈其支持 WebAssembly。而後在2018年2月，WebAssembly 又推出 3 個主要發佈：java

NPM 最受歡迎的前端庫

React、JQuery、Angular 和 Vue 是下載排名前4的最受歡迎的前端庫。那麼，繼續閱讀來了解下這些庫的最新發展。github

依賴庫發展的同時，React 亦繼續着其統治

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

React 的核心團隊在更新依賴庫以及添加新功能方面顯得尤其活躍。整個2018年，咱們看到了 React v16 版本的許多新增內容，包括新的生命週期方法，新的上下文API，指針事件，lazy()函數和React.memo。可是，最受關注的兩個新特性仍是 React Hooks 和 Suspense API 。

React Hooks 獲得了一些好評的反饋，不少開發人員喜歡這個更新。鉤子是一種使用 useState 函數向功能組件添加狀態的方法，它還將管理生命週期事件。

在下面的視頻中，Ryan Florence 展現了 React Hooks 如何使他的示例應用程序整潔了 90%。

https://youtu.be/wXLf18DsV-I

React Suspense 做爲另外一個巨大的發佈，是一種在 React 組件內部管理數據獲取的方法。它在等待異步響應時掛起數據渲染。Suspense 是管理組件代碼拆分的懶函數背後的緣由。最終願景是可以經過 suspense API 管理全部異步加載，例如 API 請求。它還容許緩存請求的結果。

該設計的例子是你的 isFetching 標誌爲 true 時在屏幕上顯示許多加載微調器。使用 Suspense，能夠對 UI 進行細粒度控制，以指定等待時要顯示的 fallback 組件、等待時間以及導航管理。許多人甚至認爲 Suspense 能夠消除對 Redux 的需求。點擊查看 Dan Abramov 關於使用 Suspense API(https://youtu.be/nLF0n9SACd4) 構建應用程序的演講。

Vue 迅速成長，GitHub stars 數量超過 React

在 2017 年實現爆炸式增加後，Vue 在2018年繼續增加。事實上，它在 GitHub 的 stars 數量已經超過了 React。

雖然 Vue 深受歡迎，但它在實際（國外）使用中仍遠遠落後於 React 和 Angular。但，Vue 擁有一個仍在增加的充滿激情的用戶羣，並且這個庫將在將來幾年成爲一股強大的力量。

尤雨溪 ( Vue 做者) 在依賴包發佈之時也讓咱們體驗了一把 Vue 3

Vue 正致力於推出其 3.0 版本。其做者尤雨溪在11月份多倫多 VueConf 上概述了 Vue 3.0，下面文章連接亦有贅述。他已經在網上發佈了他的幻燈片，視頻也即將發佈。

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 類的變量：

// 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 傳遞給樣式組件，它就能夠處理動態樣式。代碼更清晰，經過基於 props 管理 CSS 的動態樣式，更清晰地分離了樣式和 React 的關注點。它如今讀取就像普通的 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-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 文件，從而實現單頁體驗。

靜態站點很是適合構建我的網站或博客，可是它們能夠很容易地擴展到更大的應用程序。目前已經看到了構建靜態網站的流行框架的興起，好比 Gatsby 和 React static for React 應用，以及 VuePress for Vue 應用。

無服務器架構與 JAMstack

隨着靜態網站的日益普及，咱們也看到了後端的持續增加以補充它們。在過去的幾年裏，無服務器架構已經成爲 Web 開發中的一個流行詞，由於它可以在下降成本的同時解耦客戶機和服務器代碼。

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

爲了理解 JAMStack 網站在保持性能的同時能夠擴展到多大，Quincy Larson 解釋了freecodecamp.org 是如何由 JAM 架構提供支持的。

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 下載量大幅增加，而流量卻很是平穩。TypeScript 看起來正在從一個狂熱的追隨者轉變爲普遍的採用。

webpack 4 發佈

Webpack 3 發佈僅8個月後，版本4就發佈了。Webpack 4 繼續推進簡單和更快的構建，聲稱改進了 98%。它選擇了合理的默認值，在沒有插件的狀況下處理更多的開箱即用的功能，而且再也不須要開始使用配置文件。Webpack 如今也支持 WebAssembly，並容許直接導入WebAssembly 文件。

Babel 7.0 發佈

自第6版發佈將近3年後，Babel 7 於2018年發佈。Babel 是將 ES6 + 代碼轉換爲 ES5 的庫，使 JavaScript 代碼跨瀏覽器兼容。Babel 發佈的文章說 v7 的改進是「更快，建立了一個升級工具，JS configs, config ' overrides '，更多的 size/minification 選項，JSX 片斷，TypeScript，新提議，等等!」 Babel 還開始在 @babel 名稱空間下肯定包的範圍。