2020年前端框架的比較
我們再做一次。 這是2020年，還有2019年，2018年和2017年。
首先讓我開始-絕對不是您應(yīng)該為前端選擇的比較。 它是對三個方面的比較小而相對簡單的：性能，大小和非常相似的應(yīng)用程序的代碼行。
考慮到這一點(diǎn)，它是如何工作的：
我們正在比較RealWorld應(yīng)用程序-不僅僅是"要做"的應(yīng)用程序。 通常，"待辦事項(xiàng)"沒有傳達(dá)足夠的知識和觀點(diǎn)來實(shí)際構(gòu)建實(shí)際的應(yīng)用程序。
它以某種方式標(biāo)準(zhǔn)化-一個符合某些規(guī)則的項(xiàng)目-有一個規(guī)范。 提供后端API，靜態(tài)標(biāo)記和樣式。
由專家撰寫或?qū)彶?一個一致的，真實(shí)世界的項(xiàng)目，理想情況下，該技術(shù)的專家應(yīng)建立或?qū)彶椤?/p>
我們正在比較哪些庫/框架？
在撰寫本文時(shí)，在RealWorld存儲庫中有24種Conduit實(shí)現(xiàn)。 是否有大量的追隨者都沒有關(guān)系。 唯一的條件是-它顯示在RealWorld回購頁面上。
我們看什么指標(biāo)？
性能-此應(yīng)用需要多長時(shí)間才能顯示內(nèi)容并變得可用？
大小-該應(yīng)用程序有多大？ 我們將只比較已編譯的JavaScript文件的大小。 HTML和CSS對所有變體都是通用的，并且是從CDN（內(nèi)容交付網(wǎng)絡(luò)）下載的。 所有技術(shù)都可以編譯或轉(zhuǎn)換為JavaScript，因此我們僅調(diào)整該文件的大小。
代碼行-作者需要多少行代碼才能基于規(guī)范創(chuàng)建RealWorld應(yīng)用程序？ 公平地講，某些應(yīng)用程序有很多麻煩，但應(yīng)該不會產(chǎn)生重大影響。 我們量化的唯一文件夾是每個應(yīng)用程序中的src /。 無論它是自動生成的，都沒關(guān)系-您仍然需要對其進(jìn)行維護(hù)。
指標(biāo)1：性能
我們將檢查Chrome隨附的Lighthouse Audit的性能得分。 Lighthouse返回的性能得分在0到100之間。0是最低的得分。 有關(guān)更多詳細(xì)信息，請參閱《燈塔計(jì)分指南》。
審核設(shè)置
Lighthouse Audit Settings for all tested apps
基本原理
繪畫得越早，某人可以做某事的越早，使用該應(yīng)用程序的人的體驗(yàn)就越好。
Performance (points 0–100) — higher is better.
備注
注意：由于缺少演示應(yīng)用程序，因此跳過了PureScript。
結(jié)論
Lighthouse Audit沒睡。 您可以在今年看到未維護(hù)/未更新的應(yīng)用程序跌破90懸崖。 如果您的應(yīng)用程序得分> 90，則可能不會有很大的不同。 也就是說，AppRun，Elm和Svelte確實(shí)令人印象深刻。
指標(biāo)2：大小
傳輸大小來自Chrome網(wǎng)絡(luò)標(biāo)簽。 服務(wù)器提供的GZIPped響應(yīng)標(biāo)頭以及響應(yīng)正文。
這取決于框架的大小以及所添加的任何其他依賴項(xiàng)。 同樣，構(gòu)建構(gòu)建工具可以很好地消除捆綁軟件中未使用的代碼。
基本原理
文件越小，下載速度越快，并且解析的次數(shù)也更少。
Transfer size in KB — fewer is better
備注
由于缺少演示應(yīng)用程序，因此跳過了PureScript。
Angular + ngrx + nx，請不要怪我Angular + ngrx + nx-檢查Chrome開發(fā)工具網(wǎng)絡(luò)標(biāo)簽，如果我算錯了，請告訴我。
Rust + Yew + WebAssembly還包括.wasm文件
結(jié)論
Svelte和Stencil社區(qū)所做的驚人工作將其壓縮到20KB以下，確實(shí)是一項(xiàng)成就。
指標(biāo)3：代碼行
使用cloc，我們可以計(jì)算每個存儲庫的src文件夾中的代碼行數(shù)。 空白行和注釋行不是此計(jì)算的一部分。 為什么這有意義？
如果調(diào)試是消除軟件錯誤的過程，則編程必須是將其放入其中的過程— Edsger Dijkstra
基本原理
這說明給定庫/框架/語言的簡潔程度。 根據(jù)規(guī)范，您需要多少行代碼才能實(shí)現(xiàn)幾乎相同的應(yīng)用程序（其中一些具有更多的功能）。
lines of code — fewer is better
備注
由于cloc無法處理.svelte文件，因此Svelte被跳過。
由于cloc無法處理.riot文件，因此跳過了riotjs-effector-universal-hot。
Angular + ngrx：使用/ libs文件夾完成的LoC計(jì)算僅包括.ts和.html文件。 如果您認(rèn)為這是錯誤的，請告訴我什么是正確的數(shù)字以及如何計(jì)算。
結(jié)論
只有具有重新構(gòu)架的Imba和ClojureScript才能在1000LoC下實(shí)施該應(yīng)用程序。 Clojure以異常表達(dá)而著稱。 Imba第一次出現(xiàn)在這里（去年是cloc，不知道.imba文件格式），看起來好像會保留下來。 如果您關(guān)心自己的LoC，那么您就會知道該怎么做。
常問問題
＃1為什么此比較中不包含框架X，Y和Z？
因?yàn)樵赗ealWorld倉庫中尚未完成實(shí)施。 考慮做出貢獻(xiàn)！ 在您喜歡的選擇的庫/框架中實(shí)施該解決方案，我們下次將包括它！
＃2您為什么稱其為現(xiàn)實(shí)世界？
因?yàn)樗恢皇且粋€待辦事項(xiàng)應(yīng)用程序。 在RealWorld中，我們并不是要比較薪水，維護(hù)，生產(chǎn)力，學(xué)習(xí)曲線等。還有其他一些調(diào)查可以回答其中的一些問題。 我們所說的RealWorld是一個連接到服務(wù)器，進(jìn)行身份驗(yàn)證并允許用戶CRUD的應(yīng)用程序，就像真實(shí)世界中的應(yīng)用程序一樣。
＃3您為什么不包括我最喜歡的框架？
請參見上面的＃1，但以防萬一，這里又來了：因?yàn)樵赗ealWorld存儲庫中該實(shí)現(xiàn)尚未完成。 我并沒有完成所有的實(shí)現(xiàn)-這是社區(qū)的努力。 如果您想在比較中看到您的框架，請考慮做出貢獻(xiàn)。
＃4您包括哪個版本的庫/框架？
在撰寫本文時(shí)（2020年3月）可用。 該信息來自RealWorld回購。 我確定您可以在GitHub存儲庫中找到此內(nèi)容。
＃5為什么您忘了包含一個比比較流行的框架？
同樣，請參閱＃1和＃3。 在RealWorld存儲庫中，該實(shí)現(xiàn)尚未完成； 就這么簡單。
如果您喜歡這篇文章，應(yīng)該在Twitter上關(guān)注我。 我只寫/推特有關(guān)編程和技術(shù)。
摘要
請記住，這并不是蘋果之間的比較。 有些實(shí)現(xiàn)使用代碼拆分，有些則沒有。 其中有些托管在GitHub上，有些托管在Now上，有些托管在Netlify上。 您是否仍然想知道哪一個最好？ 我把它留給你。
(本文翻譯自Jacek Schae的文章《A RealWorld Comparison of Front-End Frameworks 2020》，參考：https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1)
