下載WijmoJS 最新試用版本

盡管 Web開(kāi)發(fā)的典型應(yīng)用場(chǎng)景除了將服務(wù)器用作平臺(tái)、瀏覽器用作客戶端之外，幾乎很少活躍于其他業(yè)務(wù)領(lǐng)域，但不可否認(rèn)JavaScript 語(yǔ)言和框架的使用已經(jīng)成為了主流。Angular、React 和 Vue，作為 JavaScript 的三大框架已逐步發(fā)展成熟，三者的差異性也越發(fā)明顯，假設(shè)JavaScript還會(huì)繼續(xù)流行十年左右，未來(lái)十年，你將會(huì)作何選擇？

Angular

AngularJS 自2009年誕生，至今已有十年歷史。在這短短十年中，其對(duì) Web 社區(qū)的發(fā)展產(chǎn)生了十分深遠(yuǎn)的影響。作為一款優(yōu)秀的 JavaScript 框架，在其推出一年后，便在全球引起了廣泛關(guān)注，如今更是在Google的 600 多款產(chǎn)品中得以成功運(yùn)用，如Firebase控制臺(tái)、谷歌分析、谷歌快車(chē)、谷歌云等。

AngularJS有著諸多核心特性，包含：MVC（Model–view–controller）、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴(lài)注入等。Angular 最新版 7.0.0 已于2018年10月發(fā)布，下一版本預(yù)計(jì)將于今年第二季度正式上線。以下是Angular 7 針對(duì)性能、命令行工具和Material Design組件的優(yōu)化項(xiàng)：

性能方面：Angular 7 新增的虛擬滾動(dòng)優(yōu)化了單頁(yè)面的呈現(xiàn)方式，對(duì)于那些吸引訪問(wèn)者繼續(xù)向下滾動(dòng)的clickbait網(wǎng)站來(lái)說(shuō)，這將派上大用場(chǎng)。Angular 7 的另一個(gè)性能亮點(diǎn)被稱(chēng)為Bundle Budgets，它用于預(yù)警開(kāi)發(fā)人員當(dāng)前使用的JavaScript包的大小，當(dāng)JavaScript 包超過(guò) 2MB 時(shí)開(kāi)始預(yù)警，在達(dá)到 5MB 后直接中斷生成。

（Angular 7 虛擬滾動(dòng)）

命令行提示：當(dāng)在CLI中鍵入某些命令，如 ng new 或者 ng add \@angular/material 時(shí)，Angular 7 會(huì)提示用戶，讓你找到像路由或SCSS支持之類(lèi)的內(nèi)置特性，從而簡(jiǎn)化編碼體驗(yàn)，幫助開(kāi)發(fā)者發(fā)現(xiàn)新功能或提供靈感。

視覺(jué)風(fēng)格：谷歌在Angular 7之前已于2018年更新了Material.io，用戶更新后會(huì)出現(xiàn)細(xì)微的視覺(jué)差異：如，UI結(jié)構(gòu)層次更為大膽、形狀的邊角更加圓滑，五種全新的 Icon 樣式，以及一個(gè)非常時(shí)尚且現(xiàn)代化的拖放模塊。

（Angular 7 拖放效果）

React

Angular的出現(xiàn)，在Web社區(qū)引發(fā)了強(qiáng)烈轟動(dòng)。兩年后，F(xiàn)acebook 也推出了一款同樣具備豐富功能的JavaScript UI組件庫(kù)——React。

使用React，意味著您將用一種更簡(jiǎn)約的方式開(kāi)始前端開(kāi)發(fā)，這也是大部分開(kāi)發(fā)人員所期待的：

• 沒(méi)有依賴(lài)注入
• 使用JSX（一種基于JavaScript構(gòu)建的類(lèi)似XML的語(yǔ)言），而非經(jīng)典模板，創(chuàng)建虛擬DOM
• 使用狀態(tài)管理setState和Context API
• XSS保護(hù)
• 用于單元測(cè)試組件的實(shí)用程序

不多，卻正好夠用，您完全可以根據(jù)自己的需要，自由添加任何組件庫(kù)，它們包括：

• 路由：React-router
• 獲取 HTTP請(qǐng)求：Fetch（或axios）
• 各種各樣的CSS封裝技術(shù)
• 用于單元測(cè)試的Enzyme

Google 和 Facebook 作為 Web 社區(qū)開(kāi)源項(xiàng)目的主要發(fā)起者，彼此之間從未停止過(guò)競(jìng)爭(zhēng)，尤其是關(guān)于 Angular 和 React 之間的辯論已經(jīng)持續(xù)了四年之久。但嚴(yán)格來(lái)說(shuō)，將Angular與React進(jìn)行比較并不完全公平，因?yàn)锳ngular是一個(gè)功能齊全、組件豐富的框架，而React只是一個(gè)UI組件庫(kù)。為了解決這個(gè)問(wèn)題，我們將就 Angular 框架中的一些常用組件庫(kù)與 React 進(jìn)行對(duì)比。

組件功能：React VS Angular

Angular提供了比React更多開(kāi)箱即用的功能，如：

• 依賴(lài)注入
• 基于HTML的擴(kuò)展模板
• 由 @angular / router 提供的路由
• 使用 @angular / common / http 的Ajax請(qǐng)求
• 用于構(gòu)建 @angular /forms 的表單
• 組件CSS封裝
• XSS保護(hù)
• 用于單元測(cè)試組件的實(shí)用程序

其中，依賴(lài)注入等功能作為 Angular 的核心，您無(wú)法選擇不使用它們，這好像一把雙刃劍，在帶來(lái)強(qiáng)大功能模塊的同時(shí)，也使得Angular 變得越來(lái)越笨重。

當(dāng)然，Google工程師已經(jīng)意識(shí)到了這個(gè)問(wèn)題，也在一定程度上致力于簡(jiǎn)化Angular框架的復(fù)雜性，希望在 Angular 8 中能讓人耳目一新。

Vue

在React 與 Angular孰優(yōu)孰劣的討論逐步升溫的時(shí)候，另一個(gè)JavaScript框架Vue抵達(dá)了現(xiàn)場(chǎng)，使得這場(chǎng)最優(yōu)Web開(kāi)發(fā)框架的角逐變得更加白熱化。

Vue.js 是由Google的核心開(kāi)發(fā)工程師——尤雨溪（Evan You）所創(chuàng)建的框架，作為一個(gè)比 React 和 Angular 都更年輕的框架，Vue 從它們那里借鑒了好的部分，即函數(shù)式和面向?qū)ο缶幊痰幕旌象w。2014年2月（在微軟收購(gòu)GitHub平臺(tái)四年之前），Evan You在GitHub上發(fā)布了第一個(gè)穩(wěn)定版本的Vue，標(biāo)志著一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 Web UI的漸進(jìn)式框架就此誕生。

盡管沒(méi)有得到谷歌和Facebook等科技巨頭的支持，但自2018 年以來(lái)，Vue一直受到開(kāi)發(fā)者的廣泛關(guān)注。從去年幾大主流前端開(kāi)發(fā)框架的熱度來(lái)看，大多數(shù)知曉 Vue 的開(kāi)發(fā)者都表示有興趣學(xué)習(xí)它。

也許，那些已經(jīng)熟練掌握Angular和React前端框架的開(kāi)發(fā)人員也應(yīng)該花些時(shí)間去了解一下這個(gè)簡(jiǎn)單、小巧、省心的前端框架，希望下面的內(nèi)容能對(duì)你有所幫助。

學(xué)習(xí)曲線：React VS Vue

如果前端框架的學(xué)習(xí)不包含TypeScript（即便 TypeScript 通常被認(rèn)為是JavaScript的增集，但要完全掌握仍需要學(xué)習(xí)額外的類(lèi)處理過(guò)程），那么 React和Vue的學(xué)習(xí)速率都高于Angular。

相對(duì)于 React，許多初學(xué)者認(rèn)為Vue的學(xué)習(xí)成本更低，因?yàn)樗峁┝烁迂S富的資源文檔和中文支持。事實(shí)上，Vue和React學(xué)習(xí)速率的實(shí)際情況是大致相同的，由于大部分Vue的學(xué)習(xí)資料直接以單個(gè)Web應(yīng)用程序的開(kāi)發(fā)實(shí)踐開(kāi)始，直觀且清晰的代碼邏輯的確可以幫助初學(xué)者更快入門(mén)，但是，隨著學(xué)習(xí)內(nèi)容的深入，當(dāng)您需要開(kāi)發(fā)復(fù)雜的Web應(yīng)用程序時(shí)，花哨靈活的指令和邏輯反而會(huì)讓人覺(jué)得Vue比React更難掌控。

技術(shù)社區(qū)：React VS Vue

React是一個(gè)已經(jīng)存在近十年的Facebook開(kāi)源項(xiàng)目，因此它擁有更加成熟的技術(shù)社區(qū)支持。盡管 Vue 已經(jīng)成功地在短短幾年間吸引了相當(dāng)多的追隨者，但在它真正建立出一整套完善且豐富的生態(tài)系統(tǒng)之前，仍需要更多人和時(shí)間的打磨。

當(dāng)你看到許多使用Vue完成的項(xiàng)目時(shí)，你會(huì)注意到，其整體的設(shè)計(jì)理念更趨向現(xiàn)代化，這是因?yàn)?Vue 仍是一個(gè)相對(duì)較新的框架。

眾多周知，React所包含的工具、組件庫(kù)和代碼包的數(shù)量更多，但Vue靈巧、精致和簡(jiǎn)單卻更加令人印象深刻。

安全性：React VS Vue

前端幾乎無(wú)安全可言！當(dāng)然，這里所指的安全性，僅僅是 React 和 Vue 這兩個(gè)框架之間的對(duì)比，相對(duì)于React，Vue更為小眾且不同，因此在面對(duì)大規(guī)模黑客攻擊的時(shí)候，React更容易成為目標(biāo)。

Vue和React同樣都容易受到跨站點(diǎn)腳本（XSS）攻擊，這也是Web應(yīng)用程序中最為常見(jiàn)的安全漏洞。XSS攻擊允許攻擊者將客戶端腳本注入到其他用戶查看的網(wǎng)頁(yè)中，以影響其關(guān)聯(lián)的任何JavaScript Web應(yīng)用程序。

PS：緩解此問(wèn)題的最佳方法是將數(shù)據(jù)保存在腳本之外，加入黑名單機(jī)制并從白名單中進(jìn)行數(shù)據(jù)驗(yàn)證。

靈活性：React VS Vue

這也是爭(zhēng)議最大的地方。React 專(zhuān)注于 UI，所以在構(gòu)建 UI 組件時(shí)可以從它那里獲得很好的支持。Vue作為一個(gè)漸進(jìn)式框架，只允許使用最基本的功能來(lái)構(gòu)建應(yīng)用程序，但同時(shí)也提供了一些開(kāi)箱即用的東西：如，用于狀態(tài)管理的 Vuex、用于應(yīng)用程序 URL 管理的 Vue Router、Vue 服務(wù)器端渲染。

Vue剝離了許多元素，相比之下React更加全面。但如果您正在尋找一種精簡(jiǎn)、新穎、簡(jiǎn)單易學(xué)、樣板代碼少、高性能、靈活且完整的前端框架，Vue更加適合；當(dāng)然，如果您打算使用低版本jQuery代碼，Vue也同樣支持。

React的靈活性則更多依賴(lài)于其背后強(qiáng)大的技術(shù)社區(qū)，在 Facebook 的強(qiáng)力支撐下（Facebook 的 React 團(tuán)隊(duì)包括了 10 名專(zhuān)職開(kāi)發(fā)人員），提供了更多工具、UI庫(kù)和教程。

如果您的開(kāi)發(fā)理念更趨向全棧文化、跨平臺(tái)、保持獨(dú)特、引領(lǐng)潮流而不是跟隨，那么您一定會(huì)喜歡Vue；但如果您的項(xiàng)目需要大量熟練使用該框架的前端開(kāi)發(fā)者、大量的工具及第三方庫(kù)，那么您最好使用React。個(gè)人開(kāi)發(fā)者可以根據(jù)自身喜好選擇前端框架，而對(duì)于企業(yè)來(lái)說(shuō)，與其為每次框架更新的兼容性問(wèn)題頭疼，不如直接上手一款全面支持Angular、React 和 Vue 的前端開(kāi)發(fā)工具，目前市面上有很多優(yōu)秀的工具可供選擇，如 WijmoJS和 SpreadJS 等。

Vue的未來(lái)

截至2019年初，Angular、React和Vue之間的競(jìng)爭(zhēng)持續(xù)升溫，越來(lái)越多的開(kāi)發(fā)人員開(kāi)始拋棄Google項(xiàng)目，就眾多優(yōu)秀的商業(yè)開(kāi)發(fā)工具提供者而言，Vue的未來(lái)一片光明。

為開(kāi)發(fā)速度更快的 Web 應(yīng)用程序而選擇了Vue的人有明顯的增長(zhǎng)，Vue 很有趣，開(kāi)發(fā)起來(lái)也很簡(jiǎn)單。雖然，React依托于其龐大的生態(tài)圈，在目前為止，處理更復(fù)雜的 Web 項(xiàng)目時(shí)占據(jù)優(yōu)勢(shì)，但隨著前端社區(qū)內(nèi)大量 Vue 追隨者的出現(xiàn)、Vue 社區(qū)穩(wěn)定增長(zhǎng)的良好氛圍，都在暗示著 Vue 很快就會(huì)變得像 React 一樣受歡迎。

Angular、React，還是Vue？

作者盡量保持著公正的態(tài)度，客觀地分析了上述三個(gè)前端框架，而作為前端開(kāi)發(fā)者，面對(duì) Angular、React 和 Vue，你會(huì)作何選擇？

WijmoJS | 下載試用

快如閃電，觸控優(yōu)先。純前端控件集 WijmoJS，為您的企業(yè)應(yīng)用提供更加靈活的操作體驗(yàn)，在全球率先支持 AngularJS，并提供性能卓越、零依賴(lài)的 FlexGrid 和金融圖表等多個(gè)控件，為您提供易用、輕松的操作體驗(yàn)，全面滿足開(kāi)發(fā)所需。