2017前端發展回顧

譯者按： 老技術日趨成熟，新技術層出不窮。

• 原文: A recap of front-end development in 2017
• 譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。

前端開發在2017年依然持續火熱，本文將對熱點事件作一個總結。

16版的React和MIT協議

在前端領域，React一直獨佔鰲頭。2017年又發佈了一個重大的版本更新 version 16。在新版本中，引入了fiber結構來支持異步UI渲染。該版本也提供了一些錯誤機制方便處理未預料的應用失敗，以及不少其它功能。

不過，最使人驚訝的不是它的新功能新特性，而是對開源協議的更改。Facebook新的協議使得不少公司再也不使用React。另外，Jest, Flow, Immutable.js和GraphQL也使用了該協議。

Progressive Web Apps (PWA)

咱們一直在尋找一個可使用網頁技術完美支持其它客戶端的方法。谷歌專研於對網頁應用加強，將它轉換爲progressive web apps(PWA's)。這一思路在2017年被大衆迅速接受。PWA使用現代的瀏覽器技術使得訪問網頁應用的體驗和原生移動應用同樣。而且在性能上有了大幅度的提高，並且支持離線訪問，像推送通知這樣原生APP纔有的功能也支持了。PWA主要是配合manifest.json使用了服務工做線程(service workders)。

Yarn的出現完善了JS軟件包系統

NPM自從誕生以來已經成長巨大，可是卻缺失一些很重要的特性，好在被Yarn支持了。Yarn最主要的功能就是包緩存、一個保證構建肯定的鎖文件、並行操做、平鋪依賴關係。這些功能很是有用，以致於NPM在5.9版本也實現了。Yarn累計已經有10億次下載(如今平均每月125萬)，在Github上有28000+的收藏。就算你沒有使用Yarn，Yarn對整個包管理系統的提高也讓你受益。

CSS網格單元佈局

CSS終於支持網格單元佈局，瀏覽器很快也會進行支持。在過去，咱們須要使用表格(table),float,flex和inline-block來實現網格佈局。現在，原生的CSS網格佈局讓咱們能夠定義行列。趕忙來學習吧: gridbyexample.com/。

主流瀏覽器支持WebAssembly

WebAssembly(wasm)已經開始被全部主流瀏覽器支持。wasm是一個針對瀏覽器的腳本，它是一種底層級(low-level)字節碼格式。由於它的底層性，執行效率能夠很是高。並且還提供了JavaScript API供前端開發者接入。火狐已經聲明全部瀏覽器對wasm的支持。詳情查看: WebAssembly support now shipping in all major browsers

Serverless架構

2017年Serverless應用持續增熱，這是一種新的能夠提升性能又減小資源耗費的架構。你的客戶端徹底從服務器從分離出來，這樣就能夠只關注應用自己而不是架構。一個常見的實現方法是用AWS API Gateway和AWS Lambda函數做爲後臺服務。若是想體驗一下，從這篇博客開始吧：A crash course on Serverless with Node.js。

Vue.js持續火爆

儘管React佔據這主流市場，尤雨溪大神的Vue做爲一個後起之秀大放異彩。Vue基於組建的架構，它已經成爲繼React以後的首選。Vue已經被大型公司使用好比GitLab。

Fundebug是全棧JavaScript錯誤監控平臺，支持各類前端和後端框架，能夠幫助您第一時間發現BUG！

CSS-in-JS

JavaScript的技術不斷的演進，生態系統逐漸穩定。CSS技術也不斷在進步。2017年，主要的進步一些單調的特性改進和吸取CSS-in-JS，也就是說咱們能夠經過寫JS代碼來定義CSS。如今還不清楚該技術是否可否主導將來的CSS走向，很少這種新穎的技術確實解決了基於組件開發的應用中不少的問題。

2017年，Max Stoiber, Glen Maddern, Phil Plückthun開發的styled-components佔據了主導地位。Kye Hohenberger開發的Emotion庫被普遍使用。Glamorous也是一個不錯的選擇，由PayPal的Kent C. Doods, 和一批充滿激情的開發者維護。閱讀這篇文章瞭解更多: CSS-in-JS Roundup: Styling React Components。

靜態網站生成

2017年靜態網站生成也開始熱起來。像Gatsby這樣的網站可使用React等現代工具來構建靜態網頁。不是全部的網站都須要複雜的網頁技術。靜態網站生成會給您更加極致的網頁訪問速度。若是您在尋找合適的例子，React官方文檔就是使用Gatsby生成的。

靜態網站生成有一套工具簡稱爲JAMStack：JavaScript，APIs，Markup。JAMStack使用預編譯好的HTML文件，可複用的APIs以及JavaScript代碼來處理請求。Netlify是一個很好的工具而且提供免費的Host服務。Brian Douglas 寫了一篇很好的文章：經過實現Hacker News來對比JAMStack和服務端渲染APP的優劣。

GraphQL

GraphQL日趨火爆，有賽過REST之勢。Samer Buna甚至宣傳REST已死。GraphQL容許客戶端自定義數據，而後一次獲取。而REST方案須要維護獲取不少無效數據。Github的新版API已經使用GraphQL重寫。Johannes Schickling爲此開發了Graphcool(GraphQL Backend Development Framework)框架。

React Router 4

由Ryan Florence和Michael Jackson開發的React Router最開始僅僅是React中可使用的一個router包，而如今已經徹底變成真正的React Router，成爲React的部件之一。全部的API都基本穩定，React Training Team承諾該項目不會有大的變更，能夠放心使用。

Angular快速發佈了v4和v5

在悄悄地跳過Angular 3以後，Angular 4在3月23號正式發佈。在Angular 4中，Angular團隊吸取了社區項目Angular Universal。Angular Universal提供了服務端渲染Angular應用的機制。Angular Animation從@angular/core中移出。若是你須要使用，須要手動引入。Angular的AOT編譯(Ahead Of Time compilation)通過重構，性能提高。而生成的代碼的體積也大幅縮小，最多可達60%。

在版本5中實現了一些等待了好久的改進功能。Angular 5提供了@angular/service-worker，所以建立PWA變得很是簡單。Angular的編譯器通過優化，編譯時間縮短。Angular Router將全部生命週期Hook暴露，包括ActivationStart, ActivationEnd, ResolveStart, and ResolveEnd。

TypeScript和Flow

TypeScript有大量的開發者擁泵，Flow提供了一個靈活地引入類型的方法能夠避免對現有代碼進行大量的重構。不少開發者都抱怨JavaScript沒有類型，微軟設計的TypeScript應運而生，在最新版本的Angular中，TypeScript已是默認配置。Flow是Facebook實驗室研發的一個類型檢查工具。

2018年咱們期待什麼

• 在找到基於組件架構APP適合的CSS方式以前，CSS技術還將持續發酵；
• 愈來愈多的公司會使用統一的代碼庫來處理移動端和網頁端，好比React Native和Flutter；
• 隨着離線能力和和移動的無縫銜接，網頁APP會更加接近原生；
• WebAssembly將會前進一大步；
• GraphQL持續挑戰REST；
• Flow和TypeScript使得JavaScript更加地結構化；
• 容器技術會影響到前端架構的設計；
• 虛擬現實會繼續成熟，依託於大量成熟的庫A-Frame，React VR，Google VR；
• 將會有人使用區塊鏈和web3.js開發出很酷的應用；

歡迎加入咱們fundebug技術交流3羣：490454644