轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。
原文參考:https://www.sitepoint.com/most-popular-frontend-frameworks-compared/
當今湧出的大量框架讓人眼花繚亂不知如何選擇,今天將比較五個最流行的前端JavaScript框架,並作出概述,介紹其主要功能、工具、學習曲線及其他因素,幫助您做出衡量和選擇。
人氣衡量標準
據2020年JavaScript調查狀況通過框架使用情況確定框架流行程度。調查由23,765名受訪者完成,結果如下:
- React:80%
- Angular:56%
- Vue.js:49%
- Svelte:15%
- PreACT:13%
此外還考慮了同一項調查中的“框架意識”:
- React:100%
- Angular:100%
- Vue.js:99%
- Ember:88%
- Svelte:86%
前端框架的定義
出於本文的目的,文字將使用Martin Fowler提供的定義:
庫本質上是開發者可以呼叫的一組函式,通常組織成類。呼叫執行一些工作,並將控制權返回給客戶端。
框架體現抽象設計,內建更多行為,開發者通過子類化或插入自己的類將行為插入到框架中的不同位置使用,框架則呼叫這些點的程式碼。
1. React
由Facebook於2013年釋出,當今最流行的前端框架。應用於Facebook,Netflix和Airbnb等公司產品,擁有大量的開發人員和豐富的使用學習資源。
React相關工具很多,該團隊提供的CLI用於便捷搭建一個新專案,工具擴充套件適用於Chrome和Firefox的。包含很多第三方軟體包完成各種各樣的任務(例如,路由,處理表單和動畫),以及幾個基於React的框架,例如Next.js和Gatsby。
React奉行“一次學習,隨處編寫”的理念。它可用React Native來為移動應用程式提供動力,用 Node在伺服器上進行渲染,有出色的SEO支援。
主流思想認為React其太簡單:它僅與應用程式的檢視層有關,而其都交給了開發人員,對過高的自由度也褒貶不一。
如果進行學習,學習曲線適度。React鼓勵開發者使用各種函數語言程式設計範例(例如不變性和純函式),需要開發人員在進行構建前需要對基本概念有基本瞭解
總體來說,如果你對react的自由度滿意,那麼對於任何規模的資料驅動應用程式來說,都是佳選。
2. Angular
作為Google在前端框提供的產品,於10年以AngularJS(或Angular 1)的形式誕生,並立即受到熱捧,主要由於開發人員能夠構建現在稱為單頁應用程式的第一個框架。
為解決效能問題和構建大型JavaScript應用程式的挑戰,Google重寫了AngularJS,於16年釋出了Angular 2(如今僅是Angular)。因不能簡單遷移,因此AngularJS和Angular成為兩個獨立的框架。
Angular在前端框架佔據了重要地位,它經過嚴格測試已由Google和Microsoft等公司投入生產使用,相關線上資源也十分豐富。
不同於react僅處理檢視層,Angular提供了完整的解決方案構建單頁客戶端應用程式。Angular元件實現雙向資料繫結,用以偵聽事件並在父元件和子元件之間同時更新值。模板是HTML的一部分,允許使用特殊語法來利用Angular的許多功能。TypeScript是Angular開發的主要語言,因此該框架很適合企業及應用。
從相關工具的角度來說,Angular提供了高度完善的CLI來初始化,開發,構建和維護其應用程式,還有Chrome和Firefox Dev Tools擴充套件可用於除錯Angular應用程式。
但是從學習角度說,Angulard的學習曲線最為陡峭。開發者需熟悉TypeScript才能開展工作,對於新手而言並不是最佳選擇,更適合在團隊中發揮作用。
3. Vue.js
注:統計資料適用於Vue v2,版本3可用,須以安裝vue@next。
Vue是一個用於構建使用者介面和單頁應用程式的模型-檢視-檢視模型(MVVM)前端框架。由Evan You撰寫,並於2014年首次釋出。
Vue現已被阿里巴巴、Gitlab和Adobe等公司用於生產。可以稱它為所有框架中最好的文件,其論壇是獲得編碼問題幫助的絕佳資源。Vue在PHP界流行且是Laravel框架的一部分。
Vue的核心賣點是從頭開始設計,可逐步採用,即Vue可增強常規網頁功能或構件完善單頁應用,同時Anugular可基於HTML可將屬性繫結到基礎資料模型,提供單個檔案元件。
從相關工具的完整程度來講,一方面官方的CLI可以建立腳手架和開發Vue應用程式,此外devtools擴充套件可用於Chrome和Firefox來幫助除錯。不同於React,Vue提供了用於路由和狀態管理的官方程式包,提供了一種便捷標準化處理方式,同時各種第三方工具和基於Vue的框架。
但與其他框架相比入門門檻很低,適用於經驗不足的開發人員。
4. Svelte
由Rich Harris於16年釋出,作為前端框架新成員,採用不同於其他框架的方法來構建Web應用程式。
它避開虛擬DOM的概念,在構建期間將程式碼編譯到小型原始JavaScript模組中,開發者的應用程式狀態更改該模組隨之更新DOM。實現了體積小速度快的應用。
Rich Harris的學習曲線很低,但社群規模小,但是它已被IBM和《紐約時報》等公司用於生產,未來很有潛力。
由於其成熟度較低只作為小型專案優選,但情況逐漸改變。SvelteKit處於公開測試階段,社群正在不斷髮展壯大。儘管Svelte目前年幼,但開發者應該注意關注。
5. Ember.js
最後介紹的Ember,自前端框架問世就已經存在。在11年最初發布,但依舊在開發界流行:
它的歷史可以追溯到React,Vue,Svelte和其他所有公司之前。該框架從未出現在前端炒作的最前沿,但依舊穩步前進。合作物件包括Qonto和CLARK,是2020年歐洲前50大金融科技公司中的兩家。
Ember與Angular類似在應用程式開發中採用更多包含電池的方法,並提供構建現代前端JavaScript應用程式所需的一切。遵循六個星期的釋出週期且穩定性極好。
從相關工具講,相關工具眾多,從Ember CLI到Ember Inspector,還有許多可用的第三方庫。
其社群規模並不比其他流行框架社群,但它的成員參與度高,並且擁有論壇和Discord伺服器,尋求編碼問題的幫助很容易。
如果開發者要進行學習的話,學習曲線中等至陡峭,對於初學者或較小的專案,Ember可能不是最佳選擇。它具有許多活動部件,並且在組織事物時沒有提供很大的靈活性,合團隊工作的一部分。
結論
本文對當今市場上五個最受歡迎的前端框架進行了比較,為開發者按照個人能力和專案需求進行選擇時提供一個更好的參照。