作為一名前端開發(fā)人員，持續(xù)學(xué)習(xí)是必備的技能之一。隨著新技術(shù)的不斷涌現(xiàn)，前端開發(fā)框架越來(lái)越多，各種框架現(xiàn)、版本的更新此起彼伏。

前端領(lǐng)域的技術(shù)不斷更迭，讓人眼花繚亂。面對(duì)這么多框架，我們應(yīng)該如何選擇?為此，前端開發(fā)工程師 Jacek Schae 寫了一篇博文，對(duì)目前比較熱門的前端框架進(jìn)行了總結(jié)和測(cè)評(píng)。以下便是他的全文。

首先聲明，本文絕對(duì)不是一篇教你如何選擇下一個(gè)前端框架的文章。文章從性能、大小、非常相似的應(yīng)用程序的代碼行這三個(gè)方面進(jìn)行了比較。

考慮到這一點(diǎn)，以下是本文遵守的原則：

• 我們正在比較現(xiàn)實(shí)世界中的應(yīng)用程序，不僅僅是一個(gè)“待開發(fā)”的應(yīng)用程序。后者通常不能傳達(dá)足夠的知識(shí)和觀點(diǎn)來(lái)實(shí)際構(gòu)建應(yīng)用程序。
• 它在某種程度上是標(biāo)準(zhǔn)化的，符合特定規(guī)則的項(xiàng)目，有自己的規(guī)范，提供后端 API、靜態(tài)標(biāo)記和樣式。
• 由專家編寫或?qū)彶榈囊恢碌?、現(xiàn)實(shí)世界的項(xiàng)目。

我們?cè)诒容^哪些庫(kù)/框架?

在撰寫本文時(shí)，RealWorld repo 中有 24 個(gè)管道實(shí)現(xiàn)。關(guān)注者多少并不重要，只要它是出現(xiàn)在 RealWorld repo 頁(yè)面上就可以。

我們看什么指標(biāo)?

性能：此應(yīng)用程序需要多長(zhǎng)時(shí)間才能顯示內(nèi)容并變得可用?

大小：應(yīng)用程序有多大?我們只比較編譯后的 JavaScript 文件的大小。HTML 和 CSS 對(duì)所有變體都是通用的，可以從 CDN(內(nèi)容交付網(wǎng)絡(luò))下載。所有技術(shù)都編譯或轉(zhuǎn)換成 JavaScript，因此我們只調(diào)整這個(gè)文件的大小。

代碼行：作者需要多少行代碼來(lái)創(chuàng)建基于spec 的 RealWorld 應(yīng)用程序?公平地說(shuō)，一些應(yīng)用程序有更多華麗的點(diǎn)綴，但它不應(yīng)該有重大影響。我們量化的唯一文件夾是每個(gè)應(yīng)用程序中的 src/。不管它是不是自動(dòng)生成的，你都需要維護(hù)它。

指標(biāo) 1：性能

我們將檢查與 Chrome 一起發(fā)布的 Lighthouse Audit 的性能分?jǐn)?shù)。Lighthouse 將返回一個(gè) 0 到 100 之間的性能分?jǐn)?shù)。0 是可能獲得的最低分?jǐn)?shù)。更多細(xì)節(jié)請(qǐng)查看 Lighthouse 評(píng)分指南。

測(cè)試設(shè)置 

理論基礎(chǔ)

內(nèi)容繪制越快，用戶就能更早開始做事情，使用這款應(yīng)用的體驗(yàn)就越好。 

注意：由于缺少演示應(yīng)用程序，PureScript 被跳過(guò)。

結(jié)論

Lighthouse Audit 不停止。你可以看到，今年沒(méi)有維護(hù)、更新的應(yīng)用程序正在跌落到 90 分以下。如果你的應(yīng)用程序得分大于 90，可能并不會(huì)有太大的不同。也就是說(shuō) AppRun、Elm、Svelte 真的令人印象深刻。

指標(biāo) 2：大小

傳輸大小來(lái)自 Chrome 網(wǎng)絡(luò)選項(xiàng)卡。GZIPed 響應(yīng)頭加上服務(wù)器傳遞的響應(yīng)體。

這里的表現(xiàn)取決于框架的大小以及添加的額外依賴項(xiàng)。另外，構(gòu)建工具如何從包中消除未使用的代碼也會(huì)有影響。

理論基礎(chǔ)

文件越小，下載越快，解析也越少。 

、
傳輸大小(KB)越少越好

由于缺少演示應(yīng)用程序，PureScript 被跳過(guò)。

Angular+ngrx+nx：檢查 Chrome 開發(fā)工具網(wǎng)絡(luò)選項(xiàng)卡，如果我計(jì)算錯(cuò)誤，請(qǐng)告訴我。

Rust+Yew+WebAssembly 還包括 .wasm 文件

結(jié)論

Svelte 和 Stencil 社區(qū)的驚人工作，使它小于 20KB，這真的很了不起。

指標(biāo) 3：代碼行

使用 cloc，我們計(jì)算每個(gè) repo 的 src 文件夾中的代碼行數(shù)?？瞻仔泻妥⑨屝胁粚儆诖擞?jì)算的一部分。這么做到底有什么意義?

• 如果調(diào)試是消除軟件錯(cuò)誤的過(guò)程，那么編程必須是一個(gè)產(chǎn)生錯(cuò)誤的過(guò)程

——Edsger Dijkstra

理論基礎(chǔ)

這展示了給定的庫(kù)、框架、語(yǔ)言的簡(jiǎn)潔性。根據(jù)規(guī)范，如果是你自己來(lái)寫，需要多少行代碼來(lái)實(shí)現(xiàn)幾乎相同的應(yīng)用程序? 

Svelte 是在最初發(fā)布后添加的——多虧了 Svelte master。

由于 cloc 無(wú)法處理 .riot 文件，已跳過(guò) riotjs-effector-universal-hot 。

Angular+ngrx:LoC 計(jì)算只使用 /libs 文件夾來(lái)完成，包括 .ts 和 .html 文件。如果你認(rèn)為這是錯(cuò)誤的，請(qǐng)告訴我你是如何計(jì)算的。

結(jié)論

只有帶 re frame 的 Imba 和 ClojureScript 才能在 1000LoC 下實(shí)現(xiàn)應(yīng)用。Clojure 以其非凡的表現(xiàn)力而聞名。而 Imba 是第一次出現(xiàn)在這里。如果你在乎 LoC，你知道該做什么。

總結(jié)

請(qǐng)記住，這并不是一個(gè)完全統(tǒng)一標(biāo)準(zhǔn)的比較。有些實(shí)現(xiàn)使用代碼拆分，有些則不使用，有些在 GitHub 托管，有些在 Now 托管，有些在 Netlify 托管。如果你想知道哪一個(gè)是最好，試著自己比較一下吧。

常見(jiàn)問(wèn)題解答

1.為什么框架 X、Y 和 Z 不包括在這個(gè)比較中?

因?yàn)?RealWorld repo 沒(méi)有完成實(shí)現(xiàn)。在你最喜歡的庫(kù)/框架中實(shí)現(xiàn)該解決方案，我們下次將包括它!

2.你為什么稱之為 RealWorld?

因?yàn)樗粌H僅是一個(gè)待辦的應(yīng)用程序。在 RealWorld 中，我們并不是要比較工資、維護(hù)、生產(chǎn)率、學(xué)習(xí)曲線等。還有其他的調(diào)查可以回答這些問(wèn)題。我們所說(shuō)的 RealWorld 是指一個(gè)連接到服務(wù)器、驗(yàn)證并允許用戶 CRUD 的應(yīng)用程序，就像一個(gè)真實(shí)的應(yīng)用程序所做的那樣。

3.為什么沒(méi)有包括我最喜歡的框架?

請(qǐng)參閱上面的第一個(gè)問(wèn)題：因?yàn)?RealWorld repo 沒(méi)有完成實(shí)現(xiàn)。這是社區(qū)努力的成果。如果你想在比較中看到你的框架，可以考慮貢獻(xiàn)。

4.這里面包含了哪個(gè)版本的庫(kù)/框架?

這里包含了 2020 年 3 月提供的版本，信息來(lái)自 RealWorld repo。你可以從 GitHub repo 中找到這一點(diǎn)。

5.為什么你忘了在比較中包含一個(gè)比這個(gè)更受歡迎的框架?

RealWorld repo 的實(shí)現(xiàn)并不完整，它很簡(jiǎn)單。

本文轉(zhuǎn)自雷鋒網(wǎng)，如需轉(zhuǎn)載請(qǐng)至雷鋒網(wǎng)官網(wǎng)申請(qǐng)授權(quán)。