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

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

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

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

庫和框架

React

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對于服務(wù)器端的 React 應(yīng)用程序，next.js 是個很流行的選擇。它提供了你所需要的“通用的”（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ā)一個項目，我鄭重地推薦你使用 next.js 。

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

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

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

Angular

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

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

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

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

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

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

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

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

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

Vue

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

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

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

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

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

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

模塊打包器

Webpack

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

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

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

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

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

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

Parcel

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

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

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

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

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

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

其他工具

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

工具

TypeScript

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

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

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

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

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

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

移動端

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

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

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

Google 還贊助了加速移動端頁面（Accelerated Mobile Pages，AMP）項目，該項目通過標(biāo)準(zhǔn)化由 Google 提供的緩存式 Web Components 輕量級文檔格式來極大地增加了移動設(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ù)保持為一個充滿競爭和吸引力的平臺，我們需要與移動端應(yīng)用競爭。

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

概括總結(jié)

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

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

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

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

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

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

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

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

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

最新評論