angular,react & vue

·  阅读 1213

本文当时写在本地,发现换电脑很不是方便,在这里记录下。

angular,react & vue

2018/07/23

2016年,对于JavaScript来说辉煌的一年。开发框架大量涌入,让开发者有了更多的选择。到了2018年就目前火热程度来说,angularreactvue 仍占据着主流地位。

对比这3个框架,孰优孰劣真的会让选择困难症的人头痛不已。

参考本文,希望会对你有所帮助。

库 or 框架

被设计来执行一些特定的任务,而且通常并不复杂。因此,如果我们使用库来构建我们的应用程序,那么我们需要为每个任务选择一个库,以及设置任务运行者。

库的主要优点是我们可以完全控制应用程序。但问题是建立该项目需要更多的时间。

框架

被设计用于执行更复杂的事情。因此,如果我们使用框架,那么它会自动为我们解决很多问题。每个框架都有一个预定义的设计或结构,包括许多库和设置跑步者。

框架的主要优点是开发过程要快得多,因为它包含了我们执行不同任务所需的所有可能的库。但是一个框架比图书馆有更严格的设计。

需要库/框架?

库是我们需要的,不依赖库的人,太强大,不做讨论。

虽然无框架也是可以正常工作的,但是这是有代价的。

对于一个项目,它是由开发周期的,俗称的小项目,即开发周期短,那么添加框架反而是多余;相反开发周期长,那么一个好的框架将会更加的合适。

当然,如果你是一个有着深厚技术和经验的人,确实可以坦诚的不使用框架。但你团队的其他成员呢?你手下的那些人呢?或者当你的决定把你自己陷入困境的时候呢?这种情况下,我们将会看到一个不用框架的团队在展开冒险,最后他们会发现自己创建了一个需要自己着手维护的框架。

历史

Angular

将自己描述为“超级厉害的 JavaScript MVW 框架

现在所说的angular通常指的是 angular2+,特质 angular1代会说明 angular1(2010年10月发布)。

由 Google 进行开发和维护 ,2代发布于2016年9月,现在主要是angular4。

遵守 MIT license

优势:

  1. angular最大的优势在于它的流行程度,虽然在国内 react 和 vue 更加的火热。
  2. 对于用户来说它有一套用于构建用户界面的丰富组件
  3. 鉴于国人多数使用的是angular1.x ,它在api上比较全面,功能比较完善

React

将自己描述为 “用于构建用户界面的 JavaScript

由 Facebook 进行开发和维护,发布于2013年3月。

开始遵守 BSD3-license(证书说明:Facebook 的专利授权是在保护自己免受专利诉讼的能力的同时分享其代码。有些人声称,如果你的公司不打算起诉 Facebook,那么使用 React 是可以的 )

后期更改蹲守 MIT license

优势:

  1. React + Redux 模式在于它们相对简单和专注,做一件事情并把它做好 是非常困难的,但这两个库都很有效地完成了它们的目标
  2. 组件发生变化,它会以该组件为根,重新渲染整个组件子树

Vue

2014年还没有人听说过vuejs,但是在2015年已经开始和angular,react相提并论,脱离了小众型的框架。2016年发展最迅速的js框架之一

将自己描述为“用于构建直观,快速和组件化交互式界面的 MVVM 框架

由 Google 前员工 Evan You 发布,时间2014年2月,2016年版本2发布。

遵守 MIT license

优势:

  1. 一个简洁而且合理的架构,使得它易于理解和构建(国内的文档丰富清晰,有一个强大的充满激情人群的社区,这为 vue.js 增加了巨大的价值,使得为一个空白项目创建一个综合的解决方案变得十分容易)
  2. 使用基于依赖追踪的观察系统并且异步更新,左右的数据变化都是独立触发

发展

Angular 和 React 得到了诸如 Facebook ,Google,Whatsapp 等大公司的支持和使用。目前,Google 在他们的很多项目中使用Angular,例如 AdWords UI(用Angular和Dart实现)。

Vue 主要用于小型项目的个人。阿里巴巴,百度,Expedia,任天堂,GitLab 使用 — 可在 madewithvuejs.com 找到一些小型项目的列表。

比较

1. 组件

一个组件得到一个输入,并且在一些内部的行为/计算之后,它返回一个渲染的 UI 模板(一个登录/注销区或一个待办事项列表项)作为输出。定义的组件应该易于在网页或其他组件中重用 。

React 和 Vue 都擅长处理组件:小型的无状态的函数接收输入和返回元素作为输出。

2. Typescript,ES6 与 ES5

Angular 依赖于 TypeScript

React 专注于使用 Javascript ES6

Vue 使用 Javascript ES5 或 ES6

与整个 JavaScript 语言相比,TypeScript 的用户群仍然很小。一个风险可能是你正在向错误的方向发展,因为 TypeScript 可能 - 也许不太可能 - 随着时间的推移也会消失。此外,TypeScript 为项目增加了很多(学习)开销 - 你可以在 Eric ElliottAngular 2 vs. React 比较 中阅读更多关于这方面的内容。

3. 模板 —— JSX 还是 HTML

几十年来,开发人员试图分离 UI 模板和内联的 Javascript 逻辑,但是使用 JSX,这些又被混合了 。

JSX 是一个类似 HTML 语法的可选预处理器,并随后在 JavaScript 中进行编译。JSX 有一些怪癖 —— 例如,你需要使用 className 而不是 class,因为后者是 Javascript 的保留字。JSX 对于开发来说是一个很大的优势,因为代码写在同一个地方,可以在代码完成和编译时更好地检查工作成果。当你在 JSX 中输入错误时,React 将不会编译,并打印输出错误的行号。

JSX 意味着 React 中的所有内容都是 Javascript -- 用于JSX模板和逻辑

Angular 模板使用特殊的 Angular 语法(比如 ngIf 或 ngFor)来增强 HTML。虽然 React 需要 JavaScript 的知识,但 Angular 会迫使你学习 Angular 特有的语法

Vue 具有“单个文件组件”。这似乎是对于关注分离的权衡 - 模板,脚本和样式在一个文件中,但在三个不同的有序部分中。

4. 性能

Angular 是一个框架而不是一个库,因为它提供了关于如何构建应用程序的强有力的约束,并且还提供了更多开箱即用的功能。Angular 是一个 “完整的解决方案” - 功能齐全,你可以愉快的开始开发。你不需要研究库,路由解决方案或类似的东西 - 你只要开始工作就好了。

React 和 Vue 是很灵活的。他们的库可以和各种包搭配。 灵活性越大,责任就越大 - React 没有规则和有限的指导。每个项目都需要决定架构,而且事情可能更容易出错。

Vue 似乎是三个框架中最轻量的。 源代码非常易读,不需要任何文档或外部库。

5. 状态管理

React 经常与 Redux 在一起使用。Redux 以三个基本原则来自述:

  • 单一数据源(Single source of truth)
  • State 是只读的(State is read-only)
  • 使用纯函数执行修改(Changes are made with pure functions)

换句话说:整个应用程序的状态存储在单个 store 的状态树中。这有助于调试应用程序,一些功能更容易实现。状态是只读的,只能通过 action 来改变,以避免竞争条件(这也有助于调试)。编写 Reducer 来指定如何通过 action 来转换 state。

Vue 可以使用 Redux,但它提供了 Vuex 作为自己的解决方案。

6. 数据绑定

React 和 Angular 之间的巨大差异是 单向与双向绑定

当 UI 元素(例如,用户输入)被更新时,Angular 的双向绑定改变 model 状态。React 只有一种方法:先更新 model,然后渲染 UI 元素。Angular 的方式实现起来代码更干净,开发人员更容易实现。React 的方式会有更好的数据总览,因为数据只能在一个方向上流动(这使得调试更容易)。

最后,Vue 支持单向绑定和双向绑定(默认为单向绑定)。

7. 其他的编程概念

Angular 包含依赖注入(dependency injection),即一个对象将依赖项(服务)提供给另一个对象(客户端)的模式。这导致更多的灵活性和更干净的代码。

(MVC)将项目分为三个部分:模型,视图和控制器。Angular(MVC 模式的框架)有开箱即用的 MVC 特性。React 只有 V —— 你需要自己解决 M 和 C。

8. 灵活性与精简到微服务

你可以通过仅仅添加 React 或 Vue 的 JavaScript 库到你的源码中的方式去使用它们。但是由于 Angular 使用了 TypeScript,所以不能这样使用 Angular。

现在我们正在更多地转向微服务和微应用。React 和 Vue 通过只选择真正需要的东西,你可以更好地控制应用程序的大小。它们提供了更灵活的方式去把一个老应用的一部分从单页应用(SPA)转移到微服务。Angular 最适合单页应用(SPA),因为它可能太臃肿而不能用于微服务。

9. 体积和性能

Angular 框架非常臃肿。gzip 文件大小为 143k,而 Vue 为 23K,React 为 43k。

为了提高性能,React 和 Vue 都使用了虚拟 DOM(Virtual DOM)。

img

Vue 有着很好的性能和高深的内存分配技巧。如果比较快慢的话,这些框架都非常接近(比如 Inferno)。请记住,性能基准只能作为考虑的附注,而不是作为判断标准。

10. 测试

Facebook 使用 Jest 来测试其 React 代码。

Angular 2 中使用 Jasmine 作为测试框架。

Vue 缺乏测试指导, 但是 Evan 团队推荐使用 Karma

11. 通用与原生 app

Angular 拥有用于原生应用的 NativeScript(由 Telerik 支持)和用于混合开发的 Ionic 框架。

借助 React, 用 react-native 开发原生 app。

Vue 可以说拥有Weex开发原生 app。

12. 学习曲线

Angular 的学习曲线确实很陡。它有全面的文档,但你仍然可能被吓哭,因为说起来容易做起来难。即使你对 Javascript 有深入的了解,也需要了解框架的底层原理。

对于 React,你可能需要针对第三方库进行大量重大决策。仅仅 React 中就有 16 种不同的 flux 软件包来用于状态管理可供选择 。

Vue 学习起来很容易。公司转向 Vue 是因为它对初级开发者来说似乎更容易一些。有了 Vue,初级和高级开发人员之间的差距缩小了,他们可以更轻松地协作,减少 bug,减少解决问题的时间。

在调试方面,React 和 Vue 的黑魔法更少是一个加分项。找出 bug 更容易,因为需要看的地方少了,堆栈跟踪的时候,自己的代码和那些库之间有更明显的区别。使用 React 的人员报告说,他们永远不必阅读库的源代码。但是,在调试 Angular 应用程序时,通常需要调试 Angular 的内部来理解底层模型。从好的一面来看,从 Angular 4 开始,错误信息应该更清晰,更具信息性。

13. 底层原理

如果你想检查源代码,那么你可以访问下面的GitHub仓库:

Angular:github.com/angular/ang…

React:github.com/facebook/re…

Vue:github.com/vuejs/vue

总结

如果你在Google工作:Angular

如果你喜欢 TypeScript:Angular(或 React)

如果你喜欢面向对象编程(OOP): Angular

如果你需要指导手册,架构和帮助:Angular

如果你在Facebook工作:React

如果你喜欢灵活性:React

如果你喜欢大型的技术生态系统:React

如果你喜欢在几十个软件包中进行选择:React

如果你喜欢JS和“一切都是 Javascript 的方法”:React

如果你喜欢真正干净的代码:Vue

如果你想要最平缓的学习曲线:Vue

如果你想要最轻量级的框架:Vue

如果你想在一个文件中分离关注点:Vue

如果你一个人工作,或者有一个小团队:Vue(或 React)

如果你的应用程序往往变得非常大:Angular(或 React)

如果你想用 react-native 构建一个应用程序:React

如果你想在圈子中有很多的开发者:Angular 或 React

如果你与设计师合作,并需要干净的 HTML 文件:Angular or Vue

如果你喜欢 Vue 但是害怕有限的技术生态系统:React

如果你不能决定,先学习 React,然后 Vue,然后 Angular

参考

分类:
前端
标签:
分类:
前端
标签: