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