Angular vs React 最全面深入對比

77rou發表於2017-05-02
AngularReact

如今，Angular和React這兩個JavaScript框架可謂紅的發紫，同時針對這兩個框架的選擇變成了當下最容易被問及或者被架構設計者考慮的問題，本文或許無法告訴你哪個框架更優秀，但儘量從更多的角度去比較兩者，儘可能的為你在選擇時提供更多的參考意見。

選擇的方法

在選擇之前，我們嘗試帶著一些問題去審視你將要選擇的框架（或者是任何工具），嘗試用這些問題的答案來幫助我們更加了解框架，也更加讓選擇變得更容易

框架本身的問題：

  • 是否成熟？誰在背後支援呢？
  • 具備的功能？
  • 採用什麼架構和模式？
  • 生態系統是否豐富？

需要自我反思的問題：

  • 我和我的團隊能否輕鬆學習並掌握？
  • 是否適合我的專案？
  • 開發體驗是否足夠好？

嚴格說來，Angular和React的比較是不公平的，因為Angular是一個功能豐富的框架，而React是一個UI的元件庫，所以我們在接下來的分析中會將一些經常和React在一起使用的類庫放在一起討論。

OK，開始… …


成熟度

作為一名成熟的開發人員或者是能夠決定架構及技術走向的人員，一項必備的技能就是能夠在工作和專案中平衡成熟技術與最前沿框架之間的關係，既能保持人員及技術的前進，又能保證專案或產品的交付質量，所以，必須小心以下可能的風險：

  • 該框架可能是不穩定的。
  • 主要的開發方（贊助方）可能會突然的放棄。
  • 如果你需要幫助，可能沒有大型知識庫或社群可用。

幸好，無論是Angular還是React，似乎都不需要擔心以上的風險

React

React由Facebook開發和維護，用於自己的產品，包括Instagram和WhatsApp。現在已經有大約三年半的時間。 它也是GitHub 最受歡迎的專案之一。

Angular

Angular由Google進行維護，並用於Google 的Adwords 和Fiber專案。既然AdWords是Goolge重要的吸金利器，自然Angular不太可能突然夭折。


功能

如前文提到的，Angular本身會比React自帶很多的功能，當然，更豐富的功能對於一個框架來說，是優點也有可能是缺點。兩個框架都具備一些相同的核心功能：元件化、資料繫結以及平臺無關的Render機制。

Angular

Angular除了提供一些需要最新瀏覽器支援的功能外，同時提供以下標準功能：

  • 依賴注入
  • 模板
  • 路由（@angular/router）
  • AJAX（@angular/http）
  • 表單（@angular/forms）
  • 元件化CSS封裝
  • XSS保護
  • 單元測試工具

功能豐富的好處就是你不需要額外費精力去挑選第三方的類庫，然而，這也同樣讓你沒得選擇，即使你並不需要這些功能（最新發布的Angular4貌似已經意識到了這個問題）

React

相對Angular，React本身提供的功能就相對“簡約“：

  • 無依賴注入
  • 使用JSX代替傳統的HTML Templates
  • XSS保護
  • 單元測試工具

相對Angular，React讓你有很大的自由度去挑選第三方的類庫，比如：

可以根據自己的需求很自由（或者定製）需要的類庫，同時這些第三方的類庫都是很容易學習的。


語言與模式

隨著兩個框架的流行，一些概念和技術也隨著浮出，如果想真正的用好或者說掌握這兩個框架，瞭解隨之而出的這些概念或者技術是非常必要的：

React

JSX

JSX是一個很有爭議的話題：有些人喜歡它，而其他人認為這是一個很大的退步。React決定使用一種類似XML的語言在元件中把標記和程式碼結合起來，直接在JavaScript程式碼中編寫HTML標記。

儘管混合標記與JavaScript的話題可能是有爭議的，但它具有無可爭議的優點：靜態分析。如果在JSX標記中發生錯誤，編譯器會立即報錯而不是留待執行時出現莫名其妙的問題。這有助於開發人員快速排查錯誤以及避免其它愚蠢的錯誤，比如拼寫錯誤。

Flow

Flow是由Facebook開發的JavaScript型別檢查工具。它可以解析程式碼並檢查常見的型別錯誤，如隱式轉換或取消引用。

與類似目的的TypeScript不同，它不需要開發人員遷移到新語言，併為你的程式碼註釋型別檢查工作。在流程中，型別註釋是可選的，可用於向分析器提供其他提示。如果你想使用靜態程式碼分析，同時避免重寫現有的程式碼，Flow是一個很好的選擇。

Redux

Redux是一個可以以清晰的方式管理狀態變化的庫。它的靈感來自Flux，但是有一些簡化。Redux的關鍵思想在於，應用程式的整個狀態由單個物件表示，該物件由名為reducers的函式進行突變。Reducers本身是純功能，與元件分開實現。這樣可以更好地分離問題和測試。

如果你正在開展一個簡單的專案，那麼引入Redux可能有點得不償失，但對於中等和大型專案來說，這是一個很好的選擇。

Angular

TypeScript

TypeScript是一種基於JavaScript開發並由Microsoft開發的新語言。它是JavaScript ES2015的超集，幷包含較新版本的語言的功能。你可以使用它而不是Babel來編寫最先進的JavaScript。它還可以通過使用註釋和型別推斷的組合來靜態分析你的程式碼。

還有一個更微妙的好處。TypeScript受到Java和.NET的嚴重影響，所以如果你的開發人員有這些語言之一的背景知識，他們可能會比簡單的JavaScript更容易找到TypeScript（請注意我們如何從工具切換到你的個人環境）。 雖然Angular是第一個積極採用TypeScript的主要框架，但它也可以與React一起使用。

RxJS

RxJS是一個響應式程式設計庫，可以靈活地處理非同步操作和事件。它是將Observer和Iterator模式與功能程式設計相結合的組合。RxJS允許您將任何東西視為連續的流，並對其進行各種操作，例如對映，過濾，拆分或合併。

該類庫已被Angular採用其HTTP模組以及一些內部使用。當您執行HTTP請求時，它返回一個Observable，而不是通常的Promise。 雖然這個類庫非常強大，但也很複雜。要掌握它，您將需要了解不同型別的“可觀察”，“主題”以及大約一百種方法和操作符 。

當您使用連續資料流（如Web套接字）工作很多的情況下，RxJS非常有用，但是對於其他任何東西來說似乎過於複雜。 無論如何，當你使用Angular時，您至少應該瞭解RxJS的基本知識。

 

TypeScript可以說是Angular中非常重要的特點，首先他給原本C#/Java開發人員提供了很容易進入前端的機會，另外TypeScript也想比JavaScript更容易理解，尤其是程式碼量或者業務複雜的專案中。


生態系統

開源框架這麼流行的原因之一，就是圍繞著他們，會有無數的工具、類庫、擴充套件來支撐整個框架，有時，這些工具可能比框架本身更有幫助，接下來我們就來看看相關這兩個框架最流行的工具和類庫。

Angular

Angular CLI

現代框架的流行趨勢是使用CLI工具，可以幫助您引導專案，而無需自行配置構建。Angular有Angular CLI。它允許您僅使用幾個命令來生成和執行專案。負責構建應用程式的所有指令碼，啟動開發伺服器和執行測試都會在node_modules中隱藏。您也可以在開發過程中使用它來生成新的程式碼。這使得新專案的設定變得輕而易舉。

Ionic 2

Ionic 2 是開發混合移動應用程式的流行框架的新版本。它提供了一個與Angular 2完美整合的Cordova容器，以及一個漂亮的材料元件庫。 使用它，您可以輕鬆地設定和構建移動應用程式。 如果您喜歡使用混合應用程式，那麼這是一個不錯的選擇。

Material design components

如果您熱衷於設計Material，您會很高興聽到Angular有一個Material元件庫。

Angular universal

Angular universal是一個種子專案，可用於建立支援伺服器端渲染的專案。

@ngrx/store

@ngrx/store是由Redux啟發的Angular的狀態管理庫，基於由pure reducer進行突變的狀態。它與RxJS的整合允許您利用推送更改檢測策略獲得更好的效能。

關於更多的有關Angular相關類庫和工具可以參考：the Awesome Angular list

React

Create React App

Create-react-app 是一個CLI工具，用於快速建立新的React應用。可以生成一個新的工程，啟動開發伺服器並建立繫結。Jest（來自Facebook的一個單元測試工具）也同時整合在Create-react-app內部，更方便的讓我們進行單元測試。

React Native

React Native 是Facebook開發的基於React在移動端的開發平臺，藉助此平臺，React可以建立真正的Native的UI。提供了一系列標準的React元件用於繫結。同時允許建立自己的元件並與Objective-C、Java或者Swift的程式碼進行繫結。

Material UI

還有一個可用於React的Material Design Component。與Angular的版本相比，這個版本比較成熟，可以使用更廣泛的元件。

Next.js

Next.js 是React應用程式的伺服器端呈現的框架。它提供了一種在伺服器上完全或部分呈現應用程式的靈活方式，將結果返回給客戶端並在瀏覽器中繼續。它試圖使建立通用應用程式的複雜任務儘可能簡單，所以設定被設計為儘可能簡單，最少量的新原語和對專案結構的要求。

MobX

MobX 是用於管理應用程式狀態的替代庫。不像Redux那樣將狀態儲存在一個不可變的儲存中，它鼓勵您僅儲存最低限度的必需狀態，並從其中獲取剩餘的資料。它提供了一組裝飾器來定義可觀察和觀察者，並將反應邏輯引入到你的狀態管理程式碼中。

Storybook

Storybook是React的元件開發環境。它允許您快速設定單獨的應用程式來顯示您的元件。除此之外，它提供了許多附加元件來記錄，開發，測試和設計您的元件。

同樣的，可以從Awesome React list瞭解更多的工具和類庫。


學習曲線與開發體驗

選擇新技術的一個重要標準是學習它是否容易。當然，答案取決於廣泛的因素，例如您以前的經驗和對相關概念和模式的普遍瞭解。如果我們假設你已經知道ES6 +，構建工具和所有這些，我們來看看你還需要了解什麼。

React

有了React，你會遇到的第一件事就是JSX。對於一些開發人員來說似乎剛開始會覺得很彆扭，但它並沒有增加複雜性; 只是表示式，實際上還是JavaScript，還有一個特殊的類似HTML的語法。您還需要學習如何編寫元件，使用props進行配置和管理內部狀態。不需要學習任何新的邏輯結構或迴圈，因為所有這些都是純JavaScript。

官方教程是開始學習React的好地方。一旦完成了官方教程，接下來應該熟悉並掌握React的路由機制 。React Router v4版本可能稍微複雜和非常規，但也不許太過擔心。

使用Redux將需要一個正規化的轉變，免費入門Redux視訊課程可以快速介紹核心概念。根據專案的大小和複雜性，找到並學習一些額外的庫，這可能是棘手的一部分，但之後，一切都應該變得順利。

其實，React的上手非常容易，最難的部分可能是如何挑選合適你專案或產品的類庫。

Angular

Angular將向您介紹比React更多的新概念。首先，您需要使用TypeScript。對於具有靜態型別語言（如Java或.NET）經驗的開發人員，這可能比JavaScript更容易理解，但對於純JavaScript開發人員，這可能需要一些額外的學習。

框架本身豐富的技術主題可以從諸如模組，依賴注入、裝飾器、元件、服務、管道、模板和指令等基礎開始，到更高階的主題，如更改檢測，區域，AoT編譯和RxJS。這些都在文件中。RxJS是一個很重的話題，在官方網站上有詳細描述。雖然在基本功能層面上使用起來相對容易，但在轉到高階應用時會變得更加複雜。

總而言之，我們注意到Angular的進入壁壘高於React。新概念的數量絕對令新來者感到困惑。又是碰到一些問題還不得不Google後才能找到答案，但是，就像之前說的，是否合適，還是取決於更多的因素。


前景

Angular

就在2017年的3月，Angular已經發布了4.0的版本（相容2.x版本），關於為什麼是4.0，官方的解釋是因為Router這個主要核心元件的版本已經是4.0.0，如果Angular還用3.0會引起混淆，如下圖：

 

4.0版本中主要是大幅度的減小了程式碼體積（60%），同時提高了載入的速度（肉眼可查的程度），同時報錯的資訊更清晰了。根據官方的文件，Angular的版本升級會以比較快的速度進行迭代

 

無論是大版本的6個月迭代，還是每週的hotfix，能看出Angular團隊想用快速升級的策略迅速佔領市場。

React

反觀React的升級倒是非常謹慎的，這從最新的v15.5.0的釋出新聞部落格中就能看出

不過，從部落格中能看到React即將迎來v16，不知道整個重寫的React會給我們帶來什麼驚喜。不過，需要提一下的是Facebook已經與去年底的時候釋出了React VR，有興趣的同學可以圍觀以下。


契合度

無論是哪個框架，適合自己的才是“好“的，所以需要你從專案（產品）本身的角度去衡量，以下的問題列表可能並不全面，但至少可以作為一個開始

  • 該專案（產品）有多大規模？
  • 要維護多久？
  • 所有的功能是提前清楚地定義還是靈活的改變？
  • 域模型和業務邏輯是否複雜？
  • 你定位什麼平臺？ Web，手機，桌面？
  • 你需要伺服器端渲染嗎？ SEO重要嗎？
  • 你會處理很多實時事件流？
  • 你的團隊有多大？
  • 你的開發人員有多豐富，他們的背景是什麼？
  • 是否有任何您想要使用的現成的元件庫？

如果您正在開展一個大型專案，並希望儘可能減少錯誤選擇的風險，請考慮先建立一個demo用於驗證產品概念。選擇專案的一些主要功能，並嘗試使用其中一個框架以簡單的方式實現它們。 Demo通常不會（也不應該）花費很多時間，但會提供一些寶貴的經驗，可以幫助您驗證關鍵的技術要求。如果對結果感到滿意，可以繼續全面構建。如果沒有，會給你充分的時間重新選擇。在專案發開過程中，你還可以藉助一些支援Angular和React的開發工具來提高開發效率，如Wijmo，這是一款為企業應用程式開發而推出的一系列包含 HTML5 和 JavaScript 的開發控制元件集。無論你的應用程式是移動端、PC端、還是必須要支援IE6，Wijmo Enterprise 均能滿足需求。


總結

通過以上的6個方面對比了React和Angular這兩個目前最熱的前端框架，希望能對你在選擇時提供一些參考。但是否真的是合適自己的，或許真的需要用過才知道  Good luck~~~
原文連結：https://www.sitepoint.com/react-vs-angular/

轉載請註明出自：葡萄城控制元件

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-2138281/，如需轉載，請註明出處，否則將追究法律責任。

相關文章