在同一基準下對前端框架進行比較（2019年更新）

翻譯：瘋狂的技術宅

medium.freecodecamp.org/a-realworld…

這是咱們第三次用 Real World example apps 對前端框架進行比較。 RealWorld example apps 爲咱們提供：

RealWorld App

這不只僅是「todo」。一般「todo」並無傳達出在構建真正的程序時所需的足夠的知識和視角，。

標準化

一個符合某些規則的項目。提供後端API、靜態標記、樣式和規範。

由專家撰寫或審覈

一個一致的、真正的項目，在理想狀況下，由相關技術的專家創建或審查。

咱們比較哪些庫和框架？

截至撰稿時爲止，在 RealWorld example app 的 repo 已經中有18個 庫或框架的實現。

是否有大量的擁躉者並不重要。惟一要求是它是否出如今了 RealWorld 的代碼倉庫頁面上。

咱們關注那些指標？

表現

此程序須要多長時間才能顯示內容並變得可用？

大小

應用有多大？咱們只會比較已編譯的 JavaScript 文件的大小。 CSS 對全部變體都是通用的，並從 CDN（內容分發網絡）下載。 HTML 也適用於全部變體。全部技術都編譯或轉換爲 JavaScript，所以咱們只比較這種文件的大小。

代碼行數

做者根據規範建立 RealWorld app 須要多少行代碼？公平地說，一些程序過於花裏胡哨，但它不該該產生重大影響。咱們量化的惟一文件夾是每一個程序中的 src/。

度量標準 #1：性能

咱們將經過檢查 Chrome 附帶的 Lighthouse Audit 的效果得分。 Lighthouse 返回的性能分數在 0 到 100 之間，0 是低分。

審覈設置

測試用的全部 Lighthouse Audit 設置

效果是基於如下指標的綜合得分

• 第一個有內容的繪製
• 第一個有意義的繪製
• 速度指數
• 第一個 CPU 空閒
• 交互時間
• 估計的輸入延遲

有關詳細信息，請查看 Lighthouse評分指南。

簡述

越早進行繪製和工做，用戶的體驗就越好。

表現得分（0 -100）—— 越高越好

注意：因爲缺乏 Demo程序，所以跳過了 PureScript。

結論

大多數應用程序的得分都高於90，在性能方面，你可能感受不到太多的差別。

指標 #2：大小

傳輸大小來自 Chrome 的 network 標籤中。 GZIPped 響應頭加上服務器提供的響應主體。這取決於框架的大小和你添加的額外依賴項，以及構建工具如何消除捆綁包中未使用的代碼。

簡述

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

傳輸大小以KB爲單位 - 越少越好

結論

這裏發生了不少使人驚訝的事情。 Svelte —— 可以隱身的 UI 框架 —— 這是真正適用於它的妙語。 Stencil 這個基準測試中的新手也表現不錯。二者都相對較新，正在推進大小方面的限制。

指標 #3：代碼行數

咱們用了 cloc 計算每一個 repo 的 src 文件夾中的代碼行數。空行和註釋行不計入在內。

若是說調試是刪除軟件錯誤的過程，那麼編程必須是把它們加進去的過程  — Edsger Dijkstra

簡述

這顯示了給定庫、框架或語言的簡潔程度。根據規範，你須要多少行代碼才能實現幾乎相同的程序（其中一些會有更多的額外功能）。

#代碼行數 - 越少越好

注意 Imba：因爲 cloc 沒法處理 *.imba 文件而跳過了它。

注意 Elm：Elm 開發人員縱向的進行開發，所以代碼行數很高 —— 至少我被告知是這樣的 。

注意 Angular + ngrx：在 /libs 文件夾內完成的代碼行數計算，僅包括\*.ts 和 \*.html 文件。若是你以爲這是錯的，請告訴我正確的值是多少，以及你是如何計算的。

注意 Hyperapp：文章發佈時代碼行數不正確，感謝 Mateusz Kwasniewski 指出錯誤並提供了正確計算方法。

結論

使用 ClojureScript 的 re-frame 爲你提供了最佳效果。 Clojure 以其異常豐富的表現力而著稱。若是你對代碼行數很在乎，應該關注 ClojureScript、AppRun 和 Svelte。

總結

請記住，這不是一個針對同類產品比較。有些實現使用了代碼分割，有些則沒有。其中一些託管在 GitHub 上，一些託管在 Now，還有一些託管在 Netlify。你還想知道哪個是最好的嗎？最好的應該是可以知足你需求的那個！

**問：**你喜歡類型嗎？

**答：**要研究 Elm、PureScript 和 TypeScript 的話，請關注 Angular，AppRun，Dojo。

---

**問：**你寫一個佔用空間很是小的程序？

**答：**請關注 Svelte、Stencil 和 AppRun。

---

**問：**你想用有最少的代碼來進行維護嗎？

**答：**關注使用 ClojureScript 的 re-frame、AppRun 和 Svelte 。

---

**問：**想學習新東西嗎？

**答：**選擇一個你不知道的庫或框架！

常見問題

#1 爲何在這個比較中沒有框架 X、Y 和 Z ？

由於 RealWorld repo 沒有完成它的實現。你能夠考慮貢獻本身的代碼！用你喜歡的庫或框架中實施解決方案，下次咱們將會把它加進去！

#2 爲何稱它爲 real world ？

由於它比 To-Do 程序多一點。經過 RealWorld，並不意味着咱們會對薪水、維護、生產力、學習曲線等進行比較。其餘調查回答了其中一些的問題。咱們所說的 RealWorld 是一個鏈接到服務器，驗證並容許用戶進行 CRUD 操做的程序 —— 就像真實世界的程序同樣。

#3 爲何不包含我最喜歡的框架？

請參閱上面的#1，可是爲了以防萬一，再說一次：由於實現沒有在 RealWorld repo 中完成。我不作全部的實現 —— 這是社區的努力。若是想在比較中看到你的框架，請考慮參與。

#4 你用的是哪一個版本的庫或框架？

上線時可用的那個（2019年3月），我相信你能夠從 GitHub repo中找到相關的信息。

#5 爲何你忽略了一個更受歡迎的框架？

最後再說一次，請見上文。 RealWorld repo 的實施並未完成，就這麼簡單。

歡迎關注公衆號：前端先鋒，獲取更多前端乾貨。