【译】前端框架技术选型 React vs. Vue (vs. Angular)

这是该系列文章的第2部分：“Fundbox的前端技术选型”。第1部分介绍了Fundbox的技术现状以及咱们从新设计它的动机。第2部分介绍了选择新框架背后的考虑：是迁移到React，Vue仍是Angular。第3部分描述了咱们如何从Angular迁移到Vue，同时保证咱们产品发展路线不受影响。javascript

Overview

从新考虑前端技术选型须要大量思考，讨论，决策，规划，管理和实施。咱们首先须要作出的决定之一是选择一个前端框架来从新设计咱们的产品。css

咱们研究了几个月来保证咱们得出一个的更好决策。进行讨论，创建概念证实，与其余公司相关经验的同事进行面谈，并阅读大量在线材料。html

在本文中，我将比较选型过程当中的入围者。咱们决定从如下几个框架中选出咱们的下一个基础框架：Angular，React和Vue。前端

目标

咱们的目标是构建一个全新的，现代化的，快速可靠的平台，为咱们当前和将来的全部前端应用程序提供服务。vue

候选框架

• React
• Vue
• Angular

Angular

Angular在咱们的选型过程当中被提早放弃了,主要因为如下两个主要缘由（更详细的推理能够在“Why move then?” 这里阅读）：java

1. Angular是咱们目前采用的框架，使用v1版本。Angular v2引入了许多改进，但它不向后兼容。这意味着升级到最新的Angular不亚于换到其余框架。这也致使了开发人员对这个框架失去了信心，使用Angular的想法在Fundbox乃至整个行业中大幅降低。react

2. Angular逐渐发展成为一个能够帮助构建复杂系统的大框架，但对于构建启动快速变化的UI却没那么有用。React和Vue更加轻量，组件化意味着小巧，自主，封装，所以易于重复使用。若是咱们从头开始开发新的基础架构（而不须要从现有基础架构迁移），咱们也能够考虑使用Angular。但在咱们的例子中，它不合适。jquery

不管如何，咱们正在重写咱们应用程序的重要部分，这是咱们学习新技术的绝佳机会。经过这种方式，咱们能够拓宽知识面，丰富开发人员的经验。git

React VS Vue

接下来留给咱们选择的就只有React和Vue了，咱们主要从如下几个方面对这两个框架进行对比：github

• 学习曲线
  拥有丰富开发经验人员学习框架是否足够简单？
• 代码风格
  框架的代码和约定的可读性和直观性如何？
• 单个文件组件
  在框架中浏览和维护组件有多直观？
• 性能
  使用框架构建的应用程序的性能如何？
  框架的大小和运行内存占用有多大？
• 灵活性
  框架提供了多少功能？
  有多少功能是强制性的？
  定制框架有多容易？
• 工具
  框架可用的工具备哪些？
  框架有多少稳定的插件？
• 移动端支持
  框架是否支持除Web之外的更多应用程序？
  它是否提供了构建Native应用程序的方法？
• 社区
  框架的社区有多大？
  社区是团结仍是支离破碎的？
• 成熟度
  框架有多成熟？
  它通过了多长时间的生产验证？
  它的将来发展路线是否清晰？
• 支持
  框架背后的团队有多大？
  是否有公司或组织负责该框架？
• 招聘人才
  聘请具备该框架使用经验的开发人员有多容易？

学习曲线

React

React官方文档提供了一些编写得很好的入门指南，并为新手提供了一个入门演练教程。具备一些前端框架经验的开发人员能够在几个小时内理解框架的核心原则。

官方的React文档很详细，但不像Vue的官方文档那样清晰有序。文档涵盖了必要的入门教程和核心概念等，但文档中缺乏介绍框架的边界。随着项目变得更大，这些边界可能转换为痛点。

React不是一个包含全部功能的框架。它的核心理念是精益，只关注于核心部分，其余功能经过引用第三方解决方案解决。这增长了学习曲线的一些复杂性，由于它根据您在整个过程当中对框架所作的选择而有所不一样。

Vue

Vue能够直接在HTML页面中经过资源的方式加载，只需几分钟，整个库无需构建即可以使用了。这让咱们能够在任什么时候候编写Vue应用程序。

编辑：感谢David Bismut指出React也有办法将其做为独立的JS文件添加到页面中，无需构建步骤：https//reactjs.org/docs/add-react-to-a-website.html

由于Vue借鉴了React和Angular的一些概念，开发人员更容易学习Vue。Vue的官方文档编写得很是好，甚至涵盖了开发Vue应用程序过程当中偶然发现的问题。

Vue的定义比React更严格; 这也意味着它更具稳定性。值得注意的是，在Vue中，许多问题直接在其文档中获得解答，而不须要在其余地方搜索。

代码风格

React

React引入了一系列基于函数式编程的概念，简化了开发UI优先应用程序的过程。最值得注意的是：

1. JSX，这是一种用JavaScript编写HTML的方法。JSX是React做为函数式编程的强大推进者的补充，具备重大意义。
2. 它的组件生命周期提供了一种直观的方式来链接组件“生命”中的特定事件（建立，更新等）

Vue

做为一个比React和Angular更年轻的框架，Vue从各个方面吸取了不少好的理念，混合了函数式和面向对象编程(OOP)。

默认状况下，Vue的编码风格在某些方面与Angular有点类似，但也消除了Angular的大部分痛点。Vue将HTML，JS和CSS分开，就像Web开发人员已经习惯了多年的编码风格。但假如你喜欢JSX这种风格，它也能够替换使用。因此它不会强制改变你的代码风格。

Vue对组件生命周期的考虑比React更直观。通常来讲，Vue的API比React更宽泛但更简单。

单个文件组件

React

使用JSX，React中的单个文件组件彻底是做为JavaScript模块编写的，意味着React具备编写HTML，CSS和JavaScript的特定方式。

全部功能采用JavaScript编写，意味着更少的bug，由于它减轻了在组件内部建立动态HTML的负担。做为替代，使用JSX时咱们可使用原生JavaScript生成模板。

也就是说，React的特殊语法须要更多的学习和练习才能在React中编写组件。

Vue

Vue中的单个文件组件分为三个独立的部分：<template>，<script>和<style>，每一个都包含相应类型的代码，所以Web开发人员感受更天然。

做为一个渐进式框架，Vue能够轻松定制。例如，做为可配置项，可使用JSX而不是<template>模板。 另外，另外一个例子，只需在<style>标记中添加lang =“scss”属性，就能够编写SCSS而不是纯CSS。相似地，经过将scoped属性添加到<style>标记，Vue组件将实现开箱即用的CSS（也称为CSS模块）。

性能

编辑：值得一提的是，性能有点难以衡量，由于它在很大程度上取决于您正在构建的特定应用程序，甚至更多取决于您如何构建它。

React

库大小（经过网络/未压缩）：32.5KB / 101.2KB

比较DOM操做，React的总体性能很是好。它比Angular快得多，但比Vue慢一点。

React提供了对开箱即用的服务器端渲染（SSR）的支持，而且可能对某些类型的实现颇有用。

内置支持bundling和tree-shaking，最大限度地减小最终用户的资源负担。

Vue

库大小（经过网络/未压缩）：31KB / 84.4KB

除了成为最快的Vue以外，Vue仍是一个渐进式框架，从头开始构建以逐步采用。核心库仅专一于视图层，易于获取并与其余库或现有项目集成。

与React相似，Vue内置了对bundling和tree-shaking的支持，可最大限度地减小最终用户的资源负担。

灵活性

React

React专一于UI，所以咱们能从它上面获取的最根本功能是构建用户界面。

更高级的功能不在React官方库的提供的功能范围以内，如状态管理。大多数React应用程序都使用Redux进行状态管理，MobX做为React伴侣也倍受关注。

甚至React路由器也不是官方软件包，而是由React团队支持的第三方软件包。

Vue

做为一个渐进式框架，Vue只容许使用其最基本的功能来构建应用程序，但若是须要，它还提供您开箱即用的大部份内容：用于状态管理的Vuex，用于应用程序URL管理的Vue路由器，Vue-SSR 用于服务器端渲染。

不管好坏，Vue比React更稳固。

工具

React

React有一个名为create-react-app的第三方CLI工具，可帮助在React项目中构建新的应用程序和组件。

CLI工具还支持运行端到端和单元测试，代码检查和本地开发服务器功能。

React为主要IDE提供了很好的官方和社区支持。

Vue

Vue有一个名为Vue CLI的官方CLI工具。与React的create-react-app很是类似，Vue CLI工具提供了新应用程序的支架。

此外，Vue对全部重要的IDE都有很好的支持（不如React，但支持WebStorm和VSCode）。

移动端支持

React

React有一个用于构建本机移动应用程序的端口，它被称为React Native，它是当前的“write once (in JavaScript), use many (in native iOS and Android)”的解决方案。

有大量的线上应用是使用React Native构建的。

Vue

对于Vue，构建Mobile Native应用程序的方式有不少种。不像React Native，使用Vue构建Native应用并无明确的引领者。

NativeScript是这些选项的领先者（它也是Angular的优先解决方案），除此以外还有Weex和Quasar。

社区

React

在StackOverflow中，有大约88,000个问题用#reactjs标记。 有超过40,000个npm软件包可供React开发人员安装。

在最新的前端工具调查中，超过40％的受访者表示他们对使用React感到满意。

在GitHub中，React repo拥有近100,000颗星。

React的社区确实更为庞大，但缺点是比Vue更加分散，并且很难找到常见问题的直接答案。

Vue

在StackOverflow中，有18,000个标记为#vue 有近10,000个npm软件包可供安装。

在最新的调查中，17％的受访者表示他们对使用Vue感到满意。但事实上，与React相比，对学习Vue感兴趣的开发人数增长了一倍，所以Vue开发人员的市场需求在将来可能会增加得比React更快。

GitHub中的Vue项目start数已经超过了100,000，超过了React。

因为其出色的文档，Vue开发中的问题的大多数答案能够当即在文档中找到，而且跟社区答案基本是一致的。

成熟度

React

React于2013年3月发布（撰写本文时为5年）。

据SimilarTech称，React正在被205,000个独立网站使用，每个月增加2.46％。

React在生产方面通过了很好的测试，超过了Vue。React创建了一个庞大的社区，这主要得益于其全部者Facebook的维护。

Vue

Vue于2014年2月发布（撰写本文时为4岁）。

根据SimilarTech，Vue正在被26,000个独立网站使用。每个月增加3.34％。

Vue在一年半前成为业界标杆并被普遍使用，包括一些大公司，如GitLab，阿里巴巴，百度等。事实证实，Vue的运转和更新都是稳定的。

支持

React

React是由Facebook建立和维护的框架。在Facebook，有一个团队按期支持React（React也被用于Facebook内的许多项目）。

据称，Facebook的React团队规模包括10名专职开发人员。但值得注意的是，Facebook研发部门的多个团队正在将React用于内部和外部项目，而且每一个团队均可以将变动请求推送到库中。

React不具备实际的路线图，基于RFC规则，具体解释在这里。

Vue

Vue是一个独立的库，由Evan You创立。他还负责管理Vue的维护及其路线图。

Vue团队规模包括23名专职开发人员。

Vue的高级路线图能够在他们的GitHub仓库中查看。

人才招聘

React

做为目前最流行的框架，若是React开发人员的市场中，React具备优点。

此外，经过学习React，开发人员的简历更具闪光点，由于他们很容易从这个流行框架中得到相关的宝贵经验。

Vue

Vue是前端行业的新“热点”。固然，炒做也有一些缺点，但Vue长期以来一直在得到稳定的牵引力，开发人员急于将Vue项目做为错失恐惧症-FOMO的一部分。如今，找到有Vue经验的开发人员并不难。

各自优势

React

• 行业标准。
• 受欢迎，熟练使用框架的前端开发工程师更多。
• 更容易招聘到优秀的工程师。
• 拥有强大背景的公司支持，更加安全的将来和稳定。
• 更庞大的社区，大量的工具和包。
• web和移动应用能够共享一些代码。

Vue

• 内置核心模块（Vuex，路由器等）而且运转很是棒。
• 面向“将来”，而不是“当前”。
• 更独特; 引领潮流而不是跟随它。
• 更快的上手，FED(前端开发)和BED(后端开发)都会在Vue代码中感受很天然，速度很快。
• 更好全栈支持; 容许跨产品开发。

各自缺点

React

• 保持FED和BED之间的界限; React须要学到不少才能成为专家。
• 须要更多的时间训练开发者。
• 交付较慢（至少对于全新启动的复杂项目来讲）。

Vue

• 走进一个更具实验性的土地，没有风险，但前卫。
• 更难找到经验丰富的Vue开发者。
• 可用的插件和工具更少，社区更小。
• 不像React，开发者没法得到最流行框架的相关经验。

更多

很长一段时间里，React和Angular是框架游戏中的主要参与者，而许多（不少！）框架每隔一天都会出现，并试图进入名人堂却没有成功; 除了-Vue。Vue之因此吸引人和受欢迎能够在文章，教程，POC和浏览器开发者社区的参考文献这几个方面看到。

React是行业中的潮流引领者和高级技能。React在今天是一个明确的引领者，不管是在行业使用上面仍是社区受欢迎程度。它很是受欢迎的，说实话，它的高地位是应得的。 React能够轻松构建复杂而直观的Web和移动应用程序，但它具备成本 - 框架复杂性和样例复杂。基础知识相对直观，但大型React项目每每变得复杂。社区中的碎片化也是它一大肯定。React引入许多新规范对其学习曲线有一些负面影响。

Vue更精简，是一个直接且新颖的框架，值得在舞台上占据一席之地，由于它很是简单易学，样例代码很是简单，性能高，灵活且完整。今天的许多网络应用程序可使用Vue比使用React更快地构建。Vue颇有趣，开发很简单。

最近前端社区内赞赏Vue的讨论在稳定的增加，意味着Vue将很快变得像React同样受欢迎。

参看资料

• How popular is VueJS in the industry? Will becoming a Vue expert be useful, career-wise? (Quora)
• Comparison with Other Frameworks (in Vue’s documentation)
• Vue.js or React? Which you would chose and why? (Reddit discussion)
• Choosing the Right JavaScript Framework for Your Next Web Application (Progress)
• Angular vs. React vs. Vue: A 2017 comparison (Medium article)
• Can Vue Fight for the Throne with React? (RubyGarage blog)
• React vs Vue.JS: Which Front-end Framework to Choose in 2018 (jetruby blog)
• Angular 5 vs. React vs. Vue (ITNEXT blog)

感谢阅读

原文： React vs. Vue (vs. Angular)