0
作為一名前端開發(fā)人員，持續(xù)學(xué)習(xí)是必備的技能之一。隨著新技術(shù)的不斷涌現(xiàn)，前端開發(fā)框架越來越多，各種框架現(xiàn)、版本的更新此起彼伏。
前端領(lǐng)域的技術(shù)不斷更迭，讓人眼花繚亂。面對(duì)這么多框架，我們應(yīng)該如何選擇？為此，前端開發(fā)工程師 Jacek Schae 寫了一篇博文，對(duì)目前比較熱門的前端框架進(jìn)行了總結(jié)和測評(píng)。以下便是他的全文。
首先聲明，本文絕對(duì)不是一篇教你如何選擇下一個(gè)前端框架的文章。文章從性能、大小、非常相似的應(yīng)用程序的代碼行這三個(gè)方面進(jìn)行了比較。
考慮到這一點(diǎn)，以下是本文遵守的原則：
我們正在比較現(xiàn)實(shí)世界中的應(yīng)用程序，不僅僅是一個(gè)“待開發(fā)”的應(yīng)用程序。后者通常不能傳達(dá)足夠的知識(shí)和觀點(diǎn)來實(shí)際構(gòu)建應(yīng)用程序。
它在某種程度上是標(biāo)準(zhǔn)化的，符合特定規(guī)則的項(xiàng)目，有自己的規(guī)范，提供后端 API、靜態(tài)標(biāo)記和樣式。
由專家編寫或?qū)彶榈囊恢碌?、現(xiàn)實(shí)世界的項(xiàng)目。
我們?cè)诒容^哪些庫/框架？
在撰寫本文時(shí)，RealWorld repo 中有 24 個(gè)管道實(shí)現(xiàn)。關(guān)注者多少并不重要，只要它是出現(xiàn)在 RealWorld repo 頁面上就可以。
我們看什么指標(biāo)？
性能：此應(yīng)用程序需要多長時(shí)間才能顯示內(nèi)容并變得可用？
大小：應(yīng)用程序有多大？我們只比較編譯后的 JavaScript 文件的大小。HTML 和 CSS 對(duì)所有變體都是通用的，可以從 CDN（內(nèi)容交付網(wǎng)絡(luò)）下載。所有技術(shù)都編譯或轉(zhuǎn)換成 JavaScript，因此我們只調(diào)整這個(gè)文件的大小。
代碼行：作者需要多少行代碼來創(chuàng)建基于spec 的 RealWorld 應(yīng)用程序？公平地說，一些應(yīng)用程序有更多華麗的點(diǎn)綴，但它不應(yīng)該有重大影響。我們量化的唯一文件夾是每個(gè)應(yīng)用程序中的 src/。不管它是不是自動(dòng)生成的，你都需要維護(hù)它。
指標(biāo) 1：性能
我們將檢查與 Chrome 一起發(fā)布的 Lighthouse Audit 的性能分?jǐn)?shù)。Lighthouse 將返回一個(gè) 0 到 100 之間的性能分?jǐn)?shù)。0 是可能獲得的最低分?jǐn)?shù)。更多細(xì)節(jié)請(qǐng)查看 Lighthouse 評(píng)分指南。
測試設(shè)置
所有測試應(yīng)用的 Lighthouse 測試設(shè)置
理論基礎(chǔ)
內(nèi)容繪制越快，用戶就能更早開始做事情，使用這款應(yīng)用的體驗(yàn)就越好。
性能（評(píng)分 0-100 分，分?jǐn)?shù)越高越好）
注意：由于缺少演示應(yīng)用程序，PureScript 被跳過。
結(jié)論
Lighthouse Audit 不停止。你可以看到，今年沒有維護(hù)、更新的應(yīng)用程序正在跌落到 90 分以下。如果你的應(yīng)用程序得分大于 90，可能并不會(huì)有太大的不同。也就是說 AppRun、Elm、Svelte 真的令人印象深刻。
指標(biāo) 2：大小
傳輸大小來自 Chrome 網(wǎng)絡(luò)選項(xiàng)卡。GZIPed 響應(yīng)頭加上服務(wù)器傳遞的響應(yīng)體。
這里的表現(xiàn)取決于框架的大小以及添加的額外依賴項(xiàng)。另外，構(gòu)建工具如何從包中消除未使用的代碼也會(huì)有影響。
理論基礎(chǔ)
文件越小，下載越快，解析也越少。
、
傳輸大小（KB）越少越好
由于缺少演示應(yīng)用程序，PureScript 被跳過。
Angular+ngrx+nx：檢查 Chrome 開發(fā)工具網(wǎng)絡(luò)選項(xiàng)卡，如果我計(jì)算錯(cuò)誤，請(qǐng)告訴我。
Rust+Yew+WebAssembly 還包括 .wasm 文件
結(jié)論
Svelte 和 Stencil 社區(qū)的驚人工作，使它小于 20KB，這真的很了不起。
指標(biāo) 3：代碼行
使用 cloc，我們計(jì)算每個(gè) repo 的 src 文件夾中的代碼行數(shù)?？瞻仔泻妥⑨屝胁粚儆诖擞?jì)算的一部分。這么做到底有什么意義？
如果調(diào)試是消除軟件錯(cuò)誤的過程，那么編程必須是一個(gè)產(chǎn)生錯(cuò)誤的過程
——Edsger Dijkstra
理論基礎(chǔ)
這展示了給定的庫、框架、語言的簡潔性。根據(jù)規(guī)范，如果是你自己來寫，需要多少行代碼來實(shí)現(xiàn)幾乎相同的應(yīng)用程序？
代碼行，越少越好
Svelte 是在最初發(fā)布后添加的——多虧了 Svelte master。
由于 cloc 無法處理 .riot 文件，已跳過 riotjs-effector-universal-hot 。
Angular+ngrx:LoC 計(jì)算只使用 /libs 文件夾來完成，包括 .ts 和 .html 文件。如果你認(rèn)為這是錯(cuò)誤的，請(qǐng)告訴我你是如何計(jì)算的。
結(jié)論
只有帶 re frame 的 Imba 和 ClojureScript 才能在 1000LoC 下實(shí)現(xiàn)應(yīng)用。Clojure 以其非凡的表現(xiàn)力而聞名。而 Imba 是第一次出現(xiàn)在這里。如果你在乎 LoC，你知道該做什么。
總結(jié)
請(qǐng)記住，這并不是一個(gè)完全統(tǒng)一標(biāo)準(zhǔn)的比較。有些實(shí)現(xiàn)使用代碼拆分，有些則不使用，有些在 GitHub 托管，有些在 Now 托管，有些在 Netlify 托管。如果你想知道哪一個(gè)是最好，試著自己比較一下吧。
常見問題解答
1.為什么框架 X、Y 和 Z 不包括在這個(gè)比較中？
因?yàn)?RealWorld repo 沒有完成實(shí)現(xiàn)。在你最喜歡的庫/框架中實(shí)現(xiàn)該解決方案，我們下次將包括它！
2.你為什么稱之為 RealWorld？
因?yàn)樗粌H僅是一個(gè)待辦的應(yīng)用程序。在 RealWorld 中，我們并不是要比較工資、維護(hù)、生產(chǎn)率、學(xué)習(xí)曲線等。還有其他的調(diào)查可以回答這些問題。我們所說的 RealWorld 是指一個(gè)連接到服務(wù)器、驗(yàn)證并允許用戶 CRUD 的應(yīng)用程序，就像一個(gè)真實(shí)的應(yīng)用程序所做的那樣。
3.為什么沒有包括我最喜歡的框架？
請(qǐng)參閱上面的第一個(gè)問題：因?yàn)?RealWorld repo 沒有完成實(shí)現(xiàn)。這是社區(qū)努力的成果。如果你想在比較中看到你的框架，可以考慮貢獻(xiàn)。
4.這里面包含了哪個(gè)版本的庫/框架？
這里包含了 2020 年 3 月提供的版本，信息來自 RealWorld repo。你可以從 GitHub repo 中找到這一點(diǎn)。
5.為什么你忘了在比較中包含一個(gè)比這個(gè)更受歡迎的框架？
RealWorld repo 的實(shí)現(xiàn)并不完整，它很簡單。
via：https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1
雷鋒網(wǎng)雷鋒網(wǎng)雷鋒網(wǎng)
雷峰網(wǎng)版權(quán)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。
