[譯]2020 年用各大前端框架構建的 RealWorld 應用對比

snowyYU發表於2020-04-04

[譯]2020 年用各大前端框架構建的 RealWorld 應用對比

來了來了,本篇寫於 2020 年,往年的版本請看這裡:201920182017

首先,請務必明白 —— 本篇不是告訴你應該選擇哪種作為你未來的前端框架,在此只簡短淺顯的對比三個方面:各 RealWorld 應用的效能,大小、程式碼行數。

請記住哦,好了,讓我們開始吧:

我們對比 RealWorld 應用 —— 相較“to do”型別的應用,它的功能更加強大。通常來說,“to-dos”並不能說明各框架在實際應用中的表現情況。

專案有一定的規範 —— 一個符合特定規則的專案 —— 相關規範在此。提供了後端 API,靜態 html 模版和樣式。

專案的構建和檢查都是由相關技術的大牛完成的 —— 一般來說,相關框架的技術大牛會構建並檢查自己 real-world 專案,確保其和別的專案的一致性。

我們正在比較哪些庫 / 框架?

截至撰寫本文時,RealWorld 倉庫 中已有 24 個相關實現。也許有受眾更多的框架沒有出現在這裡。但進行對比的前提只有一個 —— 它必須出現在 RealWorld 倉庫 頁面裡。

[譯]2020 年用各大前端框架構建的 RealWorld 應用對比

我們關注什麼指標?

效能 —— 此應用需要多長時間才能顯示內容並變得可用。

大小 —— 應用有多大的體積?我們只會比較編譯後的 JavaScript 檔案大小。HTML 和 CSS 對所有的 RealWorld 應用都是通用的,並且都可從 CDN 下載。此外,所有技術均可編譯或轉換為 JavaScript,綜上,我們只比較編譯後的 JavaScript 檔案大小。

程式碼行數 —— 開發者需要多少行程式碼才能根據規範建立 RealWorld 應用?公平來說,有些應用有更多的功能,但這應該沒啥大的影響。我們只看 src/ 資料夾中各檔案的程式碼行數。即使它是自動生成的也可以 —— 你仍需要持續維護它。


指標 #1:效能

我們使用 Chrome 的擴充外掛 Lighthouse Audit 來給各個專案的效能評分。Lighthouse 會給出一個範圍在 0 到 100 的分數。0 是最低分。想了解更多,請戳 Lighthouse 評分指南

外掛相關的配置

適用所有測試應用的 Lighthouse Audit 設定

基本原則

渲染的越快,使用者就能越早地使用該應用,同樣,使用者的體驗就越好。

效能(分數 0–100)—— 分數越高越好。

備註

注意:由於缺少 demo 應用,這裡忽略 PureScript。

總結

Lighthouse Audit 可沒閒著。您可以看到未維護/未更新的應用程式跌破了 90 分。得分超過 90 分的應用在效能上差別不大。不得不說,AppRun、Elm 和 Svelte 表現的非常出色。


指標 #2:大小

需要載入的資源的大小可以從 Chrome 中開發者工具的 Network 標籤中得出。伺服器提供的 GZIP 響應頭和響應主體。

這取決於框架的大小以及所新增的其他依賴包。同樣,構建合適的打包工具可以忽略未使用的依賴。

基本原則

檔案越小,下載速度越快,並且需要解析的內容越少。

載入資源的大小以 KB 為單位計算 —— 越小越好

備註

注意:由於缺少 demo 應用,這裡再次忽略 PureScript。

Angular + ngrx + nx 方案的支持者可別打我喲 —— 看一下 Chrome 開發者工具中的 Network 標籤裡的載入情況,如果我算錯了 — 還請告知。

Rust + Yew + WebAssembly 方案的大小計算,包括了以 .wasm 結尾的檔案。

總結

Svelte 和 Stencil 社群完成的 RealWorld 應用太棒了,把需要載入的檔案控制在了 20KB 以內,可以說是前無古人了。


指標 #3:程式碼行數

我們使用 cloc 計算每個庫的 src 資料夾中的程式碼行數。不包含空白行和註釋。考量這個指標的意義何在呢?

如果說除錯是消滅 bug 的過程, 那麼編碼則是產生它的過程 —— Edsger Dijkstra

基本原則

下面這張圖展示了各個庫/框架/語言實現的 RealWorld 應用的簡潔程度。根據規範,他們各自寫了多少行實現了幾乎相同的應用程式(其中一些應用具有更多的功能)。

# 程式碼行數 — 越少越好

備註

由於 cloc 無法統計以 .svelte 為字尾的檔案,因此 Svelte 在此不做對比。

由於 cloc 無法統計以 .riot 為字尾檔案,因此 riotjs-effector-universal-hot 在此也不做對比。

Angular + ngrx: 以/libs資料夾為基礎完成的程式碼行數統計僅包括以 .ts.html 為字尾檔案。如果你覺得不應該這樣統計, 還望告知正確的程式碼行數以及你是如何統計它的。

總結

只有 Imba 和 ClojureScript + re-frame 能在 1000 行程式碼以內實現 RealWorld 應用。Clojure 以獨特的表現力而著稱。Imba 第一次出現在這裡(去年是因為 cloc 還不能識別以 .imba 為字尾的檔案),看起來之後會一直出現在這裡。如果你關心自己專案的程式碼行數,那麼你現在知道該怎麼做啦。


最後

請記住,這並不是一個公平、合理的比較。有些在應用的實現上使用了程式碼拆分,有些則沒有。其中有些託管在 GitHub 上,有些託管在 Now 上,有些託管在 Netlify 上。你是否仍然想知道哪一個最好?這我可回答不了。


常見問題

#1 為什麼在本篇對比中不包含框架 X,Y 和 Z 呢?

因為以該框架為基礎構建的 RealWorld 應用尚未在 RealWorld 倉庫上出現或按照規範構建完成。考慮做出你的貢獻吧!選擇你喜歡的庫/框架然後來構建 RealWorld 應用吧,我們下次對比將包括它!

#2 為什麼你們稱其為 real world?

因為它不只是一個 To-Do 應用程式。通過 RealWorld 應用,我們並不是要比較相關技術能拿到的薪水,可維護性,生產力,學習曲線等方面。這有其他調查回答了其中一些問題。我們所說的 RealWorld 是指連線到伺服器,進行身份驗證並允許使用者進行 CRUD 操作的應用程式 —— 就像現實世界中的應用程式一樣。

#3 你為什麼不比較我最喜歡的框架?

請參見問題 1,但以防萬一,這裡還是想強調下:因為以該框架為基礎構建的 RealWorld 應用尚未在 RealWorld 倉庫上出現或按照規範構建完成。以上所有的 Real World 應用又不是我自己搞出來的-這是整個社群的努力結晶。如果你想在下次對比中看到你喜歡的框架,請考慮為本專案做出貢獻吧。

#4 包括了哪個版本的庫/框架?

所涉及的庫/框架在撰寫本文時(2020 年 3 月)均可用。該資訊來自 RealWorld 倉庫。我確定你可以在 GitHub 倉庫 中找到相關資訊。

#5 有比本文中出現的更流行的框架,你怎麼忘記比較啦?

同樣,請參閱問題 1 和問題 3。以該框架為基礎構建的 RealWorld 應用尚未在 RealWorld 倉庫 上出現或按照規範構建完成;原因就是這麼簡單。

如果你喜歡這篇文章,請 在Twitter上關注我。我只寫/推有關程式設計和技術的文章。

如果發現譯文存在錯誤或其他需要改進的地方,歡迎到 掘金翻譯計劃 對譯文進行修改並 PR,也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。


掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 AndroidiOS前端後端區塊鏈產品設計人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章