「前端架构」React和Vue -CTO的选择正确框架的指南

快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务。然而，选择的范围很大程度上取决于几个因素，如项目时间、学习曲线、框架性能和团队规模。这篇文章旨在指导他们选择正确的javascript框架(或库):React vs Vue。

React vs Vue -选择正确框架的CTOs指南

这是一个值得你考虑的案例!

Rever Inc.，一家硅谷公司，在构建他们的最后一个MVP以前，将将近10,000行Angular.js代码移植到了Vuejs上。

好吧，他们须要使用的Angular版本的发布被延迟了，这是不可预见的，他们等不起，由于这会浪费时间和资源。

直接引用Luis Elizondo (Rever的工程总监)的话——

在为咱们评估正确的选择框架以前，我必须亲自动手，因此我给了React和Vue.js几天时间来回顾每一个不可能被谷歌回答的决策点。因为我对它们一无所知，在两天结束时，我将从新评估我在重写咱们将要迁移的实际项目的某些部分时走了多远。

在评估了两个框架以后，Luis和他的团队决定使用Vue，由于他们发现Vue比React更容易使用。

如今想象你本身处于一个相似的状况，你的1000个小时的努力都是徒劳的，这不是你本身的错。

考虑到项目的截止日期很紧，太多的产品经理和CTO落入了一个常见的陷阱——他们选择了一个让他们轻松开始的框架，而没有考虑框架随时间的影响。然而，他们很快就意识到最好事先评估用例并选择合适的框架，以免任何类型的问题。

在这篇博客文章中，我将比较React和Vue的几个因素，这些因素将帮助咱们评估须要的正确技术。

在进行深刻的比较以前，你能够先问本身一些问题，这样你就能够对这个问题有一个全面的了解。这些问题只是帮助你评估React和Vue之间正确框架的因素。

React vs Vue: CTO和项目经理的比较因素

• 代码有多干净和直观?

• 框架支持模块化吗?

• 开始使用这个框架有多容易?它是否支持JS导入?

• 框架的测试和调试方面有多好?

• 个人队友和我可以轻松地学习这个工具吗?

• 框架在性能方面是如何脱颖而出的?

• 从项目开始算起，在5-10年以上的时间里，这些代码会给我带来更多的麻烦吗?或者在那些年里，我将被一个几乎没法维护的遗留应用程序所束缚?

• 框架支持服务器端呈现吗?

• 框架适合轻量级仍是重量级应用程序?

• 这些框架的顶级实用程序是什么?何时使用它们是正确的选择?

如今你有了问题，让咱们经过将这些因素与React和Vue并置来深刻研究问题的实质，了解它们的区别。

React和Vue的代码质量比较代码有多干净和直观?

首先:可以让您快速浏览大型项目代码的框架应该是理想的选择。

显然，对于许多CTO和项目经理来讲，一切都归结为“代码经过测试的速度有多快，以及这些测试如何处理类型”。

请注意，要提升代码质量，还有不少事情须要考虑。例如，单元测试、linting和类型检查是个人团队和我在Simform积极执行的事情。

我不会在这里拐弯抹角地提到全部这些实践。由于我相信类型检查确实能提升代码质量，因此让咱们比较一下Reactjs和Vuejs，看看它们是否支持任何方式的类型检查。

React的静态类型检查

React确实利用了JavaScript ES6基础做为代码语法，可是它是否支持编译时的类型检查之类的功能呢?

嗯，是的!

你能够用Flow来作静态检查，它是Facebook开发人员开发的TypeScript的替代品。它容许您向代码中添加类型，而后在构建(编译)时删除它们，以保留正常的Javascript代码。

[注:若是你喜欢TypeScript，但仍然想使用React，那么你最好去，由于TypeScript对JSX有很好的支持，这可能就是微软在最新版本的office中使用它的缘由]

Vue中的静态类型检查

Vue还利用Javascript ES6语法来编写代码。然而，当涉及到静态类型检查时，在Vue中使用Typescript就不是那么简单了。有一些课程是关于如何将Typescript和Vue一块儿使用的，可是在复杂的项目中是否值得考虑仍然不清楚。

幸运的是，您能够将flow与Vue集成并启用静态类型检查。

React和Vue的模块化

框架支持模块化吗?

根据模块化原则，您的应用程序必须划分为独立的模块，每一个模块表明单一的目的或功能。这一原则也被称为单一责任原则。

“作一件事并把它作好”——Unix哲学

让咱们用一个简单的现实生活用例来理解模块化:

假设您的代码库包含一组专门为API编写的服务。如今，若是您的客户端须要您从应用程序中删除整个API功能，重要的是您要将这些服务保存在一个单独的模块中，以便在不破坏应用程序的状况下轻松删除这些服务。这就是您须要框架中的模块化的地方。模块化使得在应用程序很大的状况下，能够很容易地插入新特性，而更复杂的特性应该随着版本的每次更改而迭代。

模块化的React

在React中，应用程序的每一个部分都要处理组件。

在React中支持模块化的一种理想方式是确保应用程序的每一个组件在理想状况下只作一件事。即便组件在增加，更好的方法是将其进一步分解为更小的子组件。

经过将代码库分割成小的、自包含的块，它使React应用程序开发比Angular更直观。您能够单独开发和测试模块，这使得添加特性和识别错误变得更容易。

模块化的Vue

Vue利用了“单文件组件”的概念。这彷佛是在分离关注点方面的权衡，由于您的脚本、模板和样式将在一个文件中，但在三个不一样的有序部分中。

学习曲线- React和Vue

我和个人同事可以轻松地学习这个工具吗?

React的学习曲线

我观察到许多开发人员声称，若是使用Vue，他们在React中所作的事情会更好、更容易。可是全部这些声明对我来讲都没有意义。对我来讲，Vue更像是一个简单的JavaScript，还有一些新的想法，单向数据流、组件和事件驱动的模型。

Vue的学习曲线

在学习曲线方面，Vue赛过了其余Javascript框架。您只须要一些像样的JS技能或对ES6的良好理解就可使用Vue。总的来讲，即便使用文档自己，学习起来也容易得多。

开发者友好性和易用性

开始使用这个框架有多容易?

当涉及到开发时，框架应该更容易启动。比较Reactjs与Vuejs或任何其余框架的一种方法是，肯定在有项目需求时启动它们的容易程度。

要为您的项目选择正确的框架，您须要肯定您和您的团队想要在JSX仍是HTML上工做。为了给您一个初步的概述，我想强调一下，基于标准HTML模板和组件的框架一般易于结构和代码重用。然而，新开发人员更有可能发现难以处理JSX。

React:开发者友好性和易用性

React但愿您构建组件而不是模板，由于组件是最可重用的，而且对单元测试友好。它依赖于JSX, JSX容许您混合UI模板和JavaScript。可是在一天结束的时候，你会以为你是在Javascript上工做。使用JSX能够极大地促进开发，由于它容许React显示更有用的错误和警告消息。

因为UI和JS代码不能在React中分离，因此关于样式的使用只有一个问题。

说到风格，你有多种方法来开始:

• 使用webpack提取您的导入' my '.css语句转换成样式表

• 或者使用 “CSS in JS”库

当涉及到React项目时，它更像是一个狂野的西部，您拥有一个庞大的库和工具生态系统来补充您的应用程序。就我我的而言，我真的很喜欢这样，可是对于开发者来讲，若是他们有不少选择的话，作出正确的选择并不老是那么容易。此外，React没有明确的规则或规章。每次应用程序的体系结构必然要改变时，您都必须选择不一样的内容。这使得事情的范围很容易出错。

Vue:开发者友好性和易用性

Vue被称为“进步web框架”是有缘由的，由于有不一样的特性会影响正在开发的应用程序的大小。Vue还提供了一个CLI和与webpack等构建工具集成的包。在这种环境中编写组件的最首选方法是单文件组件，即带有模板、脚本和样式标记的文件。

我过去与几家公司合做过，当被问及选择Vue的缘由时，他们给出的理由只是他们的开发人员以为Vue更容易学习。Vue减小了初级开发人员和高级开发人员之间的差距，从而使他们在项目中很好地协做。它甚至对项目也有好处，由于它完成时bug更少，投放市场的时间更短。

测试和调试

框架的测试和调试方面有多好?

在React中测试和调试

测试:Facebook推荐Jest来测试React代码。下面是Jest和Mocha 的比较——还有一篇文章是关于如何在Mocha 中使用Enzyme 的。Enzyme 是Airbnb使用的一个JavaScript测试工具(与Jest、Karma和其余测试运行程序一块儿使用)。若是您想阅读更多内容，这里有一些关于在React中进行测试的老文章(这里和这里)。

Vue的测试和调试

测试:目前，Vue缺少任何重要的测试指导，但Evan在他的2017预览中写道，团队计划在这方面工做。他们建议使用Karma。Vue与Jest一块儿工做，还有Vue test Utils.。

调试:与调试任何其余web应用程序同样，Vue中的调试变得更加容易。您能够利用开发工具、断点、调试器语句等来调试应用程序源代码。还有这个vVue.js devtools ，这样您就能够轻松地调试Vue应用程序。

在React和Vue中支持服务器端呈现

框架支持服务器端呈现吗?

若是web应用程序的目标是优化高搜索引擎，服务器端呈现是一个基本要求。因为任何多页面应用程序均可以由几个较小的spa组成，所以框架拥有这个选项是一个重要的标准。

如下是AirBnB的开发团队对服务器端渲染的见解:

首先，与客户端呈现相比，服务器端呈现具备更好的用户体验。用户获取内容的速度更快，当JS失效或禁用时，网页更容易访问，搜索引擎也更容易索引它。

React中的服务器端呈现

目前，React缺少关于***的官方文件。React API支持一个名为ReactDOMServer的对象，当您但愿以HTML代码的形式显示组件时，该对象很是方便。此外，学习如何使用诸如React Router和Redux这样的库，以便在没有任何问题的状况下执行服务器端呈现，也是很重要的。React团队宣布官方支持将很快发布。还有一个框架能够用来建立一个React ***应用程序，叫作Next.js。所以，React启用了***，但没有官方支持，而且使用了额外的第三方包。

Vue中的服务器端呈现

还有一个官方发布的Vue.js指南，用于构建在服务器上呈现的Vue应用程序。该指南放置在一个特殊的领域，与Vue文档分开。它很是详细，而且假设用户已经熟悉Vue，而且对Node.js和Webpack有必定的了解。此外，文档引用了 Nuxt.js，是社区发布的框架，是Vue中对***的更高层次的解决方案。它提供了某些附加特性，可是，它限制了开发人员对应用程序结构的直接控制。

Reactjs与Vuejs中的代码可维护性

从项目开始算起，在5-10年以上的时间里，这些代码会给我带来更多的麻烦吗?

几年前，个人一个客户要求转移到一个框架，以便如今和未来的开发团队可以围绕代码工做。很明显，对于他们来讲，拥有一个高可维护性的框架是多么重要。在比较框架时，代码的可维护性应该是最重要的方面之一。

也就是说，如今让咱们比较一下在代码可维护性方面React和Vue是如何结合在一块儿的。

React的可维护性

至于React，虽然通往0.14系列的道路也很坎坷，但从React 15开始，Facebook开始以一种更负责任的方式专一于作出突破性的改变。即将到来的破坏性更改如今会在您的应用程序中发出弃用警告，并给您时间迁移到新的api。

当前的稳定版本(第16版)改变了一些核心的生命周期方法，但也正式稳定了一些长期使用的“实验”api，这意味着在达到这一点后，将来的更新会更容易。

因为React在工具上的反应更轻，虽然一些破坏性的更新能够自动化，但不是全部事情均可以。这意味着一些更新可能会比其余的更痛苦，尽管在核心库中的改进一般是值得的。

React的一个明显的烦恼是，旧版本文档的删除，使得现有(和潜在的将来)项目的维护更加困难，除非您保持最新。

Vue的可维护性

考虑到Vue的增加速度，决定Vue是否能够用做长期运行的框架将是将来的事情。我不会详细介绍这个方面，可是有一篇有趣的文章是关于Vue的可维护性因素以及它是如何应对的。

React vs Vue -性能和内存消耗

框架在性能方面是如何脱颖而出的?

说到性能，我想用这个简单的一行代码来讲明个人状况:

“每一个框架的绩效评估都很重要，它绝对应该是评估一个框架的重要前提指标。””

若是你还想知道这些框架在性能方面的突出之处，那么你能够经过这个综合的研究，在DOM操做的基础上对Reactjs和Vue的性能和内存消耗进行基准测试。这项研究是使用一个基准工具执行的，该工具测量了使用这些框架完成大量DOM操做事件所需的时间。

对React和Vue的性能进行基准测试

基准测试研究中包含的DOM操做基于研究这些框架在操做表行方面的性能。对这一行进行的操做是:

• 向表中添加10行，

• 向表中添加1000行，

• 每隔10行更新一次表，

• 在表中选择一行，而且

• 从表中删除一行

当涉及到React和Vue的内存评估时，该研究利用了Chrome Profiler，它可让你对网页的JavaScript堆进行快照。

拍摄了两个快照来演示在如下时间的内存使用状况:

• 在执行任何操做以前加载页面

• 在表上执行5个添加十、5个添加1000和5个更新操做以后

研究结果以下:

React性能和内存消耗

性能:如图所示，当DOM更新愈来愈大，须要更新更多数据时，React的虚拟DOM彷佛得到了回报。这就是大多数React出现的性能问题。React在删除和添加1000指标上的性能最好。

内存消耗:React的初始内存占用与Angular很是类似。从初始状态8.3 MB的内存消耗到DOM操做以后15.1 MB的内存消耗，您能够看出响应DOM操做操做的计算开销至关大，但它们仍然能够。

Vue性能和内存消耗

性能:在大多数状况下，Vue的性能与React同样好，好比添加十、更新和选择指标，极可能是这样，由于Vue还利用虚拟DOM来操做操做。

Vue在性能方面反应滞后的惟一区别是增长了1000个指标，这是由于DOM操做操做数量的增长。

内存消耗:Vue在初始状态时的内存占用是7.6，考虑到它是纯JavaScript语言，这比React和Angular都要好。然而，一旦执行了DOM操做，这个值就会增长到16.1，这比React和Angular都要大。

可扩展性——Reactjs vs Vue

框架是否足够成熟，能够构建可伸缩的应用程序?

当谈到可伸缩性时，惟一重要的是您的解决方案如何处理请求的累积数量，以及在负载忽然达到峰值时它的显著行为是什么。因为大多数基于JavaScript的web应用程序都是为大量用户设计的，所以评估您选择的解决方案是否具备可扩展性就变得很是有意义。话虽如此，让咱们看看React和Vue是否知足可伸缩性预期。

React构建可伸缩的web应用程序

React只是一个用于在页面上建立和呈现可重用组件的库——您仍然须要收集一堆其余库来将它们组合在一块儿(路由、HTTP请求等)。

web应用程序中的可伸缩性问题主要归结为代码组织得有多好、技术债务的数量以及web应用程序如何做为一个总体进行架构设计。

根据我我的与数千个客户打交道的经验，我发现像Angular这样的框架绝对是可扩展的，由于开发人员从一开始就倾向于遵循这种设计模式。

不要误解个人意思，我喜欢React，可是若是一个React应用程序从一开始就没有通过很好的考虑，它可能会很快失控(好比不少意大利面条式的代码)。我曾经有一个客户为React编写了一个自定义类模块的特性，浏览他们的代码很是愉快。

也就是说，React仍然能够用于构建可伸缩的web应用程序，但只有在从一开始就考虑可伸缩性时才会考虑。

Vue用于构建可伸缩的web应用程序

做为轻量级的JavaScript库，Vue只适合于较小的应用程序。它不适用于构建可伸缩的应用程序。

React vs Vue:应用程序大小

框架适合轻量级仍是重量级应用程序?

在为大型应用程序选择框架时，最重要的是一致性和架构决策制定。在大型应用程序中，明智地选择框架是相当重要的。不然，转换将是一个巨大的痛苦。

所以，让咱们探讨一下React和Vue的框架大小以及它们的大小对您业务的软件开发项目的影响。

React

框架/库的大小会对软件开发项目产生重大影响。React大小约为100kb，很是适合轻量级应用程序。此外，React还须要其余库对特定任务的支持，其中一个任务就是路由。它的小尺寸很是适合轻量级应用程序。

Vue

Vue是其余框架和库中最小的。它的大小大约为80kb。它甚至比反应还要小。Vue很是适合开发轻量级应用程序。若是您须要一个小于Vue的库，那么您应该选择Preact。

React vs Vue -在哪里使用什么?

这些框架的顶级实用程序是什么?何时使用它们是正确的选择?

如今咱们已经评估了几乎全部必要的因素，让咱们探索您的项目的React和Vue的最重要用例。它将帮助你选择正确的一个，从而避免没必要要的成本。

React

我认为React是构建静态网站的最佳选择。您所须要作的就是使用renderToStaticMarkup呈现组件，并将呈现的有效负载发送给客户机。

此外，选择React开发小而简单的应用程序可能并不过度，由于它是为大型web项目建立的。。尽管React须要大量样板代码来设置一个工做项目，但从长远来看，它的架构是值得的。

JSX提供了JavaScript的所有功能(如流控制)和高级IDE特性(如组件视图模板中的自动完成)。

React vs Vue:对照表

Reactjs vs Vue:选择正确框架的专家意见

我快速接触了一些Javascript专家和CTO，询问他们对于在React和Vue中选择一个框架的见解。我感谢@KentCDodds和@TomGoldenberg对这篇博客所作的宝贵贡献。

咱们问了他们一些问题，如下是他们对这场辩论的见解:

Thomas Goldenberg，突击队首席技术官你对著名的“React vs Angular vs Vue”辩论有什么见解?

我用的是React和Angular，不是Vue。但我不会在这方面投入大量资金，由于我以为它的应用不如另外两种那样普遍。因为有了React和Angular，我确定以为React对代码更直观。也就是说，Angular一直在进步，TypeScript也获得了不少支持。

若是有机会构建一个社交网络应用程序，你会选择哪一种框架(或语言)?

Social意味着许多链接，这将使React - GraphQL成为一个很好的组合。这将有助于准备全部链接数据。

若是有机会构建基于企业的电子商务web应用程序(有将来迭代的可能性)，您会选择哪一种框架(或语言)?有什么特殊的缘由吗?

对于电子商务网站应用程序，我会使用Next.js，由于服务器端呈现对许多电子商务网站来讲很重要，在这些网站中，每一个列表都必须是可索引和可搜索的。接下来真是太棒了，时代周刊的团队也让人印象深入。

若是有机会构建一个基于内容的平台，站点结构不会发生变化，您会选择哪一种框架(或语言)?

我也会用Next.js，由于基于内容的平台须要有好的SEO和索引。

Kent C. Dodds, PayPal软件工程师，Javascript/ React专家当你在React、Angular或Vue(或其余几个)中选择一个合适的框架(或语言)时，你会考虑哪些方面?

全部这些框架在功能和性能方面都很是类似。与其余框架相比，我更喜欢React是有一个缘由的，这个缘由是我相信它在概念上比其余框架更简单，而其余框架会使应用程序更具可维护性和更容易测试。与其余缘由相比，最重要的考虑是我在一个给定的框架下会有多有效，而React对我来讲绝对是最好的一个。

若是有机会构建一个社交网络应用程序，你会选择哪一种框架(或语言)?

若是我有足够的时间去学习，我可能会尝试使用ReasonML做为语言，而ReasonReact做为框架。若是我须要快速完成它，那么我确定会使用JavaScript(加上用于静态类型的Flow)并对框架作出反应。

若是有机会构建基于企业的电子商务web应用程序(有将来迭代的可能性)，您会选择哪一种框架(或语言)?有什么特殊的缘由吗?

若是我有足够的时间去学习的话，我仍然更喜欢使用合情合理的语言和合情合理的框架。若是试验和学习的时间更少，我宁愿使用Javascript(加上用于静态类型检查的Flow)并做为框架来响应。

若是你的开发团队并不精通Javascript，你会选择哪一种框架(或语言)?

我确定会选React。缘由是，我认为一个开发团队虽然不精通JavaScript，但构建web应用程序时确定应该学习JavaScript，而能教他们最好的JavaScript框架是React。其余框架在隐藏JavaScript方面作得至关好，你最终会编写比JavaScript更多的框架代码，这在一开始看起来彷佛是正确的，但从长远来看，团队最好仍是好好学习JavaScript。

结论

React或Vue或任何其余基于Javascript的解决方案就它们本身的用例而言都很是酷。我想说，没有最好的解决办法。最好由您来肯定您的用例，并将其映射到这些框架的各个方面。

为了让事情更简单，我总结了用例和React和Vue之间推荐的解决方案(不老是):

• 若是你喜欢摆弄大量的libary、工具或生态系统，那么选择React

• 若是你是一个“JS迷”，而且讨厌把你的UI和代码分开——选择React

• 若是你喜欢编写干净和简单的代码——选择Vue

• 若是你想尽快开始你的项目，选择Vue

• 若是您是一个没有团队的单独开发人员，请选择Vue(或React)

• 若是您但愿开发可伸缩的应用程序，而不为测试和调试带来任何麻烦，请选择React

• 若是您想在您的项目中更好地分离关注点，请选择Vue

• 若是你喜欢玩Javascript而且接受应用状态变化的概念-选择React(或Vue)

• 若是你要创建任何复杂的应用程序，有更好的上市时间-选择React

那么你对React vs Vue的比较有什么见解，请在评论中告诉我。