詳解 2020前端三大框架 Angular, React, Vue 該選哪個


詳解 2020前端三大框架 Angular, React, Vue 該選哪個

Angular VS Vue VS React

就在幾年前,前端開發人員主要討論是否應該在項目中使用Angular 還是 React。但在這兩年,Vue的使用量增長迅速,尤其是國內。

對於初入行的前端開發人員,或者是希望能夠判斷未來發展趨向的開發人員,希望本篇文章能夠對你有所幫助。

接下來,本文將從幾個維度對著三個框架進行對比。

Angular,React,Vue的發展歷史

  • Angular
詳解 2020前端三大框架 Angular, React, Vue 該選哪個

Angular

由谷歌開發的Angular於2010年首次發佈,成為其中最古老的一款。它是一個基於TypeScript的JavaScript框架。2016年,Angular2的發佈發生了重大變化(並從最初的名稱AngularJS中刪除了“JS”)。Angular2+被稱為Angular。最新的穩定版本是Angular9,於2020年2月發佈。

  • React
詳解 2020前端三大框架 Angular, React, Vue 該選哪個

React

React由Facebook開發,最初於2013年發佈。Facebook在其產品(Facebook、Instagram和WhatsApp)中廣泛使用React。目前的穩定版本是16.X,發佈於2018年11月(此後有較小的增量更新)。

  • Vue
詳解 2020前端三大框架 Angular, React, Vue 該選哪個

Vue

Vue,又稱Vue.js,是該組織最年輕的成員。它是由前谷歌員工Evan You 尤雨溪在2014年開發的。在過去的三年裡,儘管Vue沒有大公司的支持,但它的人氣卻發生了巨大的變化。目前的穩定版本是2.6,於2019年2月發佈(此後有一些小的增量發佈)。Vue的貢獻者得到了Patreon的支持。目前處於alpha階段的Vue 3計劃轉移到TypeScript。


詳解 2020前端三大框架 Angular, React, Vue 該選哪個

歷史對比

受歡迎度

衡量受歡迎度的一個相對客觀的數據是GitHub的星標數量。

2016年中,Vue的星標數量發生較大的變化,有了大幅的增長。最近,Vue已經成為最受歡迎的框架之一。


詳解 2020前端三大框架 Angular, React, Vue 該選哪個

星標數量對比

可以看到Vue目前處於領先地位,React稍稍落後,然後Angular的受歡迎度就相對比較低一些了。

社區發展

對於Open Source的項目來講, 社區的活躍度是一個很重要的衡量指標。在過去的一年中,這三個前端框架都定期發佈增量版本。

我們看一下在GitHub上的詳細統計信息。

詳解 2020前端三大框架 Angular, React, Vue 該選哪個

社區

Vue有大量的觀察者,星標和Fork。這顯示了它在用戶中的受歡迎程度以及在比較Vue與React時的價值。然而,Vue的貢獻者數量低於Angular和React。

一種可能的解釋是,Vue完全由開源社區驅動,而Angular和React在谷歌和Facebook員工中佔有相當大的份額。

最近看了Vue創建者Evan You尤雨溪的專訪。最初,Vue只是Evan在業餘時間進行開發的,後來才全職從事Vue的開發和發展。相比另兩家背後都有巨頭支撐。Vue的支持力量相對薄弱一下。

不過在Evan You的專訪中,我看到了國內阿里和百度對Vue的支持。尤其是阿里的支持很重要,阿里是國內互聯網技術發展的風向標。所以其實Vue的社區裡面,國內給的星標是很多的。

版本升級和兼容性

選擇一個框架,尤其是對於大型應用來講,框架的版本升級和兼容性是一個重要的考量因素。

Angular計劃每六個月更新一次版本。在任何主要的api被棄用之前還有六個月的時間,這給了用戶兩個發佈週期(一年)的時間來進行必要的更改(如果有的話)。

Facebook曾表示,穩定對他們來說至關重要。通過版本升級通常是React中最容易的,React codemod等腳本可以幫助遷移。

在Vue的FAQ中,Vue提到,如果從1.x遷移到2,則90%的API是相同的。控制檯上有一個遷移幫助工具,可用於評估應用程序的狀態。

包的大小

包的大小決定了在頁面上這三個框架的加載時間。

這三個框架的包的大小分別為:

  • Angular 4+: 取決於Bundle size
  • React: 116 KB
  • Vue: 91 KB

儘管框架的大小不一樣,但與平均網頁大小相比,它們仍然很小。此外,如果使用CDN加載這些庫,則用戶很可能已經在其本地系統中加載了庫。

所以在包的大小的比較上差別不大。

組件

這三個框架都支持組件,組件的使用使得代碼重用變得很容易。

  • Angular

在Angular中,組件被稱為directives。Angular也可以跟蹤和附加特定的行為。因此,Angular將組件的UI部分作為HTML標記的屬性進行分離,並將它們的行為以JavaScript代碼的形式進行分離。

  • React

React則將UI和行為組合起來成為組件。在React中,組件代碼負責創建UI元素幷包括其行為。

  • Vue

在Vue中,組件的方式和React相似。此外,Vue是高度可定製的,它允許您從腳本中組合組件的UI和行為。此外,您還可以在Vue中使用預處理器。

學習曲線

  • Angular

Angular的學習曲線相當陡峭,應該說是這三個框架裡比較難的。考慮到Angular是一個完整的解決方案,掌握Angular需要學習相關的概念,如TypeScript和MVC。儘管需要時間,但從理解前端工作原理的角度來看,投資是有回報的。看起來,國內目前使用Angular的並不多。

  • React

React提供了一個入門指南,文檔是也比較完整。

不過React的高級功能需要使用第三方庫。這使得核心框架的學習曲線不是那麼陡峭,而是取決於使用附加功能的路徑。

  • Vue

Vue提供了更高的可定製性,因此比Angular或React更容易學習。此外,Vue的一些理念是從Angular和React來的。

因此,從兩者中的任何一個過渡到Vue都是一個簡單的選擇。然而,Vue的簡單性和靈活性是一把雙刃劍,使調試和測試變得困難。

Angular, React, Vue, 到底該選哪個?

  • Angular

Angular是最成熟的框架,在貢獻者方面有很好的支持,是一個完整的包。

然而,學習曲線是陡峭的,對於新人來說,有很大的挑戰。

對於擁有大型團隊的公司和已經使用TypeScript的開發人員來說,Angular是一個不錯的選擇。

  • React

React已經足夠成熟了,並且有來自社區的大量貢獻。它得到了廣泛的接受。React的就業市場非常好。

React對於那些開始使用前端JavaScript框架的人、初創公司和喜歡一些靈活性的開發人員來說是個不錯的選擇。與其他框架無縫集成的能力為那些希望代碼具有一定靈活性的人提供了極大的優勢。

  • Vue

Vue目前沒有大公司的支持,我剛剛又看了一下Vue的官網,從Sponsor裡面沒有發現像Google, Facebook這樣的巨型公司。

然而,在過去的幾年裡,Vue的發展勢頭非常好,尤其是國內。像阿里巴巴和百度等國巨頭選擇Vue作為其主要的前端JavaScript框架。

選擇哪種框架沒有覺得的正確,適合自己公司實際情況的就是最好的選擇。


分享到:


相關文章: