都 9012了,該選擇 Angular、React,還是Vue?

葡萄城控制元件發表於2019-04-18

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

都 9012了,該選擇 Angular、React,還是Vue?

儘管 Web開發的典型應用場景除了將伺服器用作平臺、瀏覽器用作客戶端之外,幾乎很少活躍於其他業務領域,但不可否認JavaScript 語言和框架的使用已經成為了主流。Angular、React 和 Vue,作為 JavaScript 的三大框架已逐步發展成熟,三者的差異性也越發明顯,假設JavaScript還會繼續流行十年左右,未來十年,你將會作何選擇?

Angular

AngularJS 自2009年誕生,至今已有十年曆史。在這短短十年中,其對 Web 社群的發展產生了十分深遠的影響。作為一款優秀的 JavaScript 框架,在其推出一年後,便在全球引起了廣泛關注,如今更是在Google的 600 多款產品中得以成功運用,如Firebase控制檯、谷歌分析、谷歌快車、谷歌雲等。

AngularJS有著諸多核心特性,包含:MVC(Model–view–controller)、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等。Angular 最新版 7.0.0 已於2018年10月釋出,下一版本預計將於今年第二季度正式上線。以下是Angular 7 針對效能、命令列工具和Material Design元件的優化項:

  • 效能方面:Angular 7 新增的虛擬滾動優化了單頁面的呈現方式,對於那些吸引訪問者繼續向下滾動的clickbait網站來說,這將派上大用場。Angular 7 的另一個效能亮點被稱為Bundle Budgets,它用於預警開發人員當前使用的JavaScript包的大小,當JavaScript 包超過 2MB 時開始預警,在達到 5MB 後直接中斷生成。



Angular 7 虛擬滾動

  • 命令列提示:當在CLI中鍵入某些命令,如 ng new 或者 ng add @angular/material 時,Angular 7 會提示使用者,讓你找到像路由或SCSS支援之類的內建特性,從而簡化編碼體驗,幫助開發者發現新功能或提供靈感。
  • 視覺風格:谷歌在Angular 7之前已於2018年更新了Material.io,使用者更新後會出現細微的視覺差異:如,UI結構層次更為大膽、形狀的邊角更加圓滑,五種全新的 Icon 樣式,以及一個非常時尚且現代化的拖放模組。

Angular 7 拖放效果

React

Angular的出現,在Web社群引發了強烈轟動。兩年後,Facebook 也推出了一款同樣具備豐富功能的JavaScript UI元件庫——React。

使用React,意味著您將用一種更簡約的方式開始前端開發,這也是大部分開發人員所期待的:

  • 沒有依賴注入
  • 使用JSX(一種基於JavaScript構建的類似XML的語言),而非經典模板,建立虛擬DOM
  • 使用狀態管理setState和Context API
  • XSS保護
  • 用於單元測試元件的實用程式

不多,卻正好夠用,您完全可以根據自己的需要,自由新增任何元件庫,它們包括:

  • 路由:React-router
  • 獲取 HTTP請求:Fetch(或axios)
  • 各種各樣的CSS封裝技術
  • 用於單元測試的Enzyme

Google 和 Facebook 作為 Web 社群開源專案的主要發起者,彼此之間從未停止過競爭,尤其是關於 Angular 和 React 之間的辯論已經持續了四年之久。但嚴格來說,將Angular與React進行比較並不完全公平,因為Angular是一個功能齊全、元件豐富的框架,而React只是一個UI元件庫。為了解決這個問題,我們將就 Angular 框架中的一些常用元件庫與 React 進行對比。

元件功能:React VS Angular

Angular提供了比React更多開箱即用的功能,如:

  • 依賴注入
  • 基於HTML的擴充套件模板
  • 由 @angular / router 提供的路由
  • 使用 @angular / common / http 的Ajax請求
  • 用於構建 @angular /forms 的表單
  • 元件CSS封裝
  • XSS保護
  • 用於單元測試元件的實用程式

其中,依賴注入等功能作為 Angular 的核心,您無法選擇不使用它們,這好像一把雙刃劍,在帶來強大功能模組的同時,也使得Angular 變得越來越笨重。

當然,Google工程師已經意識到了這個問題,也在一定程度上致力於簡化Angular框架的複雜性,希望在 Angular 8 中能讓人耳目一新。

Vue

在React 與 Angular孰優孰劣的討論逐步升溫的時候,另一個JavaScript框架Vue抵達了現場,使得這場最優Web開發框架的角逐變得更加白熱化。

Vue.js 是由Google的核心開發工程師——尤雨溪(Evan You)所建立的框架,作為一個比 React 和 Angular 都更年輕的框架,Vue 從它們那裡借鑑了好的部分,即函式式和麵向物件程式設計的混合體。2014年2月(在微軟收購GitHub平臺四年之前),Evan You在GitHub上釋出了第一個穩定版本的Vue,標誌著一個構建資料驅動的 Web UI的漸進式框架就此誕生。

儘管沒有得到谷歌和Facebook等科技巨頭的支援,但自2018 年以來,Vue一直受到開發者的廣泛關注。從去年幾大主流前端開發框架的熱度來看,大多數知曉 Vue 的開發者都表示有興趣學習它。

也許,那些已經熟練掌握Angular和React前端框架的開發人員也應該花些時間去了解一下這個簡單、小巧、省心的前端框架,希望下面的內容能對你有所幫助。

學習曲線:React VS Vue

如果前端框架的學習不包含TypeScript(即便 TypeScript 通常被認為是JavaScript的增集,但要完全掌握仍需要學習額外的類處理過程),那麼 React和Vue的學習速率都高於Angular。

相對於 React,許多初學者認為Vue的學習成本更低,因為它提供了更加豐富的資源文件和中文支援。事實上,Vue和React學習速率的實際情況是大致相同的,由於大部分Vue的學習資料直接以單個Web應用程式的開發實踐開始,直觀且清晰的程式碼邏輯的確可以幫助初學者更快入門,但是,隨著學習內容的深入,當您需要開發複雜的Web應用程式時,花哨靈活的指令和邏輯反而會讓人覺得Vue比React更難掌控。

技術社群:React VS Vue

React是一個已經存在近十年的Facebook開源專案,因此它擁有更加成熟的技術社群支援。儘管 Vue 已經成功地在短短几年間吸引了相當多的追隨者,但在它真正建立出一整套完善且豐富的生態系統之前,仍需要更多人和時間的打磨。

當你看到許多使用Vue完成的專案時,你會注意到,其整體的設計理念更趨向現代化,這是因為 Vue 仍是一個相對較新的框架,比如,這個示例

眾多周知,React所包含的工具、元件庫和程式碼包的數量更多,但Vue靈巧、精緻和簡單卻更加令人印象深刻

安全性:React VS Vue

前端幾乎無安全可言!當然,這裡所指的安全性,僅僅是 React 和 Vue 這兩個框架之間的對比,相對於React,Vue更為小眾且不同,因此在面對大規模黑客攻擊的時候,React更容易成為目標。

Vue和React同樣都容易受到跨站點指令碼(XSS)攻擊,這也是Web應用程式中最為常見的安全漏洞。XSS攻擊允許攻擊者將客戶端指令碼注入到其他使用者檢視的網頁中,以影響其關聯的任何JavaScript Web應用程式。

PS:緩解此問題最佳方法是將資料儲存在指令碼之外,加入黑名單機制並從白名單中進行資料驗證。

靈活性:React VS Vue

這也是爭議最大的地方。React 專注於 UI,所以在構建 UI 元件時可以從它那裡獲得很好的支援。Vue作為一個漸進式框架,只允許使用最基本的功能來構建應用程式,但同時也提供了一些開箱即用的東西:如,用於狀態管理的 Vuex、用於應用程式 URL 管理的 Vue Router、Vue 伺服器端渲染。

Vue剝離了許多元素,相比之下React更加全面。但如果您正在尋找一種精簡、新穎、簡單易學、樣板程式碼少、高效能、靈活且完整的前端框架,Vue更加適合;當然,如果您打算使用低版本jQuery程式碼,Vue也同樣支援。

React的靈活性則更多依賴於其背後強大的技術社群,在 Facebook 的強力支撐下(Facebook 的 React 團隊包括了 10 名專職開發人員),提供了更多工具、UI庫和教程。

如果您的開發理念更趨向全棧文化、跨平臺、保持獨特、引領潮流而不是跟隨,那麼您一定會喜歡Vue;但如果您的專案需要大量熟練使用該框架的前端開發者、大量的工具及第三方庫,那麼您最好使用React。不過小孩子才做選擇,您最需要的應該是一個全面相容 Angular、React和Vue的前端開發工具包——WijmoJS

Vue的未來

截至2019年初,Angular、React和Vue之間的競爭持續升溫,越來越多的開發人員開始拋棄Google專案,就商業開發工具的提供者而言,Vue的未來一片光明。

為開發速度更快的 Web 應用程式而選擇了Vue的人有明顯的增長,Vue 很有趣,開發起來也很簡單。雖然,React依託於其龐大的生態圈,在目前為止,處理更復雜的 Web 專案時佔據優勢,但隨著前端社群內大量 Vue 追隨者的出現、Vue 社群穩定增長的良好氛圍,都在暗示著 Vue 很快就會變得像 React 一樣受歡迎。

Angular、React,還是Vue?

作者儘量保持著公正的態度,客觀地分析了上述三個前端框架,而作為前端開發者,面對 Angular、React 和 Vue,你會作何選擇?為什麼?如果您有任何問題或意見,歡迎在文末回覆討論。


相關文章