像 React 和 Angular 這樣的框架，繼續(xù)在社區(qū)中享有大規(guī)模的支持，但是，新的候選者 Vue ，人氣也很旺。Webpack 依舊是構(gòu)建的首選工具，NPM 仍舊是系統(tǒng)選擇包的工具。WebAssembly 以前所未有的速度向 Web 開放了眾多新的和令人興奮的案例。像 GraphQL 等技術(shù)，革新了書寫和在 web 應(yīng)用中使用 API 的方式。

于此同時(shí)，語言自身也在改進(jìn)，ECMAScript 標(biāo)準(zhǔn)的 2017 版本增加了異步功能，這大大提高了開發(fā)者寫異步代碼時(shí)的經(jīng)驗(yàn)。現(xiàn)在，它們被所有的主流瀏覽器支持。另一個(gè)值得注意的改進(jìn)是共享內(nèi)存和原子操作。

然而， 在暴露出他們出現(xiàn)瀏覽器側(cè)信道攻擊涉及推測執(zhí)行之后，共享內(nèi)存在2月5日被所有的主流瀏覽器暫時(shí)禁止 。

預(yù)計(jì)今年某個(gè)時(shí)候，當(dāng)瀏覽器的開發(fā)商找到的阻止漏洞的方法時(shí)，共享內(nèi)存就可以使用了。

庫和框架

React

2017年9月，React 16 的發(fā)布賺足眼球。這是迄今為止，React 動(dòng)靜最大的一個(gè)版本：

增加了數(shù)據(jù)塊（fragments，現(xiàn)在可以返回一個(gè)數(shù)組，而不是將所有的東西都裝在一個(gè)無用的 <div> 元素里）；

更佳的容錯(cuò)機(jī)制（可以顯示錯(cuò)誤的范圍，出錯(cuò)時(shí)，React 就會(huì)從根元素卸載或者在特殊的出錯(cuò)范圍組件處卸載）；

接口（portals，現(xiàn)在你可以在 React DOM 樹之外的 DOM 節(jié)點(diǎn)中展示 React 子元素），還有數(shù)據(jù)流（streaming，允許服務(wù)器端的 App 向客戶端提供數(shù)據(jù)流，而不必等待整個(gè)序列完成之后才進(jìn)行）。

此外，React 還采用 RFC 模式，讓 React 開發(fā)團(tuán)隊(duì)有機(jī)會(huì)獲得更多有益的想法。任何會(huì)影響到 React API 的 RFC 建議，都可以提交。React 開發(fā)團(tuán)隊(duì)發(fā)布了他們的語義修改（context changes）建議作為第一個(gè) RFC 的示范。讀起來還挺有意思。

React 粉們已經(jīng)提供好幾個(gè)建議，有些功能非常有趣，包括：

處理方法的參數(shù)——減少代碼量，這個(gè)建議中，props，state 和 context 都被視為參數(shù)。

setState 返回一個(gè)承諾（promise）——如果你需要 setState 同步，并且你在一個(gè)異步/等待的環(huán)境中，你會(huì)發(fā)現(xiàn)這對形影不離的鴛鴦對子非常美好。

異步-安全靜態(tài)生命周期鉤子——完全拋棄傳統(tǒng)的、基于類的 API ，讓我們處理起異步數(shù)據(jù)來更容易，還能節(jié)省不必要的處理步驟，向方法組件提供更潔凈的升級(jí)通道。

當(dāng)然，并不是所有的建議都會(huì)出現(xiàn)在未來的版本中。但要承認(rèn)，React 開發(fā)團(tuán)隊(duì)為用戶們做了這些安排，還是很不錯(cuò)的。隨著 Yarn 和 Ember 等項(xiàng)目的應(yīng)用展開，RFC 將會(huì)變成主流形式。

現(xiàn)代網(wǎng)絡(luò)開發(fā)過程中，設(shè)置并協(xié)調(diào)所有工具相當(dāng)復(fù)雜，所以，Boilerplate 項(xiàng)目在 React 社區(qū)內(nèi)總是受到歡迎。大多數(shù)人會(huì)建議用戶直接克隆項(xiàng)目文件，就地起爐灶。

新手常常茫然不知所措。因?yàn)?，他們總是?huì)看到一個(gè)復(fù)雜的“白板”（blank slate），竟然會(huì)依賴成千上萬個(gè)類庫或軟件，而且他們完全不理解那些配置代碼是什么意思。

Facebook 的 create-react-app 則不同 —— 它是一個(gè)命令行工具，可以將 Webpack、Babel、PostCSS 和 Jest 打包到一起，在零配置情況下的進(jìn)行開發(fā)。

自去年以來，它越來越受歡迎。它在 GitHub 中，是一顆閃亮的明星，star 數(shù)由 2017 年初的 18k 直接攀升到年底的 40k 。它還提供一個(gè) “eject”（彈射）命令，讓你跳出 create-react-app 模式。

那個(gè)模式下，依賴軟件自動(dòng)安裝、配置文件自動(dòng)生成，你只需要手動(dòng)修改配置文件。有人說，這個(gè)命令的面世也是 React 近年來大受歡迎的部分原因。

對于服務(wù)器端的 React 應(yīng)用程序，next.js 是個(gè)很流行的選擇。它提供了你所需要的“通用的”（universal）網(wǎng)絡(luò)應(yīng)用開發(fā)工具，安裝、配置起來還挺簡單。在開發(fā)難度日益增加，漸進(jìn)迭代式網(wǎng)絡(luò)應(yīng)用（progressive web app）再度受寵，通用的或者同構(gòu)（isomorphic）的應(yīng)用降溫的情況下，這一點(diǎn)尤其重要。如果你要新開發(fā)一個(gè)項(xiàng)目，我鄭重地推薦你使用 next.js 。

我認(rèn)為，React 社區(qū)最終會(huì)開發(fā)出類似 create-react-app 的東西，但針對的是更為復(fù)雜的應(yīng)用。

next.js 與此目標(biāo)非常接近。但它只是服務(wù)器端的應(yīng)用，這就意味著它不會(huì)成為主流。在我看來，還沒有哪一個(gè)框架已經(jīng)同時(shí)實(shí)現(xiàn)即好開發(fā)，又好使用。

“附帶電池”（batteries included）的方法將誘惑越來越多的開發(fā)者，從而對系統(tǒng)配置的復(fù)雜和系統(tǒng)維護(hù)所必須花費(fèi)的時(shí)間產(chǎn)生錯(cuò)覺。

Angular

盡管 Angular 最新的版本（版本 5.1.3 ）已于1月3號(hào)發(fā)布了，但是 AngularJS 項(xiàng)目（也就是 Angular 1.x 版本 ）仍舊處于活躍的開發(fā)狀態(tài)，甚至在 2017年12月18號(hào) 發(fā)布了版本  1.6.8 。許多大公司仍舊使用舊版本的 Angular ，并由于這個(gè)原因重要的速度改進(jìn)和安全修復(fù)都移植到了 AngularJS 上。

盡管谷歌對就項(xiàng)目的支持何時(shí)結(jié)束還不明確，但是在過去的官方說法中已表明對其的支持，在主要的 web 流量轉(zhuǎn)向 angular.io 而非 angular.org 之前是不會(huì)停止的。然而，鑒于舊版本使用的是相當(dāng)自由的 MIT 協(xié)議，盡管官方在2018年不會(huì)對其在繼續(xù)支持，你也可以期待進(jìn)一步的發(fā)展。

近來 Angular 的發(fā)布引起了大家的注意，尤其是最新的 v5 版本的發(fā)布。通過如對模板的提前（ahead-of-time）編譯，以及在打包中簡單方便地整合 service worker 這樣創(chuàng)新性的功能，其保持著與其競爭者的與眾不同。

當(dāng)這些功能對于任何應(yīng)用程序都是必備的時(shí)候，Angular 的閃光之處在于其集成的工具。Angular CLI 簡單易用，并且現(xiàn)在還可以通過 App Shell 提高對快速生成通用的和漸進(jìn)的 web 應(yīng)用的支持。

React 社區(qū)所秉持的是一種不太固執(zhí)己見的前端開發(fā)哲學(xué)。大多數(shù)情況下，開發(fā)者需要手動(dòng)安裝許多復(fù)雜的功能，除非他們使用 multitude of boilerplate projects 項(xiàng)目中的一種。

許多開發(fā)者傾向于自己動(dòng)手設(shè)置，這樣他們可以理解系統(tǒng)的各個(gè)方面。

有時(shí) web 社區(qū)感覺起來是在固執(zhí)己見和集中化與非固執(zhí)己見和非集中化之間的輪回。一件令人不禁思考的事情是 React 社區(qū)是否會(huì)最終向其他的方向發(fā)展。

在完成了幾個(gè)大型定義開發(fā)的 React / Redux / Webpack 項(xiàng)目后，所有的事情都基本為你準(zhǔn)備好了，“馬上開始工作”（just work）是一種極具吸引力的前景。

通過近來發(fā)布的版本，可以有趣的看到 Angular 在新的一年中竟會(huì)更加受到歡迎。盡管還很難說有多少，但是當(dāng)你看到 NPM 的下載量的時(shí)候，Angular 并沒有看起來增長的那么多。React 已經(jīng)繼續(xù)保持領(lǐng)先，尤其是在過去的一年中。它目前每天 NPM 的下載量是其他的三倍。

Vue

Vue 在 2017 年已經(jīng)成了 React 一個(gè)非常受歡迎的可替代選項(xiàng)。它們都利用了虛擬 DOM ，并且都是基于組件且超輕量級(jí)的。在 JavaScript 2017 調(diào)查的描述中，Vue 被列為Angular 1 和 React 之后第三個(gè)最常被使用的前端框架。

最值得注意的是它還是那次調(diào)查中最“想要去學(xué)習(xí)”的框架。

Vue 的核心團(tuán)隊(duì)計(jì)劃 2.6 版本的發(fā)布會(huì)趕在今年的2月份之前，并將專注于錯(cuò)誤處理、函數(shù)式組件一級(jí)服務(wù)端渲染。跟隨 React 的引領(lǐng)，他們也計(jì)劃在未來的版本中只支持那些基業(yè)長青的瀏覽器版本。

Vue 在過去幾年 日漸受歡迎, 但要取代 React 當(dāng)前前端視圖庫王者的地位，現(xiàn)在看來還很難說。

許多人都寫過它對于來自 Angular 領(lǐng)域的開發(fā)者們的吸引力, 而我也期望這種吸引力能繼續(xù)保持。通常的觀點(diǎn)是，Vue 不需要你去使用 JSX ，也不像 Angular，它不會(huì)強(qiáng)制要求你使用 TypeScript。

它的模板語言也同 Angular 的相當(dāng)類似。此外，Vue 也有一整套類似 Angular 的聯(lián)系緊密的包，不過 Vue 在以一種更加分散的方式將它們維護(hù)得相當(dāng)好。

模塊打包器

Webpack

Webpack 3 在 2017 年 6 月發(fā)布，將作用域的提升（scope hoisting）作為它的旗艦功能。作用域的提升（scope hoisting）將所有模塊一同封裝在一單個(gè)閉包中而不是分拆它們。這可以顯著地提升 bundle 的執(zhí)行時(shí)間和 bundle 的體積。

Rollup 是一個(gè)顯著的特性，另一個(gè)捆綁器模塊已經(jīng)成為 Webpack 2 及更高版本中功能的靈感來源。

Webpack 團(tuán)隊(duì)已為 Webpack v4 版計(jì)劃了許多重要的特征，這是為 alpha 版本寫的博文，預(yù)計(jì)將會(huì)很快發(fā)布。最大的特點(diǎn)是 WebAssembly 模塊的支持--目標(biāo)是使 WASM 模塊作為 ECMAScript 模塊輕易地運(yùn)行在 Webpack 上。還計(jì)劃在生成 CSS 的方式徹底修改 WebPack 。而不是把 CSS 植入 JavaScript 中，Webpack 4 將生成 CSS 資源。

新版本還將專注于構(gòu)建效率（性能）-- 這是 Webpack 社區(qū)投票選出的最優(yōu)先的 issue 。

在我看來，Webpack 也應(yīng)該更多地關(guān)注文檔和配置信息。雖然 Webpack 的過人之處是配置靈活，但它犧牲了用戶體驗(yàn)。

一個(gè) Webpack 的 zero-config（零配置）模式已被提出，但它并沒有被優(yōu)先考慮，盡管像 Parcel 這樣的模塊打包器已經(jīng)爆炸式地流行。

Parcel

2017 年底，Parcel 大出風(fēng)頭，在不到一個(gè)月的時(shí)間里斬獲 1.4萬 多個(gè) star。它的成功，得益于 Webpack 提供的“零配置”的進(jìn)展緩慢和混沌不清。它提供了幾個(gè)重要的、跟 Webpack 類似的模塊綁定功能，如代碼分割和模塊熱替換。

接下來的開發(fā)工作將會(huì)集中在補(bǔ)充與 Webpack 類似的小功能上，如進(jìn)入點(diǎn)（entry point）和一個(gè)完備的插件系統(tǒng)。

2018 年我將會(huì)密切關(guān)注 Parcel 的開發(fā)進(jìn)展。它是否能取代炙手可熱的 Webpack ，讓我們拭目以待。

盡管 Webpack 的最新版本推出了很有價(jià)值的功能，新版的用戶文檔網(wǎng)站也進(jìn)行了大幅的改進(jìn)，還是讓人感覺到 Webpack 正在走下坡路。

在復(fù)雜應(yīng)用情景下，Webpack 的配置工作仍然是一件頭疼的事。

如果能紓解開發(fā)人員的痛苦，提供一個(gè)不需要多少配置工作的替代方案，Parcel 定會(huì)有所成就。

其他工具

Gulp 和 Browserify 仍然被數(shù)以千計(jì)的項(xiàng)目以各種形式采用，但不再被認(rèn)為是前端構(gòu)建工具的前沿技術(shù)。它們的持續(xù)開發(fā)對于現(xiàn)有系統(tǒng)的維護(hù)非常重要，并且它們目前仍然可以用于非常具體的新項(xiàng)目用例。然而，過去幾年開發(fā)者的普遍看法是，它們過于復(fù)雜，需要過多的手動(dòng)設(shè)置。在 Webpack 應(yīng)用越來越廣泛占據(jù)領(lǐng)先地位的情況下，他們?nèi)ツ甑?NPM 下載量都在持續(xù)下滑。

工具

TypeScript

TypeScript 有一個(gè)版本計(jì)劃在一月發(fā)布，包括新的 ECMAScript 功能，例如數(shù)字隔離器和幾種涉及對象的文字和類的高級(jí)類型系統(tǒng)改進(jìn)。還有一個(gè)改變計(jì)劃，是提高 TypeScript 的模塊系統(tǒng)處理非 ECMAScript 模塊的能力。

這將使它更符合 Babel 處理模塊互操作性的方式。希望這可以讓 TypeScript 更容易使用不同類型的模塊，畢竟對新用戶來說是一個(gè)致命的痛點(diǎn)。此版本還計(jì)劃通過增加對 ECMAScript 模塊自動(dòng)轉(zhuǎn)換的支持，來改進(jìn)已經(jīng)非常棒的重構(gòu)功能。

微軟的 TypeScript 顯然在對抗 Flow 上已經(jīng)贏了（對手是來自  Facebook 的類型檢查工具）。這有很多原因，但在我看來，僅僅是微軟把項(xiàng)目運(yùn)作得很好。

跟微軟每個(gè)月的大量的版本發(fā)布相比，F(xiàn)low 就是零星的小的版本。而且使用 TypeScript 的工具也更好，帶有 tslint 的卓越的 linter 支持和 Visual Studio Code（以及許多其他編輯器）提供的絕妙的編輯器支持，提供了 Flow 不可能實(shí)現(xiàn)的自動(dòng)轉(zhuǎn)換。

這跟是否是一個(gè)更好的類型系統(tǒng)幾乎是無關(guān)的。——我敢打賭，大多數(shù)開發(fā)人員更關(guān)心的是支持和易用性。

此外，TypeScript 的社區(qū)是很大的。通過  DefinitelyType  項(xiàng)目，TypeScript 提供的流行 NPM 包的類型定義與  flow-typed  提供的類型定義相比，要多很多。如果不出意外，這一事實(shí)對任何使用 Flow 的項(xiàng)目的長期生存能力構(gòu)成嚴(yán)重威脅。

移動(dòng)端

通用 Web 應(yīng)用程序在 React 出現(xiàn)的時(shí)候開始流行起來。這種創(chuàng)新使前端 Web 應(yīng)用程序能夠以增加開發(fā)復(fù)雜性為代價(jià)在服務(wù)器上先渲染。雖然它們還很是很流行，但它們絕不是真正的做事方式。

在移動(dòng)端，當(dāng)前的開發(fā)者已經(jīng)開始專注于開發(fā)所謂的漸進(jìn)式 Web 應(yīng)用 - 這是最初由 Google 贊助的一項(xiàng)計(jì)劃，旨在使 Web 應(yīng)用對移動(dòng)端用戶更加友好。

對于開發(fā)者來說，這意味著更加關(guān)注速度和移動(dòng)端用戶體驗(yàn)。這可以通過使用像 service workers 來實(shí)現(xiàn)離線支持和應(yīng)用程序清單文件來定制應(yīng)用在操作系統(tǒng)中的外觀等新技術(shù)來實(shí)現(xiàn)。這可以被看作是響應(yīng)式網(wǎng)頁設(shè)計(jì)的自然演變。

Google 還贊助了加速移動(dòng)端頁面（Accelerated Mobile Pages，AMP）項(xiàng)目，該項(xiàng)目通過標(biāo)準(zhǔn)化由 Google 提供的緩存式 Web Components 輕量級(jí)文檔格式來極大地增加了移動(dòng)設(shè)備上的網(wǎng)頁加載次數(shù)。它已經(jīng)被網(wǎng)絡(luò)上的主流內(nèi)容發(fā)布商迅速采用，但關(guān)于發(fā)布商的廣告收入和關(guān)于通過在 Google 服務(wù)器上托管內(nèi)容而放棄控制權(quán)的擔(dān)憂這兩方面存在持續(xù)的爭議。

如果我們希望 Web 繼續(xù)保持為一個(gè)充滿競爭和吸引力的平臺(tái)，我們需要與移動(dòng)端應(yīng)用競爭。

盡管 漸進(jìn)式 Web 應(yīng)用不能做移動(dòng)端應(yīng)用可以做的所有事情，但它是維持 Web 長期健康狀況的重要一步。我希望他們變得更受歡迎，最好在不久的將來成為強(qiáng)制性的。

概括總結(jié)

總的來說，前端已趨于將現(xiàn)有項(xiàng)目和 Web 開發(fā)中許多不同的部分進(jìn)行整合。

React、webpack、TypeScript 繼續(xù)變得更受歡迎。Vue 和 Parcel 看起來可能成為各自的領(lǐng)域的領(lǐng)先者的競爭威脅；同時(shí)，舊的技術(shù)如 Angular 和 Browserify 還在，但以開始緩慢下滑。

一些趨勢仍在繼續(xù)，如基于組件的設(shè)計(jì)。它絕不是一個(gè)新概念，它最近開始復(fù)興并不局限于 Web 開發(fā)。我不希望應(yīng)用程序架構(gòu)在短期內(nèi)發(fā)生任何根本性的變化。

有一種傾向于開發(fā)者友好的“自以為是”的工具。你可以在反對 Webpack 和 React 的生態(tài)系統(tǒng)的復(fù)雜性上看到它們。簡單的確勝過復(fù)雜，但是沒有復(fù)雜度很難滿足各種各樣的需求。

前端發(fā)展需要的是更多的共識(shí)。人們常常嘲笑它過于復(fù)雜，我也有這樣的觀點(diǎn)。

最近的一個(gè)重點(diǎn)是吸引新的開發(fā)人員，我認(rèn)為我們也應(yīng)該關(guān)注一般企業(yè) Web 項(xiàng)目中的復(fù)雜性——包括應(yīng)用程序本身和輔助它的構(gòu)建工具。

插件: LogRocket, 一款適合 Web 應(yīng)用的 DVR

LogRocket 是一個(gè)前端日志工具，它可以讓你像發(fā)生在自己的瀏覽器中那樣重現(xiàn)問題。無需猜測錯(cuò)誤發(fā)生的原因，或者要求用戶截圖以及日志轉(zhuǎn)儲(chǔ)，LogRocket 可以讓你重現(xiàn)會(huì)話以便快速了解發(fā)生了什么錯(cuò)誤。無需考慮框架，它適用于任何應(yīng)用程序，也有插件可以從 Redux、Vuex和@ngrx/tore 上記錄額外的上下文。

除了記錄 Redux 動(dòng)作和狀態(tài)之外，LogRocket 還會(huì)記錄控制臺(tái)日志、JavaScript 錯(cuò)誤、堆棧信息、帶有頭+主體的網(wǎng)絡(luò)請求/響應(yīng)、瀏覽器元數(shù)據(jù)和自定義日志。它還可以指導(dǎo) DOM 記錄頁面上的 HTML 和 CSS ，即使是最復(fù)雜的單頁面應(yīng)用程序也可以重建像素完美的視頻。