摘要：前端開發(fā)在年依然持續(xù)火熱，本文將對(duì)熱點(diǎn)事件做一個(gè)總結(jié)。版的和協(xié)議在前端領(lǐng)域，一直獨(dú)占鰲頭。年又發(fā)布了一個(gè)重大的版本更新。主要是配合使用了服務(wù)工作線程。而且還提供了供前端開發(fā)者接入?？焖侔l(fā)布了和在悄悄地跳過之后，在月號(hào)正式發(fā)布。

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

原文: A recap of front-end development in 2017

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

前端開發(fā)在2017年依然持續(xù)火熱，本文將對(duì)熱點(diǎn)事件做一個(gè)總結(jié)。

在前端領(lǐng)域，React一直獨(dú)占鰲頭。2017年又發(fā)布了一個(gè)重大的版本更新 version 16。在新版本中，引入了fiber結(jié)構(gòu)來支持異步UI渲染。該版本也提供了一些錯(cuò)誤機(jī)制方便處理未預(yù)料的應(yīng)用失敗，以及很多其它功能。

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

我們一直在尋找一個(gè)可以使用網(wǎng)頁技術(shù)完美支持其它客戶端的方法。谷歌專研于對(duì)網(wǎng)頁應(yīng)用增強(qiáng)，將它轉(zhuǎn)換為progressive web apps(PWA"s)。這一思路在2017年被大眾迅速接受。PWA使用現(xiàn)代的瀏覽器技術(shù)使得訪問網(wǎng)頁應(yīng)用的體驗(yàn)和原生移動(dòng)應(yīng)用一樣。并且在性能上有了大幅度的提升，而且支持離線訪問，像推送通知這樣原生APP才有的功能也支持了。PWA主要是配合manifest.json使用了服務(wù)工作線程(service workders)。

NPM自從誕生以來已經(jīng)成長巨大，但是卻缺失一些很重要的特性，好在被Yarn支持了。Yarn最主要的功能就是包緩存、一個(gè)保證構(gòu)建確定的鎖文件、并行操作、平鋪依賴關(guān)系。這些功能非常有用，以至于NPM在5.9版本也實(shí)現(xiàn)了。Yarn累計(jì)已經(jīng)有10億次下載(現(xiàn)在平均每個(gè)月125萬)，在Github上有28000+的收藏。就算你沒有使用Yarn，Yarn對(duì)整個(gè)包管理系統(tǒng)的提升也讓你受益。

CSS終于支持網(wǎng)格單元布局，瀏覽器很快也會(huì)進(jìn)行支持。在過去，我們需要使用表格(table),float,flex和inline-block來實(shí)現(xiàn)網(wǎng)格布局。如今，原生的CSS網(wǎng)格布局讓我們可以定義行列。趕緊來學(xué)習(xí)吧: https://gridbyexample.com/。

WebAssembly(wasm)已經(jīng)開始被所有主流瀏覽器支持。wasm是一個(gè)針對(duì)瀏覽器的腳本，它是一種底層級(jí)(low-level)字節(jié)碼格式。因?yàn)樗牡讓有裕瑘?zhí)行效率可以非常高。而且還提供了JavaScript API供前端開發(fā)者接入。火狐已經(jīng)聲明所有瀏覽器對(duì)wasm的支持。詳情查看: WebAssembly support now shipping in all major browsers

2017年Serverless應(yīng)用持續(xù)增熱，這是一種新的可以提高性能又減少資源耗費(fèi)的架構(gòu)。你的客戶端完全從服務(wù)器從分離出來，這樣就可以只關(guān)注應(yīng)用本身而不是架構(gòu)。一個(gè)常見的實(shí)現(xiàn)方法是用AWS API Gateway和AWS Lambda函數(shù)作為后臺(tái)服務(wù)。如果想體驗(yàn)一下，從這篇博客開始吧：A crash course on Serverless with Node.js。

盡管React占據(jù)這主流市場，尤雨溪大神的Vue作為一個(gè)后起之秀大放異彩。Vue基于組建的架構(gòu)，它已經(jīng)成為繼React之后的首選。Vue已經(jīng)被大型公司使用比如GitLab。

Fundebug是全棧JavaScript錯(cuò)誤監(jiān)控平臺(tái)，支持各種前端和后端框架，可以幫助您第一時(shí)間發(fā)現(xiàn)BUG！

JavaScript的技術(shù)不斷的演進(jìn)，生態(tài)系統(tǒng)逐漸穩(wěn)定。CSS技術(shù)也不斷在進(jìn)步。2017年，主要的進(jìn)步一些單調(diào)的特性改進(jìn)和吸收CSS-in-JS，也就是說我們可以通過寫JS代碼來定義CSS?，F(xiàn)在還不清楚該技術(shù)是否能否主導(dǎo)未來的CSS走向，不多這種新穎的技術(shù)確實(shí)解決了基于組件開發(fā)的應(yīng)用中很多的問題。

2017年，Max Stoiber, Glen Maddern, Phil Plückthun開發(fā)的styled-components占據(jù)了主導(dǎo)地位。Kye Hohenberger開發(fā)的Emotion庫被廣泛使用。Glamorous也是一個(gè)不錯(cuò)的選擇，由PayPal的Kent C. Doods, 和一批充滿激情的開發(fā)者維護(hù)。閱讀這篇文章了解更多: CSS-in-JS Roundup: Styling React Components。

2017年靜態(tài)網(wǎng)站生成也開始熱起來。像Gatsby這樣的網(wǎng)站可以使用React等現(xiàn)代工具來構(gòu)建靜態(tài)網(wǎng)頁。不是所有的網(wǎng)站都需要復(fù)雜的網(wǎng)頁技術(shù)。靜態(tài)網(wǎng)站生成會(huì)給您更加極致的網(wǎng)頁訪問速度。如果您在尋找合適的例子，React官方文檔就是使用Gatsby生成的。

靜態(tài)網(wǎng)站生成有一套工具簡稱為JAMStack：JavaScript，APIs，Markup。JAMStack使用預(yù)編譯好的HTML文件，可復(fù)用的APIs以及JavaScript代碼來處理請(qǐng)求。Netlify是一個(gè)很好的工具并且提供免費(fèi)的Host服務(wù)。Brian Douglas 寫了一篇很好的文章：通過實(shí)現(xiàn)Hacker News來對(duì)比JAMStack和服務(wù)端渲染APP的優(yōu)劣。

GraphQL日趨火爆，有勝過REST之勢。Samer Buna甚至宣傳REST已死。GraphQL允許客戶端自定義數(shù)據(jù)，然后一次獲取。而REST方案需要維護(hù)獲取很多無效數(shù)據(jù)。Github的新版API已經(jīng)使用GraphQL重寫。Johannes Schickling為此開發(fā)了Graphcool(GraphQL Backend Development Framework)框架。

由Ryan Florence和Michael Jackson開發(fā)的React Router最開始僅僅是React中可以使用的一個(gè)router包，而現(xiàn)在已經(jīng)完全變成真正的React Router，成為React的部件之一。所有的API都基本穩(wěn)定，React Training Team承諾該項(xiàng)目不會(huì)有大的變動(dòng)，可以放心使用。

在悄悄地跳過Angular 3之后，Angular 4在3月23號(hào)正式發(fā)布。在Angular 4中，Angular團(tuán)隊(duì)吸收了社區(qū)項(xiàng)目Angular Universal。Angular Universal提供了服務(wù)端渲染Angular應(yīng)用的機(jī)制。Angular Animation從@angular/core中移出。如果你需要使用，需要手動(dòng)引入。Angular的AOT編譯(Ahead Of Time compilation)經(jīng)過重構(gòu)，性能提升。而生成的代碼的體積也大幅縮小，最多可達(dá)60%。

在版本5中實(shí)現(xiàn)了一些等待了很久的改進(jìn)功能。Angular 5提供了@angular/service-worker，因此創(chuàng)建PWA變得非常簡單。Angular的編譯器經(jīng)過優(yōu)化，編譯時(shí)間縮短。Angular Router將所有生命周期Hook暴露，包括ActivationStart, ActivationEnd, ResolveStart, and ResolveEnd。

TypeScript有大量的開發(fā)者擁泵，F(xiàn)low提供了一個(gè)靈活地引入類型的方法可以避免對(duì)現(xiàn)有代碼進(jìn)行大量的重構(gòu)。很多開發(fā)者都抱怨JavaScript沒有類型，微軟設(shè)計(jì)的TypeScript應(yīng)運(yùn)而生，在最新版本的Angular中，TypeScript已經(jīng)是默認(rèn)配置。Flow是Facebook實(shí)驗(yàn)室研發(fā)的一個(gè)類型檢查工具。

在找到基于組件架構(gòu)APP適合的CSS方式之前，CSS技術(shù)還將持續(xù)發(fā)酵；

越來越多的公司會(huì)使用統(tǒng)一的代碼庫來處理移動(dòng)端和網(wǎng)頁端，比如React Native和Flutter；

隨著離線能力和和移動(dòng)的無縫銜接，網(wǎng)頁APP會(huì)更加接近原生；

WebAssembly將會(huì)前進(jìn)一大步；

GraphQL持續(xù)挑戰(zhàn)REST；

Flow和TypeScript使得JavaScript更加地結(jié)構(gòu)化；

容器技術(shù)會(huì)影響到前端架構(gòu)的設(shè)計(jì)；

虛擬現(xiàn)實(shí)會(huì)繼續(xù)成熟，依托于大量成熟的庫A-Frame，React VR，Google VR；

將會(huì)有人使用區(qū)塊鏈和web3.js開發(fā)出很酷的應(yīng)用；

版權(quán)聲明:
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/12/25/a-recap-of-frontend-dev-2017/