2020排行榜！Realworld前端框架的比較
本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)
過去的三年我們都探討了這個(gè)話題，那么今年的情況會(huì)是怎樣呢?
首先聲明，此文并不是關(guān)于未來前端選擇的比較，而是從三個(gè)方面(性能，大小，相似應(yīng)用下的代碼行數(shù))來進(jìn)行小范圍的簡(jiǎn)單比較。
讀者需要注意:
- 本文是在比較Realworld軟件——而不是正在研發(fā)中的軟件，這些軟件通常缺乏足夠的知識(shí)和想法，因此難以實(shí)現(xiàn)。
- 由專家撰寫或評(píng)審過——理想情況下，該技術(shù)領(lǐng)域的專家會(huì)評(píng)估此項(xiàng)目。
- 以某種方式標(biāo)準(zhǔn)化—— 一個(gè)符合特定規(guī)則的項(xiàng)目存在一種規(guī)范，提供后端API，靜態(tài)標(biāo)記和樣式。
正在比較哪些庫(kù)/框架?
撰寫此文時(shí)，Realworld存儲(chǔ)庫(kù)中有24種conduit實(shí)現(xiàn)As，它們之間的從屬地位并不重要，唯一的判定標(biāo)準(zhǔn)是看它是否出現(xiàn)在RealWorld repo page上。
關(guān)注的是什么指標(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)整該文件的大小。
代碼行數(shù)—需要多少行代碼才能基于規(guī)范創(chuàng)建RealWorld應(yīng)用程序?某些應(yīng)用程序很麻煩，但應(yīng)該不會(huì)產(chǎn)生重大影響。我們量化的唯一文件夾是每個(gè)應(yīng)用程序中的src /。無論它是否是自動(dòng)生成的，你仍然需要對(duì)其進(jìn)行維護(hù)。
標(biāo)準(zhǔn)#1: 性能
我們通過Chrome隨附的Lighthouse Audit查看性能得分，得分在0到100之間。有關(guān)更多詳細(xì)信息，請(qǐng)參閱《Lighthouse計(jì)分指南》。
審查設(shè)置
所有經(jīng)過測(cè)試的應(yīng)用程序的Lighthouse審核設(shè)置
基本原理
越早開發(fā)的應(yīng)用程序，人們?cè)皆玳_始使用，用戶體驗(yàn)相對(duì)也更好。
性能得分 (0–100) — 越高越好
評(píng)論
注意: 由于缺少演示應(yīng)用程序，因此跳過了PureScript。
總結(jié)
通過Lighthouse Aud，可以看到在今年未維護(hù)/未更新的應(yīng)用程序跌破90關(guān)口。當(dāng)然如果得分> 90，可能也不會(huì)有很大的不同。AppRun，Elm和Svelte的表現(xiàn)令人印象深刻。
標(biāo)準(zhǔn)#2: 大小
傳輸大小取決于Chrome網(wǎng)絡(luò)標(biāo)簽，服務(wù)器提供的GZIPped響應(yīng)標(biāo)頭以及正文。
這取決于框架的大小以及所添加的任何其他依賴項(xiàng)。同樣，構(gòu)建工具可以很好地清除捆綁軟件中未使用的代碼。文件越小，下載速度越快，解析的次數(shù)也更少。
文件大小：KB — 文件越小，傳輸越快
評(píng)論
由于缺少演示軟件，因此跳過了PureScript。Angular + ngrx + nx，請(qǐng)不要怪我用Angular + ngrx + nx-檢查Chrome開發(fā)工具網(wǎng)絡(luò)標(biāo)簽，如果有計(jì)算錯(cuò)誤的地方，評(píng)論區(qū)見。
Rust +Yew + WebAssembly 包括 also.wasm file(s)
總結(jié)
Svelte和Stencil社區(qū)將其壓縮到20KB以下的出色操作，確實(shí)是一項(xiàng)成就。
標(biāo)準(zhǔn) #3: 代碼行數(shù)
cloc可以計(jì)算每個(gè)存儲(chǔ)庫(kù)src文件夾中的代碼行數(shù)，空白行和注釋行不算在內(nèi)，意義何在?
如果調(diào)試程序是移除軟件缺陷的過程，那么編寫程序就是把軟件缺陷放進(jìn)來的過程— EdsgerDijkstra
基本原理
這說明給定庫(kù)/框架/語(yǔ)言的簡(jiǎn)潔程度。根據(jù)規(guī)范，你需要多少行代碼才能實(shí)現(xiàn)功能基本相同的應(yīng)用程序(其中一些具有更多的功能)。
# 代碼行數(shù)— 越少越好
評(píng)論
由于cloc無法處理.svelte文件，因此跳過了Svelte。
由于cloc無法處理.riot文件，因此跳過了riotjs-effector-universal-hot。
Angular+ ngrx：使用/ libs文件夾完成的LoC計(jì)算僅包括.ts和.html文件。你的看法是什么呢?歡迎探討。
總結(jié)
只有重新構(gòu)架的Imba和ClojureScript才能在1000LoC下實(shí)施該應(yīng)用程序。Clojure以異常表達(dá)而著稱。Imba第一次出現(xiàn)在這個(gè)行列里(去年是cloc，沒有.imba文件格式)，并且看起來會(huì)繼續(xù)存在。如果您在意LoC，您就會(huì)知道該怎么做。
