责任编辑最初正式发布于 Northell 博客,经原作许可由 InfoQ 英文站译者并撷取。
随著SNS媒体和使用者聚合内容的爆发式增长,网络正在向更快的方向产业发展。为了跟得上时代产业发展的脚步,提供更快的互动性,合作开发人员已经开始构筑库和架构来精简互动式公交站点的构筑。2006 年,John Resig 正式发布了 jQuery,使在 HTML 中撰写应用程序JAVA变得更为容易。随著时间的流逝,其他类似的工程项目出现了。刚已经开始,它们是两个巨大的乙烯,而且把工程项目的设想让渡给合作开发人员。现在,那些库已经已经开始向小型车轻量库转变,能极难地加进到任何人插件中。让他们来看看当中最畅销的三个。
JavaScript 架构概要
已经开始两个新项目总是要做许多决定。当中两个关键重大决策就是优先选择最合适的架构或库。幸运地的是,Vue.js 是两个机能十分多元化的库,能处理各式各样的各项任务。
Vue.js
Vue.js 这个库让你能将互动性和附带机能加进到任何采用 JavaScript 的标识符环境中。Vue 既能在原则上的网页上用来解决简单的各项任务,也能作为成熟的工业插件的基础。Vue.js 是两个用作构筑图形介面的高阶架构。它也能与一些现代工具和附带库一起,用作构筑复杂的双向插件。
Vue 库当中两个最大的缺点是它不须要任何人特殊科学知识。任何人 Vue 插件都是采用 HTML、CSS 和 JavaScript 撰写的——熟识那些辅助工具就能立即投入工作。即使你从前未曾做过应用程序合作开发,也能如前所述从前的 MVC 程序语言采用经验进行构筑,这种模式与 MVVM 十分相近。
React
借助于 React 库,他们能随心所欲地建立互动式介面。软件系统 React 时,不须要更动当前工程项目的标识符,它只负责图形介面,不会附加带来伤痛。
React 系统支持介面预览,使为插件建立强壮的模组化模块更为容易。React 库通过数据预览来实现大部分使用者界面维护工作,这对合作开发人员来说十分令人愉快(难怪它如此畅销)。
Angular
Angular 差不多是两个完整的合作开发环境。它包含一整套程序,包括 TypeScript 编译器、AOT 编译器和 Web 服务器。Angular 的 Web 服务器用作调试采用这个架构合作开发的公交站点。它是用同两个 Angular CLI 实用程序启动的,要启动 Angular CLI,你须要在 Windows 命令行中进入项目文件夹,并执行ng serve 命令。
Vue、React 和 Angular 的主要特征
React 最大的当中两个优势是:在稳定性和创新性之间做了很好的平衡,使使用者比较容易适应。这个原因以及其他一些原因使 React 保持了它的地位,并获得越来越多的人气。
angular%2Cangularjs
大小
合作开发架构的大小对未来应用的性能至关重要。架构和插件必须在插件已经开始正常工作之前加载。
在这方面,Angular 最复杂,有 143KB。React 次之,有 43KB,而 Vue.js 只有 23KB。除非你的应用特别大,并且包含了大量的模块,否则最好采用更小的结构。
性能
在 Web 工程项目中,性能与 DOM 密切相关:DOM 在浏览器 / 标识符中表示 Web 网页。在发生预览时,你能通过 DOM 控制 Web 网页。
Vue、React 和 Angular 的性能会因为各项任务的不同而有所差异,但在大多数情况下,它们都十分高效和快速。React 和 Vue 都实现了 DOM。得益于其精心设计的结构,Vue 提供了出色的性能和内存分配。这就是 React 和 Vue.js 优于 Angular 的地方:它们利用了虚拟 DOM——原始 DOM 的复本。
注意:DOM 是一种将 HTML 文档的内容表示为对象的方法。此外,还有两个用作管理指定对象的接口。DOM 分常规 DOM(也称为真 DOM)和虚拟 DOM。它们有什么区别呢?让他们来看两个例子。如果你想修改在 HTML 标签中找到的某些信息,算法将会这样做:真正的 DOM 将预览所有标签,直到它找到它须要的片段。在某些情况下,这会对性能和其他参数产生负面影响。虚拟 DOM 则只预览必要的 HTML 块。
社区
React 是世界上最流行的架构,这已不是什么秘密。它越来越畅销,因为它提供了真正的 Promise。React 的 Mental Model 看起来很可靠,其模块让建立介面变得更容易,API 灵活且富有表现力,整个工程项目给人的感觉是就应该那样。对 API 库的描述也友好,更容易给人留下良好的印象。
从那时起,React 库在基本概念和 API 方面就基本保持不变,但已经形成并产业发展出了一整套的科学知识和最佳实践,越来越多的人在采用它。Angular 因其缺点而备受赞誉,并拥有大量的社区支持。遗憾的是,尽管 Vue.js 有很多好处,但它并没有像它的竞争对手那样被合作开发人员所接受。
下面让他们从流行度和相关性两个方面比较下这三个架构:
GitHub:目前,Vue.js 是最流行的架构,尽管它是最年轻的,这意味着越来越多的工程项目将采用它。谷歌搜索:在谷歌搜索中,React 查询请求最多,紧随其后的是 Vue.js。目前最不畅销的是 Angular.js。Angular.js 的人气在下降,而 Vue.js 的人气却在上升。劳动力市场需求:大多数职位空缺与 React.js 有关,然后是 Angular,再然后才是 Vue.js。Vue、React 和 Angular:该选哪个?
为了选出最最合适的库,你应该首先仔细分析那些架构并理解自己的需求。无论是有许多依赖项的现有工程项目,还是你想采用熟识的库进行合作开发的新插件,Vue都不会给你带来任何人麻烦。你能继续采用 Bootstrap 或 Bulma 这样的 CSS 架构,保留为јQuery 或 Backbone 撰写的模块,软件系统你最喜欢的库执行 HTTP 请求,或采用 Promise 对象。
要已经开始采用 Vue 进行编程,你所要做的就是将 Vue.js 库连接到 Web 网页。不须要复杂的组装辅助工具!从头到尾合作开发两个原型只须要 1 到 2 周的时间,这让你能够尽早并经常地收集使用者反馈。Vue 2 引入了服务器端图形(SSR)支持。这让你能最小化初期的数据加载,并根据须要请求新的视图和资源。与高效的模块缓存相结合,能进一步减少流量消耗。
React库能够做一些令人惊叹的事情。因为整个介面都是用 JavaScript 定义的,所以你能采用 JavaScript 的丰富机能在模板中执行各种操作。你只会受到 JavaScript 特性的限制,而不会受到模板架构特性的限制。当你想到完全用 JavaScript 定义的视觉效果时,你可能会想到很多引号、转义字符和createElement调用。别担心,React 库允许你(优先选择性地)采用能与 JavaScript 标识符共存的 HTML-like JSX 语法定义可视元素。
React 与其他两个架构在以下理念上有所不同:
与其说它是两个架构,不如说它是两个库(最初是为了处理 UI 而建立的);因为它不受架构的限制,所以它的机能更多——更适合专业人士,而不是初学者;在 Angular 中许多能“开箱即用”的主要特性,在这里必须原则上连接(这种方法有缺点,也有缺点,对于初学者来说是缺点,因为须要做不必要的动作);更多地面向 JavaScript 而不是 TypeScript(尽管每个版本对 TS 的支持都在增加);更便于建立原生 Android 和 iOS 移动插件;拥有大量适用作各种场合的第三方库(多于 Angular)。Angular 已经被用在了许多规模最大、最复杂的 Web 插件中。
Angular 借鉴了服务器端合作开发中的一些最佳特性,并用它们来扩展浏览器中的 HTML 标记。这样,建立具有增强机能的插件就更简单随心所欲了。Angular 插件如前所述 MVC 程序语言构筑,这个模型致力于建立具有以下特征的插件:
易于扩展:如果你理解了基础科学知识,即使是最复杂的 Angular 应用,你也很容易就能够理解,这意味着你能很随心所欲地扩展应用来提供实用的新机能。易于维护:Angular 插件很容易调试,Bug 很容易修复,这意味着长期运行的 Angular 应用也很容易维护。测试辅助工具:Angular 有良好的 go mod 和端到端测试支持。因此,你能在使用者遇到之前找到并修复它们。标准化:Angular 如前所述浏览器的内部机能,不会给你的工作带来任何人阻碍。这让你能建立符合标准的 Web 插件,包含最新的机能(例如,各种 HTML5 API)、流行的辅助工具和架构。这是两个框架——这意味着它设定了建立 Web 插件的规则,在初始阶段设定了特定的架构,让初学者能少费脑筋。Angular 机能极多,如果须要附加的东西,能连接第三方模块。Vue.js VS React:双向数据绑定
在 Vue 中,你能随心所欲地将模块变量绑定到表单字段。当你更动变量时,表单字段会预览,当使用者更动表单字段时,模块变量也会预览。这比撰写 React 中的事件处理程序要容易得多。
此外,很多人喜欢用图表展示架构的畅销程度,当中 React 是 Angular 的 2 到 3 倍。它从建立移动插件(React Native)中获益颇多,因为与 Angular Ionic 相比,它更方便。至于 Web 插件(ReactJS)合作开发方面,一切就没那么简单了。
例如,对于 Web 插件,我发现,采用 Angular 比采用 ReactJS 更方便。
你能自己尝试并比较不同的方向或技术。为此,你能在谷歌趋势中输入一些关键字,它会为你画出漂亮的图表。
Vue.js vs React vs Angular
与之前的架构不同,Vue.js 是由两个人建立的,他认为 2013 年已经有的架构都太复杂。Vue 的第两个和第二个版本都是由两个人建立的,因此,在某些方面,它可能比竞争对手更糟糕,尤其是在安全方面。Vue 3 是由两个合作开发团队建立的,这意味着现在许多 Bug 和缺点都得到了修复,架构本身的效率也得到了提升。
我应该学习 React 还是 Angular?
最好同时学习 Angular 和 React。这两种架构各有优缺点。专家建议初学者首先学习 Angular,因为你所需的一切都是“开箱即用”的,这样更不容易犯错(架构会帮你控制)。在学习了 Angular 之后,你能学习 ReactJS 和 React Native。另外,如果你只须要移动应用,你也能直接跳到 React Native。事实上,你只须要学习架构的特性,仅此而已。其余的科学知识都是通用的(OOP、TypeScript、RP)。学习架构本身 1 到 2 周就足够了,你已经能建立简单的 Web 插件了。
结束语
显然,这三个架构都十分强大,但同时又很不一样。它们有自己的优势和劣势,没有两个通用的公式能用来决出两个绝对的赢家。选哪个架构好,要看你正在建立的插件和你的特定需求。在做决定之前有必要进行全面的研究。对于那些从事商业投资而不是单个工程项目的公司来说,这一点尤其重要。
原文链接:
https://northell.medium.com/react-vs-vue-vs-angular-what-to-choose-for-web-development-abc5565d3f11