2017web前端技術總結回顧，看這一年web前端的蛻變和進步

分享前還是先分享自己的web前端學習交流群：614315657群內不定時分享乾貨，包括2017最新的web前端企業案例學習資料和零基礎入門教程，歡迎初學和進階中的小夥伴入群學習交流

前端範疇在 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 獲得了巨大成功，該結構供給了易基於元件的架構，是 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 團隊已經表明在該專案的整個生命週期中不會看到任何大的驟變。

寫在最後：

篇幅有限，今天先分享這麼多，如果大家喜歡的話我會再更新，專注學習web前端技術的小夥伴可以進群（614315657）一起交流學習，群裡還有大量學習資料可供大家自行下載參看，歡迎大家一起來交流討論。