2017前端技術發展回顧

01-25

原文 - A recap of front-end development in 2017
作者 - Trey Huffine
原文地址 - https://levelup.gitconnected.com/a-recap-of-front-end-development-in-2017-7072ce99e727

譯者 - hijiangtao
譯文地址 - https://hijiangtao.github.io/2017/12/18/A-Recap-of-Front-End-Development-in-2017/

前端領域在 2017 年再次以狂熱的節奏向前發展。以下列出過去的一年中最值得關注的一系列事情。

React 16 和 MIT 協議

React 繼續在前端領域佔據著主導地位，並在 2017 年發布了最受期待的版本之一 - React 16。它包含了可以實現非同步 UI 渲染的 fiber 架構。通過提供包括錯誤邊界在內的很多其他特性，這次發布使得 React 可以更容易的管理意外的程序故障。

讓人意外的是，React 在去年所取得最重要的成就不是它推出的新特性，而是修改了它的開源協議。Facebook 放棄了導致很多公司遠離 React 的 BSD 協議，轉而採用用戶用好的MIT 協議。除此外，Jest、Flow、Immutable.js 和 GraphQL 授權也都改為 MIT 協議。

核心團隊和主要貢獻者包括 Dominic Gannaway，Dan Abramov，Sophie Alpert，SebastianMarkb?ge，Paul O』Shannessy，Andrew Clark，Cheng Lou，Clement Hoang，Probably Flarnie，Brian Vaughn。

React v16.0 - React Blog

Progressive Web Apps

我們一直在尋找彌補 web 和其他客戶端之間體驗差距上的解決方案。Google 一直主導通過將 web 應用轉換為 Progressive Web Apps(PWA) 來增強它的能力，而這一方法在 2017 年迅速獲得採用。一個 PWA 應用利用現代瀏覽器技術來提供更像移動應用程序的 web 體驗。它提供了改進的性能和離線體驗，以及以前僅可用於移動的功能，例如推送通知。 PWA 的基礎是一個 manifest.json 文件和對 service workers 的利用。

Progressive Web Apps: Great Experiences Everywhere (Google I/O 『17)

Yarn 的採用改善了 JS 包管理的生態系統

NPM 自從最初發布以來已經有了相當長的一段時間，但它仍然缺少一些關鍵特性，而這正是 Yarn 希望補充的。Yarn 的主要貢獻是包緩存，一個確保確定性構建的鎖文件，並行操作以及依賴關係。這些功能非常成功，以致於 NPM 在其 5.0 版本中實現了它們。Yarn 下載量超過 10 億次（目前每月下載量達到了 125 萬次）並擁有驚人的 28000 多個 GitHub stars。即使你沒在使用 Yarn，JavaScript 的包管理整體上由於 Yarn 的發布也得到了顯著地提升。

Yarn

CSS 網格布局

網格布局最終被 CSS 採納為標準，瀏覽器也正在快速地採用它。過去，網格系統在 CSS 中曾被 tables、float、flex 以及 inline-block 實現過。原生的 CSS 網格布局擅長於將一個頁面劃分成幾個主要的區域，並為內容創建列和行。查看 Rachel Andrew 寫的 https://gridbyexample.com/ 開始學習。

CSS Grid Layout

WebAssembly 在所有主流瀏覽器中都得到了支持

WebAssembly（或者 wasm）正登陸所有主流瀏覽器。wasm 是一個用於瀏覽器內客戶端腳本處理接近原生的位元組格式。由於其接近原生，它具有令人難以置信的性能，但也提供了一個 JavaScript API，以使得前端開發人員有一個更容易的切入點。Firefox 最近宣布對它的支持已經被所有（譯者註：此處所有應該是指所有主流）瀏覽器內置。

WebAssembly support now shipping in all major browsers - The Mozilla Blog

Serverless 架構

Serverless 應用在 2017 年以狂熱的節奏流行開來。他們提供了一種以降低成本來提升性能的方法。你的客戶端與服務端完全分離，這允許你可以專註在你的應用而不是基礎設施上。一個常見的實現是將 AWS API 網關與 AWS Lambda 函數結合使用，後者作為一個 BaaS （後端作為一個服務）在你的客戶端使用。你可以從 Adnan Rahi? 的精彩介紹開始。

A crash course on Serverless with Node.js

Vue.js 在流行中繼續成長

即便 React 獲得了巨大成功，Vue（作者尤雨溪）仍然越來越受歡迎。該框架提供了易基於組件的架構，是 React 的主要替代方案之一。它已經被包括 GitLab 在內的大公司所採用，該公司回顧了在過去的一年裡使用該框架的故事。

CSS-in-JS 以及為即將到來的 CSS 聖戰做準備

在我們目睹了 JavaScript 的快速發展之後，生態系統開始穩定下來。不可避免的是，我們也會在 CSS 領域看到同樣的不斷進步，因為它趕上了現代 web 應用的需求。在 2017 年，主要的進步來自 CSS-in-JS 的明顯改進與採用，其中所有樣式都是通過代碼而不是樣式表進行構建的。目前還不清楚這是否將成為前端社區的最終方向，但這是目前最新的方法，似乎解決了構建基於組件的應用程序時遇到的許多問題。

2017 年見證了 styled-components（由 Max Stoiber、Glen Maddern 和 Phil Plückthun 創建）在流行程度上逐漸佔據主導地位。Emotion（由 Kye Hohenberger 創建）是最新的 JavaScript 庫之一，但它已經被迅速採用。另一個可選方案是 glamorous（由 PayPal、Kent C. Dodds 和一群熱情的貢獻者創建），它封裝了 glamor 庫。查看這篇文章，一篇關於許多CSS-in-JS 的可選方案的總結。

A Brief History of CSS-in-JS: How We Got Here and Where We』re Going

靜態網站生成方案

2017 見證了靜態網站捲土重來。像 Gatsby 這樣的框架使您能夠使用 React 和其他現代工具構建靜態網站。不是每個網站都需要或應該成為一個複雜的現代 web 應用。由於採用與預構建標記（原文 prebuilt markup），靜態網站生成方案使你獲得伺服器端渲染的好處和絕無僅有的速度。如果你正在尋找一個很好的例子，React 官方文檔就是用 Gatsby 構建的。

靜態網站生成方案引發了另一個被稱為 JAMStack 的趨勢：「JavaScript, APIs, Markup」。JAMStack 使用相同的靜態預構建 HTML 文件以及可重複使用的 API JavaScript 來處理請求/響應周期內任何的動態構建。Netlify 是開始使用 JAMStack 和免費靜態主機的絕佳選擇。Brian Douglas寫了一篇很棒的文章，通過構建 Hacker News 應用對比了 JAMStack 和伺服器端渲染應用的不同。

Modern static site generation with Gatsby

GraphQL 的火爆並使我們重新思考 API 的構建

GraphQL 似乎在 REST 之上迅速佔據了一席之地，Samer Buna 甚至聲稱 REST 已經死亡。GraphQL 允許客戶端聲明式的定義所需的數據，並從一個斷點中檢索所有需要數據，而不是管理多個端點以及獲取不必要的數據。

它非常流行，GitHub 已經使用 GraphQL 編寫了最新版本的 API，與此同時為了使 GraphQL 對所有開發人員可用，許多公司正在開發產品，例如 Johannes Schickling 開發的 Graphcool 框架。

GraphQL: A query language for APIs.

React Router 4

由 Ryan Florence 和 Michael Jackson 創建的 React Router，從為 React 提供的一個路由演變為一個真正的 React Router - 一個簡單使用 React 組建的聲明式路由。這是 React 團隊認可的第一個版本。它的 API 已經穩定下來，React Training 團隊已經表示在該項目的整個生命周期中不會看到任何大的突變。

Angular 發布了 v4 版本，緊接著發布了 v5

在臭名昭著的因為沒有維護 SEMVER 跳過了版本 3 之後，Angular 4 於3月23日正式發布。在第4版中，Angular 團隊採納了社區項目 Angular Universal - 它提供了一種伺服器端渲染 Angular 應用的方法 - 作為 Angular 項目官方的一部分。Angular Animation 包從 @angular/core 中抽離出來，為了只在需要的時候導入。視圖引擎中的前期編譯在性能上已經重構，「在最大多數情況下將能減少 60% 左右的生成代碼。」

v5 中看到了額外的期待已久的改進。歸功於新的 @angular/service-worker 包，使用 Angular v5 創建一個 Progressive Web App 比以往的任何版本都要更加容易。Angular 編譯器也得到了改進，在開發過程中實現了更快的構建/重建，Angular Router 現在公開了所有新的生命周期鉤子，包括 ActivationStart，ActivationEnd，ResolveStart 和 ResolveEnd。

TypeScript 和 Flow

TypeScript 贏得了很多 JavaScript 開發者的追捧，而 Flow 提供了一種在不需要激進的重構下更為靈活的方式來引入類型。JavaScript 中缺少類型一直是很多人的抱怨所在。TypeScript 由 Microsoft 創建，是新版 Angular 中的一項要求。Flow 是 Facebook 的工作結晶。

gitconnected 為開發人員創建了交流社區

gitconnected 發起為開發人員和軟體工程師創建社區。它提供了協作、分享文章和與其他開發者進行討論的能力。此外，你可以在個性化的個人資料頁面上無縫地顯示項目和宣傳頁。不要錯過與其他人分享你的興趣、互相幫助學習和成長的機會。

gitconnected - The community for developers and software engineers

譯者註：原文作者為 gitconnected 創始人，故對於最後一條事件是否具備前端年度代表性事件的影響力判斷有失公允。但為了保留原文完整，故依舊做了翻譯。

2018，我們應該期待些什麼

在我們想出如何處理基於組件應用中的樣式的最佳方式時，CSS 的戰鬥就會激化。
越來越多的公司採用具有統一代碼庫的移動解決方案，如 React Native 或 Flutter。
因為離線能力和無縫的移動端體驗，web 變得更加原生。
WebAssembly 可以取得長足的進步，提供一個更好的 web 體驗。
GraphQL 正在並繼續挑戰 REST。
由於不再有對開源協議上的爭議，React 強化了它的地位（是的，甚至更多）。
Flow 和 TypeScript 採取更強大的舉措，使 JavaScript 更具結構。
Containerization 的影響在前端架構中變得越來越普遍。
虛擬現實使用類似 A-Frame、React VR 和 Google VR 這樣的庫正在向前邁進。
人們使用區塊鏈和 web3.js（由 Marek Kotewicz 和 Fabian Vogelsteller 創建）構建了一些非常酷的應用程序。

如果我遺漏了任何大事件，請評論告知，我一定會加上的！

譯者：我一直在維護一個項目 FE-Cookbook，個人想通過這個項目把自己持續關注的前端相關內容匯總收集，一方面方便自己和其他同學日後查看、另一方面希望與有同樣興趣的同學一起將該項目完善壯大。本項目持續更新中，如果覺得有用歡迎給項目添加 Star；如果覺得有任何需要改進或者需要完善的地方，歡迎貢獻代碼提請 PR，針對無衝突的內容我會快速合併。更多項目請關注我的 GitHub。

個人公眾號，微信搜索「黯曉」

http://weixin.qq.com/r/lCgpMZ-EBcJ6rdtS932G (二維碼自動識別)