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

在現今網路發達的時代，人們的生活已經離不開手機、電腦等可以聯網的裝置。不論是取得日常所需的資訊、下載休閒娛樂的遊戲，都能藉由網路來完成。隨著開發網頁和手機應用程式的需求不斷增加，前端工程師所面對的困難也變得更複雜，網頁應用程式需要跨平台、跨瀏覽器運作，並有響應式設計 (Responsive Web Design)。 

為了因應前端開發的各種需求，前端技術這幾年不斷地演進，開源社群中有越來越多新技術、網頁開發框與套件如雨後春筍般冒出，本文針對辯論已久的 Angular 與 React 做比較，並且從多個面相切入思考開發專案時該考慮哪些因素，如何選擇符合開發需求的前端技術。 

Angular 和 React 的介紹與比較 

Angular 是由 Google 所開發的前端 JavaScript 框架，可以建立聲明式模板 (Declarative templates) 與實現資料繫結 (data-binding) ，讓開發者能夠將介面的運作邏輯寫入 HTML，控制介面的運作方式。Angular 提供一整套完整的專案環境與工具，讓開發者能快速上手，也可以實現 Single Page Application。2014 Google 並推出 Angular 2，針對網頁元件模組化加強處理，並提升效能。 

React 是由 Facebook 所開發的 Javascript 程式庫，使用 JSX(一種使用 Javascript 來撰寫網頁元件的語法)建立 HTML 模板，強調模組化、將網頁劃分為獨立的區塊，並同樣能實現資料繫結。但 React 並不提供所有架構專案需要的工具，需使用第三方套件才能建立功能完整的網頁。也因此使用 React 讓開發者能更有彈性、更自由地選擇自己想要的套件，依照不同需求打造專案環境。

Angular 的優勢

Angular 和 React，一個是框架，一個是程式庫。框架能夠提供比程式庫更加完整的功能與環境，是 Angular 支持者極為推崇的優點。 

Biznas¹(2016) 在解釋為何選擇了 Angular 2 作為開發企業用軟體的首選時提到，如果選擇了 React 程式庫，開發者還需要另外決定 routing、moodel management、build tools 要使用哪些第三方套件來實現。相較之下，如果選擇 Angular 框架，就不需另外尋尋覓覓，照著 Angular 的規範就能夠架起一個專案。 

Cory House²(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 的邏輯能力還要合理。他也表示，很多應用不會用到 Angular 這種大型框架提供所有功能，現在時代越來越走向微服務、微應用、模組化的時代，React 能給予開發者挑選需要的模組的自由，讓應用程式能量身訂做。 

開發企業用軟體的考量 

Angular 和 React 各有優缺點與支持的社群，那我們公司在前端開發上要如何選擇呢？ Biznas (2016) 提到，若企業想長久使用同一個 技術來開發專案，有四大考量：技術一致性、社群的支援、最佳實作方法、未知數最小化。 

考量1：技術一致性 

開發企業用軟體需要擁有增加新功能的彈性、能穩定的運作，以及能久遠的維護。技術有一致性，才能在修改舊專案時，不會影響到舊有的功能，保持專案的環境穩定，並且也能減少學習新技術的成本與使用新技術的風險。 

考量2：社群的支援 

有開發者眾多的開源社群，當開發遇到困難時能比較容易找到解答，也會有更多相關的套件可使用。 

考量3：最佳實作方法 

提供可依循的規則與實作指南，程式風格規格化與標準化，讓開發者能快速上手、並能在不同專案開發中更順利的切換，減少技術銜接的困難。 

考量4：未知數最小化 

提供的文件資訊與解決方案要詳細、完成度高，盡可能減少未知數，減少日後維護與開發的困難。 

若以這些因素來比較 Angular 和 React 的表現：在技術一致性上，React 還在蓬勃發展中，隨時在推陳出新，要跟上它的腳步有一定困難度；而 Angular 則較穩定發展，在更新的同時也保持一定相容性，Angular 2 增加更多功能，舊專案可以部分採用新技術，慢慢把新支援的內容加入而不會影響原本的功能。 

在社群的支援與最佳的實作方法方面，React 和 Angular 都有龐大開發者社群，但

React 較少標準化，不同開發者有不同的寫作風格，開發者需要花時間自行摸索寫作風格與開發要用的工具；而 Angular 提供較多建議與工具，較容易上手，開發者只要跟隨官方提供的最佳做法即可架構一個專案。 

在未知數最小化方面，React 是成長中的社群，不同套件與工具彼此依賴度高，且 Facebook 並不會維護這些開發者所需要的第三方套件，這對企業軟體需要的穩定發展較不利；Angular 則能提供整體的開發環境，較少依賴非 Google 團隊開發的第三方套件。 

結論與未來發展 

React 是概念上的革新，掀起前端社群學習新技術的浪潮，模組化的精神改變了舊有網頁開發的思維，符合未來開發軟體應用的發展方向。Angular 相對穩定、不自由，但提供給企業軟體更可靠、更容易開發與維護的選擇。React 需要依賴相關套件來架構完整的專案， 所以各個專案自由度大，專案間的差異性也可能較大；Angular 的專案則共通語言較多，對於開發企業用軟體產品的開發者，較容易進行後續技術維護、且有未來整合多個產品專案的可能性。 

若說 React 是前端社群的啟發者，讓大家能自由揮灑創意，那麼 Angular 就像是領導者，Google 提供自身團隊研發的成果，讓開發者能 跟隨、減少摸索的時間。若是開發新創應用程式，也許可考慮以 React 來架構客製化產品，走在浪潮的尖端；若是開發企業用軟體，則可選用 Angular，穩定性高、整合也更容易！