我們?cè)僮鲆淮巍?這是2020年，還有2019年，2018年和2017年。

首先讓我開(kāi)始-絕對(duì)不是您應(yīng)該為前端選擇的比較。 它是對(duì)三個(gè)方面的比較小而相對(duì)簡(jiǎn)單的：性能，大小和非常相似的應(yīng)用程序的代碼行。

考慮到這一點(diǎn)，它是如何工作的：

我們正在比較RealWorld應(yīng)用程序-不僅僅是"要做"的應(yīng)用程序。 通常，"待辦事項(xiàng)"沒(méi)有傳達(dá)足夠的知識(shí)和觀點(diǎn)來(lái)實(shí)際構(gòu)建實(shí)際的應(yīng)用程序。

它以某種方式標(biāo)準(zhǔn)化-一個(gè)符合某些規(guī)則的項(xiàng)目-有一個(gè)規(guī)范。 提供后端API，靜態(tài)標(biāo)記和樣式。

由專家撰寫或?qū)彶?一個(gè)一致的，真實(shí)世界的項(xiàng)目，理想情況下，該技術(shù)的專家應(yīng)建立或?qū)彶椤?/p>

我們正在比較哪些庫(kù)/框架？

在撰寫本文時(shí)，在RealWorld存儲(chǔ)庫(kù)中有24種Conduit實(shí)現(xiàn)。 是否有大量的追隨者都沒(méi)有關(guān)系。 唯一的條件是-它顯示在RealWorld回購(gòu)頁(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)整該文件的大小。

代碼行-作者需要多少行代碼才能基于規(guī)范創(chuàng)建RealWorld應(yīng)用程序？ 公平地講，某些應(yīng)用程序有很多麻煩，但應(yīng)該不會(huì)產(chǎn)生重大影響。 我們量化的唯一文件夾是每個(gè)應(yīng)用程序中的src /。 無(wú)論它是自動(dòng)生成的，都沒(méi)關(guān)系-您仍然需要對(duì)其進(jìn)行維護(hù)。

指標(biāo)1：性能

我們將檢查Chrome隨附的Lighthouse Audit的性能得分。 Lighthouse返回的性能得分在0到100之間。0是最低的得分。 有關(guān)更多詳細(xì)信息，請(qǐng)參閱《燈塔計(jì)分指南》。

審核設(shè)置

基本原理

繪畫得越早，某人可以做某事的越早，使用該應(yīng)用程序的人的體驗(yàn)就越好。

備注

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

結(jié)論

Lighthouse Audit沒(méi)睡。 您可以在今年看到未維護(hù)/未更新的應(yīng)用程序跌破90懸崖。 如果您的應(yīng)用程序得分> 90，則可能不會(huì)有很大的不同。 也就是說(shuō)，AppRun，Elm和Svelte確實(shí)令人印象深刻。

指標(biāo)2：大小

傳輸大小來(lái)自Chrome網(wǎng)絡(luò)標(biāo)簽。 服務(wù)器提供的GZIPped響應(yīng)標(biāo)頭以及響應(yīng)正文。

這取決于框架的大小以及所添加的任何其他依賴項(xiàng)。 同樣，構(gòu)建構(gòu)建工具可以很好地消除捆綁軟件中未使用的代碼。

基本原理

文件越小，下載速度越快，并且解析的次數(shù)也更少。

備注

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

Angular + ngrx + nx，請(qǐng)不要怪我Angular + ngrx + nx-檢查Chrome開(kāi)發(fā)工具網(wǎng)絡(luò)標(biāo)簽，如果我算錯(cuò)了，請(qǐng)告訴我。

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

結(jié)論

Svelte和Stencil社區(qū)所做的驚人工作將其壓縮到20KB以下，確實(shí)是一項(xiàng)成就。

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

使用cloc，我們可以計(jì)算每個(gè)存儲(chǔ)庫(kù)的src文件夾中的代碼行數(shù)。 空白行和注釋行不是此計(jì)算的一部分。 為什么這有意義？

如果調(diào)試是消除軟件錯(cuò)誤的過(guò)程，則編程必須是將其放入其中的過(guò)程— Edsger Dijkstra

基本原理

這說(shuō)明給定庫(kù)/框架/語(yǔ)言的簡(jiǎn)潔程度。 根據(jù)規(guī)范，您需要多少行代碼才能實(shí)現(xiàn)幾乎相同的應(yīng)用程序（其中一些具有更多的功能）。

備注

由于cloc無(wú)法處理.svelte文件，因此Svelte被跳過(guò)。

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

Angular + ngrx：使用/ libs文件夾完成的LoC計(jì)算僅包括.ts和.html文件。 如果您認(rèn)為這是錯(cuò)誤的，請(qǐng)告訴我什么是正確的數(shù)字以及如何計(jì)算。

結(jié)論

只有具有重新構(gòu)架的Imba和ClojureScript才能在1000LoC下實(shí)施該應(yīng)用程序。 Clojure以異常表達(dá)而著稱。 Imba第一次出現(xiàn)在這里（去年是cloc，不知道.imba文件格式），看起來(lái)好像會(huì)保留下來(lái)。 如果您關(guān)心自己的LoC，那么您就會(huì)知道該怎么做。

常問(wèn)問(wèn)題

＃1為什么此比較中不包含框架X，Y和Z？

因?yàn)樵赗ealWorld倉(cāng)庫(kù)中尚未完成實(shí)施。 考慮做出貢獻(xiàn)！ 在您喜歡的選擇的庫(kù)/框架中實(shí)施該解決方案，我們下次將包括它！

＃2您為什么稱其為現(xiàn)實(shí)世界？

因?yàn)樗恢皇且粋€(gè)待辦事項(xiàng)應(yīng)用程序。 在RealWorld中，我們并不是要比較薪水，維護(hù)，生產(chǎn)力，學(xué)習(xí)曲線等。還有其他一些調(diào)查可以回答其中的一些問(wèn)題。 我們所說(shuō)的RealWorld是一個(gè)連接到服務(wù)器，進(jìn)行身份驗(yàn)證并允許用戶CRUD的應(yīng)用程序，就像真實(shí)世界中的應(yīng)用程序一樣。

＃3您為什么不包括我最喜歡的框架？

請(qǐng)參見(jiàn)上面的＃1，但以防萬(wàn)一，這里又來(lái)了：因?yàn)樵赗ealWorld存儲(chǔ)庫(kù)中該實(shí)現(xiàn)尚未完成。 我并沒(méi)有完成所有的實(shí)現(xiàn)-這是社區(qū)的努力。 如果您想在比較中看到您的框架，請(qǐng)考慮做出貢獻(xiàn)。

＃4您包括哪個(gè)版本的庫(kù)/框架？

在撰寫本文時(shí)（2020年3月）可用。 該信息來(lái)自RealWorld回購(gòu)。 我確定您可以在GitHub存儲(chǔ)庫(kù)中找到此內(nèi)容。

＃5為什么您忘了包含一個(gè)比比較流行的框架？

同樣，請(qǐng)參閱＃1和＃3。 在RealWorld存儲(chǔ)庫(kù)中，該實(shí)現(xiàn)尚未完成； 就這么簡(jiǎn)單。

如果您喜歡這篇文章，應(yīng)該在Twitter上關(guān)注我。 我只寫/推特有關(guān)編程和技術(shù)。

摘要

請(qǐng)記住，這并不是蘋果之間的比較。 有些實(shí)現(xiàn)使用代碼拆分，有些則沒(méi)有。 其中有些托管在GitHub上，有些托管在Now上，有些托管在Netlify上。 您是否仍然想知道哪一個(gè)最好？ 我把它留給你。

(本文翻譯自Jacek Schae的文章《A RealWorld Comparison of Front-End Frameworks 2020》，參考：https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1)