2017 前端技術發展回顧
React 16 和 MIT 協議
React 繼續在前端領域佔據著主導地位，並在 2017 年釋出了最受期待的版本之一 – React 16。 它包含了可以實現非同步 UI 渲染的 fiber 架構。通過提供包括錯誤邊界在內的很多其他特性，這次釋出使得 React 可以更容易的管理意外的程式故障。
讓人意外的是，React 在去年所取得最重要的成就不是它推出的新特性，而是修改了它的開源協議。Facebook 放棄了導致很多公司遠離 React 的 BSD 協議，轉而採用使用者用好的MIT 協議。除此外，Jest、Flow、Immutable.js 和 GraphQL 授權也都改為 MIT 協議。
Progressive Web Apps
我們一直在尋找彌補 web 和其他客戶端之間體驗差距上的解決方案。Google 一直主導通過將 web 應用轉換為 Progressive Web Apps(PWA) 來增強它的能力，而這一方法在 2017 年迅速獲得採用。一個 PWA 應用利用現代瀏覽器技術來提供更像移動應用程式的 web 體驗。它提供了改進的效能和離線體驗，以及以前僅可用於移動的功能，例如推送通知。 PWA 的基礎是一個 manifest.json 檔案和對 service workers 的利用。
Yarn 的採用改善了 JS 包管理的生態系統
NPM 自從最初發布以來已經有了相當長的一段時間，但它仍然缺少一些關鍵特性，而這正是 Yarn 希望補充的。Yarn 的主要貢獻是包快取，一個確保確定性構建的鎖檔案，並行操作以及依賴關係。這些功能非常成功，以致於 NPM 在其 5.0 版本中實現了它們。Yarn 下載量超過 10 億次（目前每月下載量達到了 125 萬次）並擁有驚人的
CSS 網格佈局
網格佈局最終被 CSS 採納為標準，瀏覽器也正在快速地採用它。過去，網格系統在 CSS 中曾被 tables、float、flex 以及 inline-block 實現過。原生的 CSS 網格佈局擅長於將一個頁面劃分成幾個主要的區域，併為內容建立列和行。檢視 Rachel Andrew 寫的 https://gridbyexample.com/ 開始學習。
WebAssembly 在所有主流瀏覽器中都得到了支援
Serverless 架構
Serverless 應用在 2017 年以狂熱的節奏流行開來。他們提供了一種以降低成本來提升效能的方法。你的客戶端與服務端完全分離，這允許你可以專注在你的應用而不是基礎設施上。一個常見的實現是將 AWS API 閘道器與 AWS Lambda 函式結合使用，後者作為一個 BaaS （後端作為一個服務）在你的客戶端使用。你可以從 Adnan Rahić 的精彩介紹開始。
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 的可選方案的總結。
靜態網站生成方案
2017 見證了靜態網站捲土重來。像 Gatsby 這樣的框架使您能夠使用 React 和其他現代工具構建靜態網站。不是每個網站都需要或應該成為一個複雜的現代 web 應用。由於採用與預構建標記（原文 prebuilt markup），靜態網站生成方案使你獲得伺服器端渲染的好處和絕無僅有的速度。如果你正在尋找一個很好的例子，React 官方文件就是用 Gatsby 構建的。
靜態網站生成方案引發了另一個被稱為 JAMStack 的趨勢：“JavaScript, APIs, Markup”。JAMStack 使用相同的靜態預構建 HTML 檔案以及可重複使用的 API JavaScript 來處理請求/響應週期內任何的動態構建。Netlify 是開始使用 JAMStack 和免費靜態主機的絕佳選擇。Brian Douglas寫了一篇很棒的文章，通過構建 Hacker News 應用對比了 JAMStack 和伺服器端渲染應用的不同。
GraphQL 的火爆並使我們重新思考 API 的構建
GraphQL 似乎在 REST 之上迅速佔據了一席之地，Samer Buna 甚至聲稱 REST 已經死亡。GraphQL 允許客戶端宣告式的定義所需的資料，並從一個斷點中檢索所有需要資料，而不是管理多個端點以及獲取不必要的資料。
它非常流行，GitHub 已經使用 GraphQL 編寫了最新版本的 API，與此同時為了使 GraphQL 對所有開發人員可用，許多公司正在開發產品，例如 Johannes Schickling 開發的 Graphcool 框架。
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 創始人，故對於最後一條事件是否具備前端年度代表性事件的影響力判斷有失公允。但為了保留原文完整，故依舊做了翻譯。
2018，我們應該期待些什麼
- 在我們想出如何處理基於元件應用中的樣式的最佳方式時，CSS 的戰鬥就會激化。
- 越來越多的公司採用具有統一程式碼庫的移動解決方案，如 React Native 或 Flutter。
- 因為離線能力和無縫的移動端體驗，web 變得更加原生。
- WebAssembly 可以取得長足的進步，提供一個更好的 web 體驗。
- GraphQL 正在並繼續挑戰 REST。
- 由於不再有對開源協議上的爭議，React 強化了它的地位（是的，甚至更多）。
- Flow 和 TypeScript 採取更強大的舉措，使 JavaScript 更具結構。
- Containerization 的影響在前端架構中變得越來越普遍。
- 人們使用區塊鏈和 web3.js（由 Marek Kotewicz 和 Fabian Vogelsteller 建立）構建了一些非常酷的應用程式。
如果我遺漏了任何大事件，請評論告知，我一定會加上的！
譯者：我一直在維護一個專案 FE-Cookbook，個人想通過這個專案把自己持續關注的前端相關內容彙總收集，一方面方便自己和其他同學日後檢視、另一方面希望與有同樣興趣的同學一起將該專案完善壯大。本專案持續更新中，如果覺得有用歡迎給專案新增 Star；如果覺得有任何需要改進或者需要完善的地方，歡迎貢獻程式碼提請 PR，針對無衝突的內容我會快速合併。更多專案請關注我的 GitHub。