本文來(lái)自于：葡萄城控件技術(shù)團(tuán)隊(duì)博客

如今，Angular和React這兩個(gè)JavaScript框架可謂紅的發(fā)紫，同時(shí)針對(duì)這兩個(gè)框架的選擇變成了當(dāng)下最容易被問及或者被架構(gòu)設(shè)計(jì)者考慮的問題，本文或許無(wú)法告訴你哪個(gè)框架更優(yōu)秀，但盡量從更多的角度去比較兩者，盡可能的為你在選擇時(shí)提供更多的參考意見。

選擇的方法

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

框架本身的問題：

? 是否成熟？誰(shuí)在背后支持呢？

? 具備的功能？

? 采用什么架構(gòu)和模式？

? 生態(tài)系統(tǒng)是否豐富？

需要自我反思的問題：

? 我和我的團(tuán)隊(duì)能否輕松學(xué)習(xí)并掌握？

? 是否適合我的項(xiàng)目？

? 開發(fā)體驗(yàn)是否足夠好？

嚴(yán)格說來(lái)，Angular和React的比較是不公平的，因?yàn)锳ngular是一個(gè)功能豐富的框架，而React是一個(gè)UI的組件庫(kù)，所以我們?cè)诮酉聛?lái)的分析中會(huì)將一些經(jīng)常和React在一起使用的類庫(kù)放在一起討論。

OK，開始… …

成熟度

作為一名成熟的開發(fā)人員或者是能夠決定架構(gòu)及技術(shù)走向的人員，一項(xiàng)必備的技能就是能夠在工作和項(xiàng)目中平衡成熟技術(shù)與最前沿框架之間的關(guān)系，既能保持人員及技術(shù)的前進(jìn)，又能保證項(xiàng)目或產(chǎn)品的交付質(zhì)量，所以，必須小心以下可能的風(fēng)險(xiǎn)：

? 該框架可能是不穩(wěn)定的。

? 主要的開發(fā)方（贊助方）可能會(huì)突然的放棄。

? 如果你需要幫助，可能沒有大型知識(shí)庫(kù)或社區(qū)可用。

幸好，無(wú)論是Angular還是React，似乎都不需要擔(dān)心以上的風(fēng)險(xiǎn)

React

React由Facebook開發(fā)和維護(hù)，用于自己的產(chǎn)品，包括Instagram和WhatsApp?，F(xiàn)在已經(jīng)有大約三年半的時(shí)間。 它也是GitHub 最受歡迎的項(xiàng)目之一。

Angular

Angular由Google進(jìn)行維護(hù)，并用于Google 的Adwords 和Fiber項(xiàng)目。既然AdWords是Goolge重要的吸金利器，自然Angular不太可能突然夭折。

功能

如前文提到的，Angular本身會(huì)比React自帶很多的功能，當(dāng)然，更豐富的功能對(duì)于一個(gè)框架來(lái)說，是優(yōu)點(diǎn)也有可能是缺點(diǎn)。兩個(gè)框架都具備一些相同的核心功能：組件化、數(shù)據(jù)綁定以及平臺(tái)無(wú)關(guān)的Render機(jī)制。

Angular

Angular除了提供一些需要最新瀏覽器支持的功能外，同時(shí)提供以下標(biāo)準(zhǔn)功能：

? 依賴注入?

? 模板

? 路由（@angular/router）

? AJAX（@angular/http）

? 表單（@angular/forms）

? 組件化CSS封裝

? XSS保護(hù)

? 單元測(cè)試工具

功能豐富的好處就是你不需要額外費(fèi)精力去挑選第三方的類庫(kù)，然而，這也同樣讓你沒得選擇，即使你并不需要這些功能（最新發(fā)布的Angular4貌似已經(jīng)意識(shí)到了這個(gè)問題）

React

相對(duì)Angular，React本身提供的功能就相對(duì)“簡(jiǎn)約“：

? 無(wú)依賴注入

? 使用JSX代替?zhèn)鹘y(tǒng)的HTML Templates

? XSS保護(hù)

? 單元測(cè)試工具

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

? 路由

? AJAX

? 各種CSS封裝

? 更強(qiáng)大的單元測(cè)試

可以根據(jù)自己的需求很自由（或者定制）需要的類庫(kù)，同時(shí)這些第三方的類庫(kù)都是很容易學(xué)習(xí)的。

語(yǔ)言與模式

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

React

JSX

JSX是一個(gè)很有爭(zhēng)議的話題：有些人喜歡它，而其他人認(rèn)為這是一個(gè)很大的退步。React決定使用一種類似XML的語(yǔ)言在組件中把標(biāo)記和代碼結(jié)合起來(lái)，直接在JavaScript代碼中編寫HTML標(biāo)記。

盡管混合標(biāo)記與JavaScript的話題可能是有爭(zhēng)議的，但它具有無(wú)可爭(zhēng)議的優(yōu)點(diǎn)：靜態(tài)分析。如果在JSX標(biāo)記中發(fā)生錯(cuò)誤，編譯器會(huì)立即報(bào)錯(cuò)而不是留待運(yùn)行時(shí)出現(xiàn)莫名其妙的問題。這有助于開發(fā)人員快速排查錯(cuò)誤以及避免其它愚蠢的錯(cuò)誤，比如拼寫錯(cuò)誤。

Flow

Flow是由Facebook開發(fā)的JavaScript類型檢查工具。它可以解析代碼并檢查常見的類型錯(cuò)誤，如隱式轉(zhuǎn)換或取消引用。

與類似目的的TypeScript不同，它不需要開發(fā)人員遷移到新語(yǔ)言，并為你的代碼注釋類型檢查工作。在流程中，類型注釋是可選的，可用于向分析器提供其他提示。如果你想使用靜態(tài)代碼分析，同時(shí)避免重寫現(xiàn)有的代碼，F(xiàn)low是一個(gè)很好的選擇。

Redux

Redux是一個(gè)可以以清晰的方式管理狀態(tài)變化的庫(kù)。它的靈感來(lái)自Flux，但是有一些簡(jiǎn)化。Redux的關(guān)鍵思想在于，應(yīng)用程序的整個(gè)狀態(tài)由單個(gè)對(duì)象表示，該對(duì)象由名為reducers的函數(shù)進(jìn)行突變。Reducers本身是純功能，與組件分開實(shí)現(xiàn)。這樣可以更好地分離問題和測(cè)試。

如果你正在開展一個(gè)簡(jiǎn)單的項(xiàng)目，那么引入Redux可能有點(diǎn)得不償失，但對(duì)于中等和大型項(xiàng)目來(lái)說，這是一個(gè)很好的選擇。

Angular

TypeScript

TypeScript是一種基于JavaScript開發(fā)并由Microsoft開發(fā)的新語(yǔ)言。它是JavaScript ES2015的超集，并包含較新版本的語(yǔ)言的功能。你可以使用它而不是Babel來(lái)編寫最先進(jìn)的JavaScript。它還可以通過使用注釋和類型推斷的組合來(lái)靜態(tài)分析你的代碼。

還有一個(gè)更微妙的好處。TypeScript受到Java和.NET的嚴(yán)重影響，所以如果你的開發(fā)人員有這些語(yǔ)言之一的背景知識(shí)，他們可能會(huì)比簡(jiǎn)單的JavaScript更容易找到TypeScript（請(qǐng)注意我們?nèi)绾螐墓ぞ咔袚Q到你的個(gè)人環(huán)境）。 雖然Angular是第一個(gè)積極采用TypeScript的主要框架，但它也可以與React一起使用。

RxJS

RxJS是一個(gè)響應(yīng)式編程庫(kù)，可以靈活地處理異步操作和事件。它是將Observer和Iterator模式與功能編程相結(jié)合的組合。RxJS允許您將任何東西視為連續(xù)的流，并對(duì)其進(jìn)行各種操作，例如映射，過濾，拆分或合并。

該類庫(kù)已被Angular采用其HTTP模塊以及一些內(nèi)部使用。當(dāng)您執(zhí)行HTTP請(qǐng)求時(shí)，它返回一個(gè)Observable，而不是通常的Promise。 雖然這個(gè)類庫(kù)非常強(qiáng)大，但也很復(fù)雜。要掌握它，您將需要了解不同類型的“可觀察”，“主題”以及大約一百種方法和操作符 。

當(dāng)您使用連續(xù)數(shù)據(jù)流（如Web套接字）工作很多的情況下，RxJS非常有用，但是對(duì)于其他任何東西來(lái)說似乎過于復(fù)雜。 無(wú)論如何，當(dāng)你使用Angular時(shí)，您至少應(yīng)該了解RxJS的基本知識(shí)。

TypeScript可以說是Angular中非常重要的特點(diǎn)，首先他給原本C#/Java開發(fā)人員提供了很容易進(jìn)入前端的機(jī)會(huì)，另外TypeScript也想比JavaScript更容易理解，尤其是代碼量或者業(yè)務(wù)復(fù)雜的項(xiàng)目中。

生態(tài)系統(tǒng)

開源框架這么流行的原因之一，就是圍繞著他們，會(huì)有無(wú)數(shù)的工具、類庫(kù)、擴(kuò)展來(lái)支撐整個(gè)框架，有時(shí)，這些工具可能比框架本身更有幫助，接下來(lái)我們就來(lái)看看相關(guān)這兩個(gè)框架最流行的工具和類庫(kù)。

Angular

Angular CLI

現(xiàn)代框架的流行趨勢(shì)是使用CLI工具，可以幫助您引導(dǎo)項(xiàng)目，而無(wú)需自行配置構(gòu)建。Angular有Angular CLI。它允許您僅使用幾個(gè)命令來(lái)生成和運(yùn)行項(xiàng)目。負(fù)責(zé)構(gòu)建應(yīng)用程序的所有腳本，啟動(dòng)開發(fā)服務(wù)器和運(yùn)行測(cè)試都會(huì)在node_modules中隱藏。您也可以在開發(fā)過程中使用它來(lái)生成新的代碼。這使得新項(xiàng)目的設(shè)置變得輕而易舉。

Ionic 2

Ionic 2是開發(fā)混合移動(dòng)應(yīng)用程序的流行框架的新版本。它提供了一個(gè)與Angular 2完美集成的Cordova容器，以及一個(gè)漂亮的材料組件庫(kù)。 使用它，您可以輕松地設(shè)置和構(gòu)建移動(dòng)應(yīng)用程序。 如果您喜歡使用混合應(yīng)用程序，那么這是一個(gè)不錯(cuò)的選擇。

Material design components

如果您熱衷于設(shè)計(jì)Material，您會(huì)很高興聽到Angular有一個(gè)Material組件庫(kù)。

Angular universal

Angular universal是一個(gè)種子項(xiàng)目，可用于創(chuàng)建支持服務(wù)器端渲染的項(xiàng)目。

@ngrx/store

@ngrx/store是由Redux啟發(fā)的Angular的狀態(tài)管理庫(kù)，基于由pure reducer進(jìn)行突變的狀態(tài)。它與RxJS的集成允許您利用推送更改檢測(cè)策略獲得更好的性能。

React

Create React App

Create-react-app是一個(gè)CLI工具，用于快速創(chuàng)建新的React應(yīng)用?？梢陨梢粋€(gè)新的工程，啟動(dòng)開發(fā)服務(wù)器并創(chuàng)建綁定。Jest（來(lái)自Facebook的一個(gè)單元測(cè)試工具）也同時(shí)集成在Create-react-app內(nèi)部，更方便的讓我們進(jìn)行單元測(cè)試。

React Native

React Native是Facebook開發(fā)的基于React在移動(dòng)端的開發(fā)平臺(tái)，借助此平臺(tái)，React可以創(chuàng)建真正的Native的UI。提供了一系列標(biāo)準(zhǔn)的React組件用于綁定。同時(shí)允許創(chuàng)建自己的組件并與Objective-C、Java或者Swift的代碼進(jìn)行綁定。

Material UI

還有一個(gè)可用于React的Material Design Component。與Angular的版本相比，這個(gè)版本比較成熟，可以使用更廣泛的組件。

Next.js

Next.js是React應(yīng)用程序的服務(wù)器端呈現(xiàn)的框架。它提供了一種在服務(wù)器上完全或部分呈現(xiàn)應(yīng)用程序的靈活方式，將結(jié)果返回給客戶端并在瀏覽器中繼續(xù)。它試圖使創(chuàng)建通用應(yīng)用程序的復(fù)雜任務(wù)盡可能簡(jiǎn)單，所以設(shè)置被設(shè)計(jì)為盡可能簡(jiǎn)單，最少量的新原語(yǔ)和對(duì)項(xiàng)目結(jié)構(gòu)的要求。

MobX

MobX是用于管理應(yīng)用程序狀態(tài)的替代庫(kù)。不像Redux那樣將狀態(tài)保存在一個(gè)不可變的存儲(chǔ)中，它鼓勵(lì)您僅存儲(chǔ)最低限度的必需狀態(tài)，并從其中獲取剩余的數(shù)據(jù)。它提供了一組裝飾器來(lái)定義可觀察和觀察者，并將反應(yīng)邏輯引入到你的狀態(tài)管理代碼中。

Storybook

Storybook是React的組件開發(fā)環(huán)境。它允許您快速設(shè)置單獨(dú)的應(yīng)用程序來(lái)顯示您的組件。除此之外，它提供了許多附加組件來(lái)記錄，開發(fā)，測(cè)試和設(shè)計(jì)您的組件。

同樣的，可以從Awesome React list了解更多的工具和類庫(kù)。

學(xué)習(xí)曲線與開發(fā)體驗(yàn)

選擇新技術(shù)的一個(gè)重要標(biāo)準(zhǔn)是學(xué)習(xí)它是否容易。當(dāng)然，答案取決于廣泛的因素，例如您以前的經(jīng)驗(yàn)和對(duì)相關(guān)概念和模式的普遍了解。如果我們假設(shè)你已經(jīng)知道ES6 +，構(gòu)建工具和所有這些，我們來(lái)看看你還需要了解什么。

React

有了React，你會(huì)遇到的第一件事就是JSX。對(duì)于一些開發(fā)人員來(lái)說似乎剛開始會(huì)覺得很別扭，但它并沒有增加復(fù)雜性; 只是表達(dá)式，實(shí)際上還是JavaScript，還有一個(gè)特殊的類似HTML的語(yǔ)法。您還需要學(xué)習(xí)如何編寫組件，使用props進(jìn)行配置和管理內(nèi)部狀態(tài)。不需要學(xué)習(xí)任何新的邏輯結(jié)構(gòu)或循環(huán)，因?yàn)樗羞@些都是純JavaScript。

官方教程是開始學(xué)習(xí)React的好地方。一旦完成了官方教程，接下來(lái)應(yīng)該熟悉并掌握React的路由機(jī)制 。React Router v4版本可能稍微復(fù)雜和非常規(guī)，但也不許太過擔(dān)心。

使用Redux將需要一個(gè)范式的轉(zhuǎn)變，免費(fèi)入門Redux視頻課程可以快速介紹核心概念。根據(jù)項(xiàng)目的大小和復(fù)雜性，找到并學(xué)習(xí)一些額外的庫(kù)，這可能是棘手的一部分，但之后，一切都應(yīng)該變得順利。

其實(shí)，React的上手非常容易，最難的部分可能是如何挑選合適你項(xiàng)目或產(chǎn)品的類庫(kù)。

Angular

Angular將向您介紹比React更多的新概念。首先，您需要使用TypeScript。對(duì)于具有靜態(tài)類型語(yǔ)言（如Java或.NET）經(jīng)驗(yàn)的開發(fā)人員，這可能比JavaScript更容易理解，但對(duì)于純JavaScript開發(fā)人員，這可能需要一些額外的學(xué)習(xí)。

框架本身豐富的技術(shù)主題可以從諸如模塊，依賴注入、裝飾器、組件、服務(wù)、管道、模板和指令等基礎(chǔ)開始，到更高級(jí)的主題，如更改檢測(cè)，區(qū)域，AoT編譯和RxJS。這些都在文檔中。RxJS是一個(gè)很重的話題，在官方網(wǎng)站上有詳細(xì)描述。雖然在基本功能層面上使用起來(lái)相對(duì)容易，但在轉(zhuǎn)到高級(jí)應(yīng)用時(shí)會(huì)變得更加復(fù)雜。

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

前景

Angular

就在2017年的3月，Angular已經(jīng)發(fā)布了4.0的版本（兼容2.x版本），關(guān)于為什么是4.0，官方的解釋是因?yàn)镽outer這個(gè)主要核心組件的版本已經(jīng)是4.0.0，如果Angular還用3.0會(huì)引起混淆，如下圖：

4.0版本中主要是大幅度的減小了代碼體積（60%），同時(shí)提高了加載的速度（肉眼可查的程度），同時(shí)報(bào)錯(cuò)的信息更清晰了。根據(jù)官方的文檔，Angular的版本升級(jí)會(huì)以比較快的速度進(jìn)行迭代

無(wú)論是大版本的6個(gè)月迭代，還是每周的hotfix，能看出Angular團(tuán)隊(duì)想用快速升級(jí)的策略迅速占領(lǐng)市場(chǎng)。

React

反觀React的升級(jí)倒是非常謹(jǐn)慎的，這從最新的v15.5.0的發(fā)布新聞博客中就能看出

不過，從博客中能看到React即將迎來(lái)v16，不知道整個(gè)重寫的React會(huì)給我們帶來(lái)什么驚喜。不過，需要提一下的是Facebook已經(jīng)與去年底的時(shí)候發(fā)布了React VR，有興趣的同學(xué)可以圍觀以下。

契合度

無(wú)論是哪個(gè)框架，適合自己的才是“好“的，所以需要你從項(xiàng)目（產(chǎn)品）本身的角度去衡量，以下的問題列表可能并不全面，但至少可以作為一個(gè)開始

? 該項(xiàng)目（產(chǎn)品）有多大規(guī)模？

? 要維護(hù)多久？

? 所有的功能是提前清楚地定義還是靈活的改變？

? 域模型和業(yè)務(wù)邏輯是否復(fù)雜？

? 你定位什么平臺(tái)？ Web，手機(jī)，桌面？

? 你需要服務(wù)器端渲染嗎？ SEO重要嗎？

? 你會(huì)處理很多實(shí)時(shí)事件流？

? 你的團(tuán)隊(duì)有多大？

? 你的開發(fā)人員有多豐富，他們的背景是什么？

? 是否有任何您想要使用的現(xiàn)成的組件庫(kù)？

如果您正在開展一個(gè)大型項(xiàng)目，并希望盡可能減少錯(cuò)誤選擇的風(fēng)險(xiǎn)，請(qǐng)考慮先創(chuàng)建一個(gè)demo用于驗(yàn)證產(chǎn)品概念。選擇項(xiàng)目的一些主要功能，并嘗試使用其中一個(gè)框架以簡(jiǎn)單的方式實(shí)現(xiàn)它們。 Demo通常不會(huì)（也不應(yīng)該）花費(fèi)很多時(shí)間，但會(huì)提供一些寶貴的經(jīng)驗(yàn)，可以幫助您驗(yàn)證關(guān)鍵的技術(shù)要求。如果對(duì)結(jié)果感到滿意，可以繼續(xù)全面構(gòu)建。如果沒有，會(huì)給你充分的時(shí)間重新選擇。

總結(jié)

通過以上的6個(gè)方面對(duì)比了React和Angular這兩個(gè)目前最熱的前端框架，希望能對(duì)你在選擇時(shí)提供一些參考。但是否真的是合適自己的，或許真的需要用過才知道 ?? Good luck~~~

原文鏈接：https://www.sitepoint.com/react-vs-angular/

轉(zhuǎn)載請(qǐng)注明出自：葡萄城控件

關(guān)于葡萄城

葡萄城是全球控件行業(yè)領(lǐng)導(dǎo)者，世界領(lǐng)先的企業(yè)應(yīng)用定制工具、企業(yè)報(bào)表和商業(yè)智能解決方案提供商，為超過75%的全球財(cái)富500強(qiáng)企業(yè)提供服務(wù)。