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

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

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

去總結一些關於React&Angular的問題以及分享一些觀點給大家。因此，在這篇文章中，我們將轉換我們的【前端開發】經驗在一些事情上，希望它能夠幫助你決定

哪種技術更加適合你。

什麼是Angular 2?

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

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

　　然而，他們依然沒有停止讓他們的框架變得簡單。他們還添加了一些新的顯著特徵和做了一些提高。在這些特點裡，我們可能喜歡單個的應用程式支援

以及服務端的渲染。關於這些改善，我們無法忽略Angualr2效能提高的事實。

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

• Angular是谷歌團隊自己想象創造出來的

• 設計的方式允許程式設計師在基於其它語言之後，學習angular時，不會太痛苦。

• 許多程式設計師指出，如果你的angular看起來很複雜—你在做一件錯誤的事

　　基於Angular構建的網站： YouTube (for PS3), GoodFilms, Freelancer, Upwork

　　那麼，為什麼angular2有好處？讓我們一起看下關於它的贊成和反對的意見。

cleveroad-angular優勢和劣勢

什麼是React?

　　不像Angular,ReactJs是基於JSX寫法的一種JavaScript的開源庫。它主要專注於使用者介面，允許創造可複用的UI檢視元件。

　　當使用React的時候，你要記住它不再是MVC的框架，而是一種渲染檢視的庫，在這種方式下，利用React介面集中方式，

使用者可以得到一種高度響應且平滑載入的體驗。

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

• 專案基於facebook的標準

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

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

　　有名的ReactJs構建的網站： Netflix, Feedly, Airbnb, Walmart

　　現在，讓我們考慮一下為什麼ReactJS在我們一定的需求上，能夠很有用。

cleveroad-React的優勢和劣勢。

我們要如何去選擇呢？

　　現在，讓我們深入探討一些細節，這對於我們技術的選擇非常重要。

許可證

　　你應該瞭解到這些框架的祕鑰是否被頒發。大部分的祕鑰是非常靈活的，並且你可以使用他們創造一些被承認的apps，沒有任何的問題。

然而，有些型別的祕鑰限制了你的行為自由。做一些簡單的研究比學習一些沒有商業分配權利的產品更好，對嗎？　

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

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

MVC模式

　　模型-檢視-控制器模式允許將一個專案的資料分離到三個元件裡面：模型，檢視以及控制器。這種方式下，由於程式碼分離，每一個元件的修改能夠獨立進行

增加了最終產品的質量。除了MVC模式，還有MVP和MVVM模式。　

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

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

模板

　　關於Angular2的好處，值得提到的是它易於顯示模板的編寫。對資料具有非常直觀的UI，Angular允許你呼叫介面，用更直觀的方法來得到結果。以及要求更少

的程式碼量和更加顯而易見。對於React,它需要特殊的函式來管理這些資料的顯示。大部分，它意味著你應該定義一種方式在DOM渲染之前，來將你的資料呈現出來。

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

　注:線上服務建立時，你要做的百分之八十是編寫它的UI。因此，你最好權衡這些技術模板的方法，來找出最合適你的編碼操作的那個。

資料繫結

　　Angular使用雙向繫結，有了它的幫助，這個框架可以通過控制器將DOM連線到模型資料。一句話來總結，當用戶進行輸入，並給APP賦予新的值，不僅試圖被更新

資料也會立馬更新。因此，你不需要在APP內，寫一些方法來追蹤這些變化。

　注:Angular繫結的自動監聽方法，運作很好。

　　React使用單向繫結，資料流只會在單個方向進行。由於這個，你會經常注意資料改變的地方。

　注: React的方法非常易於大應用程式的除錯。

　　值得說一句關於 客戶端 vs 服務端渲染。事實上，Angular第一版本使用的是服務端渲染，給市場創造了一定的困難。由於瀏覽器將客戶端渲染視為JavaScript，具有

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

Angular開發者已經解決了這個問題 將它的渲染模型放在服務端。

效能

　　眾所周知，Angular創造資料繫結監聽，為了追蹤到DOM裡面的所有變化。只要這個頁面有所更新，Angular開始比較獲得的值與原始的值。事實是這個技術不僅檢查這

些值的變化，同時還監聽他們所有的變化。

注: 當應用在大量的應用程式上時，Angular2效能可能引起一些問題。

　　ReactJS開發者已經介紹了 虛擬DOM觀點，允許創造輕便的DOM樹。每次使用者與網站進行互動時，列如填充表單，React創造虛擬DOM來與之前的值做比較。框架庫

發現這兩種模型的不同之後—-虛擬DOM將被重建。所有的程序都在服務之內執行，在這種方式下，減少瀏覽器的載入。

　注: 當面對大量的資料時候，由於沒有監聽，ReactJS效能增加。

　　我們已經編制了圖表，顯示了這些技術的評價標準。這些分數是根據我們的個人經驗而定的。

cleveroad評價技術

　　我們有一個關於React vs Angular問題的小會議，我們的前端開發人員有機會討論所有這些技術的優缺點。

　　他們總結出Angular更加適合他們程式碼操作，對於他們日常的工作任務來說。

　　總上所述，我們為你準備了一張圖表，這裡，你可以發現Angular1.x, Angular2和React的比較。

React vs Angular版本

Cleveroad的經驗

　　在這兩種技術之中，我們的程式設計師更喜歡用Angular網站開發。有許多與這個框架相關的基礎，我們能夠更高效的工作，減少專案的開發時間。
在這種方式下，我們的客戶端由於縮短了開發週期，減少了專案的花費。

　　我們基於這種技術的所有專案都有大量的前端邏輯在其結構中頻繁變化。這些專案隱含著許多設計變更。React庫的使用可以提高開發時間，提高最終產品的總價格。

　　您也可以看看我們的技術堆疊，我們通常使用Angular2開發。

　　服務端方案: AWS, DigitalOcean, Hetzner, Microsoft Azure

　　後端技術: Node.js + Typescript 2, Angular 2

　　資料庫: MySQL, MongoDB, Redis, PostgreSQL

　　雲端儲存: AWS S3, Azure storage

　　支付: Stripe, Braintree

　　基礎設施和專案管理: Webpack 2, Docker and CI, Jira, Bitbucket/Git

結尾

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

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

　　在2017年,越來越多的網站專案將會基於Angular2,因為允許簡化開發者開發的特點。列如,好的除錯工具，MVC模式，服務端渲染等。因此，它將減少

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