翻譯原文鏈接：https://blog.prototypr.io/react-vs-angular-two-sides-of-javascript-b850de22b413

　　我的翻譯小站：http://www.zcfy.cc/article/3573

　　在世界末日，技術(shù)的選擇起著關(guān)鍵性的作用。擁有幾年經(jīng)驗的積累，我們參與了幾十種不同語言的翻譯，框架，以及書。把我們的知識融合在一起，我們決定

去總結(jié)一些關(guān)于React&Angular的問題以及分享一些觀點給大家。因此，在這篇文章中，我們將轉(zhuǎn)換我們的【前端開發(fā)】經(jīng)驗在一些事情上，希望它能夠幫助你決定

哪種技術(shù)更加適合你。

什么是Angular 2?

　　Angular是一個開源的JavaScript框架，提供創(chuàng)造客戶端網(wǎng)站需要的一切東西。在Angular 2開發(fā)期間，你可以看到第二版本相對第一版本擺脫了不必要的復(fù)雜性。

　　例如，Angular2團隊幾乎摒棄掉了第一版本的所有觀念，我主要講述模塊，控制器，scopes，指令等。

從我們相關(guān)的文章中，不僅可以擴展我們的編程技巧，同時能夠掌握軟件開發(fā)的一些方法。(https://www.cleveroad.com/blog/a-fresh-take-on-5-software-development-methodologies)

　　然而，他們依然沒有停止讓他們的框架變得簡單。他們還添加了一些新的顯著特征和做了一些提高。在這些特點里，我們可能喜歡單個的應(yīng)用程序支持

以及服務(wù)端的渲染。關(guān)于這些改善，我們無法忽略Angualr2性能提高的事實。

為什么它變得這么受歡迎？

  • Angular是谷歌團隊自己想象創(chuàng)造出來的

  • 設(shè)計的方式允許程序員在基于其它語言之后，學(xué)習(xí)angular時，不會太痛苦。

  • 許多程序員指出，如果你的angular看起來很復(fù)雜—你在做一件錯誤的事

　　基于Angular構(gòu)建的網(wǎng)站： YouTube (for PS3), GoodFilms, Freelancer, Upwork

　　那么，為什么angular2有好處？讓我們一起看下關(guān)于它的贊成和反對的意見。

cleveroad-angular優(yōu)勢和劣勢

什么是React?

　　不像Angular,ReactJs是基于JSX寫法的一種JavaScript的開源庫。它主要專注于用戶接口，允許創(chuàng)造可復(fù)用的UI視圖組件。

　　當(dāng)使用React的時候，你要記住它不再是MVC的框架，而是一種渲染視圖的庫，在這種方式下，利用React接口集中方式，

使用者可以得到一種高度響應(yīng)且平滑加載的體驗。

為什么它變得這么受歡迎?

  • 項目基于facebook的標(biāo)準(zhǔn)

  • 搜索引擎對于ReactJs問題的解決方案比較友好

  • ReactJs的操作以及靈活性很高

　　有名的ReactJs構(gòu)建的網(wǎng)站： Netflix, Feedly, Airbnb, Walmart

　　現(xiàn)在，讓我們考慮一下為什么ReactJS在我們一定的需求上，能夠很有用。

cleveroad-React的優(yōu)勢和劣勢。

我們要如何去選擇呢？

　　現(xiàn)在，讓我們深入探討一些細(xì)節(jié)，這對于我們技術(shù)的選擇非常重要。

許可證

　　你應(yīng)該了解到這些框架的秘鑰是否被頒發(fā)。大部分的秘鑰是非常靈活的，并且你可以使用他們創(chuàng)造一些被承認(rèn)的apps，沒有任何的問題。

然而，有些類型的秘鑰限制了你的行為自由。做一些簡單的研究比學(xué)習(xí)一些沒有商業(yè)分配權(quán)利的產(chǎn)品更好，對嗎？　

　注:Angular和ReactjS共同優(yōu)點之一為兩者都是開源的，且沒有使用的限制。值得提到的是Angular使用MIT秘鑰，而React使用3-clause BSD。唯一對于BSD

顯而易見的不同是它禁止使用持牌人的姓名做廣告用途。

MVC模式

　　模型-視圖-控制器模式允許將一個項目的數(shù)據(jù)分離到三個組件里面：模型，視圖以及控制器。這種方式下，由于代碼分離，每一個組件的修改能夠獨立進行

增加了最終產(chǎn)品的質(zhì)量。除了MVC模式，還有MVP和MVVM模式。　

　注:在Angular2的所有特點之中，脫離盒子的可利用的MVC模式是很重要的優(yōu)點，遠(yuǎn)在react之上。由于它的縮寫只有三個字母，所以只有“V”-view。

如果你需要”M”和”C”,你應(yīng)該看看其它地方來解決問題。

模板

　　關(guān)于Angular2的好處，值得提到的是它易于顯示模板的編寫。對數(shù)據(jù)具有非常直觀的UI，Angular允許你調(diào)用接口，用更直觀的方法來得到結(jié)果。以及要求更少

的代碼量和更加顯而易見。對于React,它需要特殊的函數(shù)來管理這些數(shù)據(jù)的顯示。大部分，它意味著你應(yīng)該定義一種方式在DOM渲染之前，來將你的數(shù)據(jù)呈現(xiàn)出來。

在它試圖將某一元素進行渲染期間，這也許會導(dǎo)致斷開。

　注:在線服務(wù)創(chuàng)建時，你要做的百分之八十是編寫它的UI。因此，你最好權(quán)衡這些技術(shù)模板的方法，來找出最合適你的編碼操作的那個。

數(shù)據(jù)綁定

　　Angular使用雙向綁定，有了它的幫助，這個框架可以通過控制器將DOM連接到模型數(shù)據(jù)。一句話來總結(jié)，當(dāng)用戶進行輸入，并給APP賦予新的值，不僅試圖被更新

數(shù)據(jù)也會立馬更新。因此，你不需要在APP內(nèi)，寫一些方法來追蹤這些變化。

　注:Angular綁定的自動監(jiān)聽方法，運作很好。

　　React使用單向綁定，數(shù)據(jù)流只會在單個方向進行。由于這個，你會經(jīng)常注意數(shù)據(jù)改變的地方。

　注: React的方法非常易于大應(yīng)用程序的調(diào)試。

　　值得說一句關(guān)于 客戶端 vs 服務(wù)端渲染。事實上，Angular第一版本使用的是服務(wù)端渲染，給市場創(chuàng)造了一定的困難。由于瀏覽器將客戶端渲染視為JavaScript，具有

優(yōu)化SEO的純粹機會。這是一個很大的劣勢，因為大多數(shù)數(shù)字產(chǎn)品需要大量的營銷能力才能生存下去。同時，客戶端渲染可能會影響頁面加載，然而，從第二個版本開始

Angular開發(fā)者已經(jīng)解決了這個問題 將它的渲染模型放在服務(wù)端。

性能

　　眾所周知，Angular創(chuàng)造數(shù)據(jù)綁定監(jiān)聽，為了追蹤到DOM里面的所有變化。只要這個頁面有所更新，Angular開始比較獲得的值與原始的值。事實是這個技術(shù)不僅檢查這

些值的變化，同時還監(jiān)聽他們所有的變化。

注: 當(dāng)應(yīng)用在大量的應(yīng)用程序上時，Angular2性能可能引起一些問題。

　　ReactJS開發(fā)者已經(jīng)介紹了 虛擬DOM觀點，允許創(chuàng)造輕便的DOM樹。每次用戶與網(wǎng)站進行交互時，列如填充表單，React創(chuàng)造虛擬DOM來與之前的值做比較。框架庫

發(fā)現(xiàn)這兩種模型的不同之后—-虛擬DOM將被重建。所有的進程都在服務(wù)之內(nèi)執(zhí)行，在這種方式下，減少瀏覽器的加載。

　注: 當(dāng)面對大量的數(shù)據(jù)時候，由于沒有監(jiān)聽，ReactJS性能增加。

　　我們已經(jīng)編制了圖表，顯示了這些技術(shù)的評價標(biāo)準(zhǔn)。這些分?jǐn)?shù)是根據(jù)我們的個人經(jīng)驗而定的。

cleveroad評價技術(shù)

　　我們有一個關(guān)于React vs Angular問題的小會議，我們的前端開發(fā)人員有機會討論所有這些技術(shù)的優(yōu)缺點。

　　他們總結(jié)出Angular更加適合他們代碼操作，對于他們?nèi)粘５墓ぷ魅蝿?wù)來說。

　　總上所述，我們?yōu)槟銣?zhǔn)備了一張圖表，這里，你可以發(fā)現(xiàn)Angular1.x, Angular2和React的比較。

React vs Angular版本

Cleveroad的經(jīng)驗

　　在這兩種技術(shù)之中，我們的程序員更喜歡用Angular網(wǎng)站開發(fā)。有許多與這個框架相關(guān)的基礎(chǔ)，我們能夠更高效的工作，減少項目的開發(fā)時間。
在這種方式下，我們的客戶端由于縮短了開發(fā)周期，減少了項目的花費。

　　我們基于這種技術(shù)的所有項目都有大量的前端邏輯在其結(jié)構(gòu)中頻繁變化。這些項目隱含著許多設(shè)計變更。React庫的使用可以提高開發(fā)時間，提高最終產(chǎn)品的總價格。

　　以下是我們的項目: Age In Days, Count, Lifetile. 所有這些Angular構(gòu)建的網(wǎng)站在我們公司.

　　您也可以看看我們的技術(shù)堆棧，我們通常使用Angular2開發(fā)。

　　服務(wù)端方案: AWS, DigitalOcean, Hetzner, Microsoft Azure

　　后端技術(shù): Node.js + Typescript 2, Angular 2

　　數(shù)據(jù)庫: MySQL, MongoDB, Redis, PostgreSQL

　　云存儲: AWS S3, Azure storage

　　支付: Stripe, Braintree

　　基礎(chǔ)設(shè)施和項目管理: Webpack 2, Docker and CI, Jira, Bitbucket/Git

結(jié)尾

　　也許，在前端世界中，選擇Angular和React之間的問題，在某種程度上可以與iOS和Android之間的選擇相媲美。我的意思是，兩者技術(shù)都有優(yōu)缺點

它的追隨者和厭惡者。因此，每個開發(fā)人員都有一定的原因，使用reactjs或其他技術(shù)。

　　在2017年,越來越多的網(wǎng)站項目將會基于Angular2,因為允許簡化開發(fā)者開發(fā)的特點。列如,好的調(diào)試工具，MVC模式，服務(wù)端渲染等。因此，它將減少

開發(fā)所需的時間，從而降低開發(fā)和維護的定價。

　　如果你有其它問題?—?請 contact us, 這是免費的!

http://www.cnblogs.com/jtjds/p/7226199.html