在現今網路發達的時代，人們的生活已

經離不開手機、電腦等可以聯網的裝

置。不論是取得日常所需的資訊、下載休閒

娛樂的遊戲，都能藉由網路來完成。隨著開

發網頁和手機應用程式的需求不斷增加，前

端工程師所面對的困難也變得更複雜，網頁

應用程式需要跨平台、跨瀏覽器運作，並有

響應式設計 (Responsive Web Design)。

為了因應前端開發的各種需求，前端技術這

幾年不斷地演進，開源社群中有越來越多新

技術、網頁開發框與套件如雨後春筍般冒

出，本文針對辯論已久的 Angular 與 React 做

比較，並且從多個面相切入思考開發專案時

該考慮哪些因素，如何選擇符合開發需求的

前端技術。

Angular vs React 穩定發展與創新技術的抉擇

最受歡迎的兩套前端開發框架之評比

撰文 | 叡揚資訊 前端設計部 前端工程師 李欣蕙

Angular 和 React 的介紹與比較A n g u l a r 是由 G o o g l e 所開發的前端

Ja vaSc r i p t 框架，可以建立聲明式模板

(Declarative templates) 與實現資料繫結

(data-binding) ，讓開發者能夠將介面的運

作邏輯寫入 HTML，控制介面的運作方

式。Angular 提供一整套完整的專案環境與

工具，讓開發者能快速上手，也可以實現

Single Page Application。2014 Google 並推

出 Angular 2，針對網頁元件模組化加強處

理，並提升效能。

React 是由 Facebook 所開發的 Javascript 程

式庫，使用 JSX（一種使用 Javascript 來撰

寫網頁元件的語法）建立 HTML 模板，強

調模組化、將網頁劃分為獨立的區塊，並

同樣能實現資料繫結。但 React 並不提供所

有架構專案需要的工具，需使用第三方套

件才能建立功能完整的網頁。也因此使用

React 讓開發者能更有彈性、更自由地選擇

自己想要的套件，依照不同需求打造專案

環境。圖片來源：ACADGILD https://acadgild.com/blog/angularjs-2-0-vs-reactjs/

January 2017 | 叡揚e論壇 第85期 | 25

研發與設計 專欄 Column

Research &

Developm

ent

Research & Development

Angular 的優勢Angular 和 React，一個是框架，一個是程式

庫。框架能夠提供比程式庫更加完整的功能與

環境，是 Angular 支持者極為推崇的優點。

Biznas1(2016) 在解釋為何選擇了 Angular 2 作

為開發企業用軟體的首選時提到，如果選

擇了 React 程式庫，開發者還需要另外決定

routing、moodel management、build tools 要使

用哪些第三方套件來實現。相較之下，如果選

擇 Angular 框架，就不需另外尋尋覓覓，照著

Angular 的規範就能夠架起一個專案。

Cory House2(2016) 也提到，Angular 提供更多

建議給開發者，這種強制的一致性能幫助開發

者更快適應其開發模式，也能讓開發者更能夠

在不同開發團隊間迅速切換。

文章並用了具體的比喻來形容兩者的差異：

「選擇 Angular 還是 React 就像選擇直接購買

電腦還是買零件自己組裝一樣。」

React 的優勢Angular 是 HTML 本位，把 Javascript 邏輯放

到 HTML 裡面，而 React 則是 Javascript 本

位，把 HTML 模板放到 Javascript 裡面。這使

得兩種語言從最根本的寫作方式和邏輯上便有

極大差異。支持 React 的開發者，推崇 React

使用較純粹的 Javascript 來開發網站，不用像

Angular 需要使用許多自創的功能性 attibutes

（如：ng-repeat，ng-if ) 來撰寫 HTML。

Cory House(2016) 的文章認為，JavaScript 的

功能比 HTML 強大，因此增強 JavaScript 支援

HTML 刻模板的能力，要比增強 HTML 的邏

圖片來源： jwcarrol (https://twitter.com/jwcarroll)

| 叡揚e論壇 第85期 | January 201726

輯能力還要合理。他也表示，很多應用不會

用到 Angular 這種大型框架提供所有功能，現

在時代越來越走向微服務、微應用、模組化

的時代，React 能給予開發者挑選需要的模組

的自由，讓應用程式能量身訂做。

開發企業用軟體的考量

Angular 和 React 各有優缺點與支持的社群，

那我們公司在前端開發上要如何選擇呢？

Biznas (2016) 提到，若企業想長久使用同一個

技術來開發專案，有四大考量：技術一致性、

社群的支援、最佳實作方法、未知數最小化。

技術一致性

開發企業用軟體需要擁有增加新功能的彈

性、能穩定的運作，以及能久遠的維護。技

術有一致性，才能在修改舊專案時，不會影

響到舊有的功能，保持專案的環境穩定，並

且也能減少學習新技術的成本與使用新技術

的風險。

社群的支援

有開發者眾多的開源社群，當開發遇到困難

時能比較容易找到解答，也會有更多相關的

套件可使用。

最佳實作方法

提供可依循的規則與實作指南，程式風格規

格化與標準化，讓開發者能快速上手、並能

在不同專案開發中更順利的切換，減少技術

銜接的困難。

未知數最小化

提供的文件資訊與解決方案要詳細、完成度

高，盡可能減少未知數，減少日後維護與開

發的困難。

考量4

考量3

考量2

考量1

1 Biznas ( 2016 ) ， Why we chose Angular 2 over React for our enterprise software development work。2 Cory House ( 2016 ) ，Angular 2 versus React: There Will Be Blood。

January 2017 | 叡揚e論壇 第85期 | 27

研發與設計 專欄 Column

Research &

Developm

ent

Research & Development

若 以 這 些 因 素 來 比 較

Angular 和 React 的表現：

在技術一致性上，React 還

在蓬勃發展中，隨時在推陳

出新，要跟上它的腳步有一

定困難度；而 Angular 則較

穩定發展，在更新的同時也

保持一定相容性，Angular 2

增加更多功能，舊專案可以

部分採用新技術，慢慢把新

支援的內容加入而不會影響

原本的功能。

在社群的支援與最佳的實作

方法方面，React 和 Angular

都有龐大開發者社群，但

React 較少標準化，不同開

發者有不同的寫作風格，開

發者需要花時間自行摸索寫作風格與開發要用

的工具；而 Angular 提供較多建議與工具，較

容易上手，開發者只要跟隨官方提供的最佳做

法即可架構一個專案。

在未知數最小化方面，R e a c t 是成長中的

社群，不同套件與工具彼此依賴度高，且

Facebook 並不會維護這些開發者所需要的第

三方套件，這對企業軟體需要的穩定發展較不

利；Angular 則能提供整體的開發環境，較少

依賴非 Google 團隊開發的第三方套件。

結論與未來發展

React 是概念上的革新，掀起前端社群學習新

技術的浪潮，模組化的精神改變了舊有網頁開

發的思維，符合未來開發軟體應用的發展方

向。Angular 相對穩定、不自由，但提供給企

業軟體更可靠、更容易開發與維護的選擇。

React 需要依賴相關套件來架構完整的專案，

所以各個專案自由度大，專案間的差異性也可

能較大；Angular 的專案則共通語言較多，對

於開發企業用軟體產品的開發者，較容易進行

後續技術維護、且有未來整合多個產品專案的

可能性。

若說 React 是前端社群的啟發者，讓大家能

自由揮灑創意，那麼 Angular 就像是領導者，

Google 提供自身團隊研發的成果，讓開發者能

跟隨、減少摸索的時間。若是開發新創應用程

式，也許可考慮以 React 來架構客製化產品，

走在浪潮的尖端；若是開發企業用軟體，則可

選用 Angular ，穩定性高、整合也更容易！

| 叡揚e論壇 第85期 | January 201728