• AngularReact区别

    2017-09-15 08:10:45
    AngularReact区别

    原文地址:http://www.cnblogs.com/dadifeihong/p/6958337.html

    我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结。无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划,你都有可能从学习这个主题中受益。

    为了节省你的时间,提前做出如下声明:在哪个框架更好这个问题上,本文不会给你一个明确的答案。但是,不想其他类似主题的文章。我不能告诉你答案,是因为一项特定的技术是否适合你的开发环境和使用场景取决于多种因素。

    由于不能直接回答这个问题,我们会尝试从其他的方面进行解释。我们将会通过对比 Angular(2+,不是老版本的AngularJS)和 React 来演示在两个类型相似的框架中,如何选择并调试适合自己环境的框架。你知道的,“授人以鱼不如授人以渔”。这样在以后,当这两者被更好的框架取代的时候,你能再次用同样的思路做出最优的选择。

    开始

    在选择任何工具之前,你都需要回答两个简单的问题:“它本身是好的工具吗?”,“它是否适合我的使用场景?”他们本身没有什么意义,所以你需要把这两个问题时刻放在脑海中。好吧,问题可能不是那么的简单,所以,我们尝试把他们分解成一些小的问题。

    工具本身的问题:

    • 它的成熟度如何以及背后支持它的是谁?
    • 它有什么样的特性?
    • 它使用什么样的架构,开发范式,和模式?
    • 围绕它的生态圈怎么样?

    自我反思的问题:

    • 我和我的同事能否轻松的学会如何使用它?
    • 它适合我的项目吗?
    • 它的开发体验怎么样?

    用这一系列问题,你可以评估任何工具,而我们将以 Angular 和 React 为基础进行比较。

    还有另外一件事我们需要说明。严格来说,拿 Angular 比较 React 不是完全公平的,因为 Angular 是一个成熟、功能完备的框架,而 React 只是一个 UI 组件库。为了弥补差距,我们谈论 React 的时候,包含了一些它经常使用的库。

    完备性

    作为一个熟练开发者的主要能力就是能够在旧技术和前沿技术之间保持平衡。惯例是,当采用还未成熟的新工具时,应注意一些风险:

    • 工具可能有缺陷并且不稳定
    • 它可能会被供应商意外的抛弃
    • 假设你需要帮助,可能没有一个大型的知识库或者成熟的社区

    React 和 Angular 都有良好的出身,所以从这方面来看,我们是没必要担心的。

    React

    React 是由 Facebook 开发并维护的,并且用在了他们自己的产品线上, 包括 Instagram 和 WhatsApp. 它已经出现大约 3年半 了, 所以它已经不算新了。它也是Github上最流行的库之一 ,在撰写本文的时候,它大约有60,000多个 star。听起来不错。

    Angular

    Angular(2及以上)出现的比 React 晚一点,但是如果算上之前的版本 AngularJS,情况就反过来了。它主要由 Google 维护并且用在AdWords 和 Google Fiber 产品上,很明显他们对此很有信心,显然它不会短时间内消失。

    特性

    像前文提到的,Angular 比 React 多些开箱即用的特性。这是有两面性的,取决于你看待它的角度。 两者的核心功能是相似的:组件,数据绑定和平台无关的渲染

    Angular

    Angular 提供了很多现代 web 应用所需的开箱即用的特性。一些标准特性是:

    • 依赖注入
    • 以 HTML 的扩展版本为基础实现模板
    • 由 @angular/router 提供路由功能
    • 利用 @angular/http 实现 Ajax 请求
    • 利用 @angular/forms 创建表单
    • CSS 组件化
    • XSS 防御
    • 单元测试组件

    当你自己不想花费时间去挑选类库的时候,有这么多开箱即用的特性是很方便的。 而这也意味着你被它们束缚在了一起,即使你不需要它们。并且,通常替换它们需要付出更多的努力。例如,考虑到依赖注入可以用引入来替代,我们相信使用它的小的项目相对于收益会付出更多的开销。

    React

    使用 React,你的入门更加简单。如果我们只看 React,那么只有:

    • 无依赖注入
    • JSX模板,通过 JavaScript 实现的类 XML 语言
    • XSS 防御
    • 单元测试组件

    特性不多,未必不是好事。这意味着根据需求选择第三方类库的时候,你有更多的自由度。不好的是你不得不自己做出选择。经常与 React 一起使用的流行类库有:

    我们拥有了选择类库时的自由。这让我们可以根据每个项目的特定需求来调整我们的技术栈,并且不会产生很高的学习成本。

    语言、范式和模式

    回顾一下两个框架的特性,让我来看一下有哪些流行的高级概念。

    React

    当研究 React 的时候,有一些重要的概念涌上心头:JSX,Flow,Redux

    JSX

    许多开发者对 JSX 持不同的看法:有的人喜欢它,有的人认为这是技术的巨大退步。不是遵循内容与逻辑分离的传统方法,React 决定用一种类 XML 语言把两者组合在一起放到组件中,这样你可以在 JavaScript 代码中直接编写内容标记。

    虽然关于标记和逻辑混合写法这个话题是有争议的,但是它有一个明显的优势:静态分析。如果你的 JSX 标记中有错误,编译器不会保持沉默,它会报出这个错误。这能帮助我们立即发现拼写错误和其他一些愚蠢的错误。

    Flow

    Flow也是由 Facebook 开发的一款 JavaScript 的类型检查工具。它能解析代码并检查一些常规的类型错误,像隐式转换或空引用。

    不像有着相似目的的 TypeScript,它不需要你迁移到一个新语言并且通过注释你的代码来进行类型检查。对 Flow 来说,类型注释是可选的,可以当做分析器的额外提示。如果你想用静态代码分析,但又不想重写已有的代码,对此而言 Flow 是一个不错的选择。

    [扩展阅读: Writing Better JavaScript with Flow]

    Redux

    Redux 是一个清晰的管理状态变化的类库。它受 Flux 的启发,但是做了一些简化。Redux 的核心思想是用单个对象来代表应用的整个状态,该对象被叫做 reducers,通过函数实现。reducers 是纯函数,通过组件分别实现。这能更好的做到关注点与测试分离。

    如果你正在做一个简单的项目,引入 Redux 可能会更加复杂,但是对中大型项目来说,它是一个很好的选择。这个类库变得非常流行,也可以用在 Angular 项目中实现。

    所有的三项特性可以显著的增强你的开发体验:JSX 和 Flow 允许你快速的定位潜在错误,Redux 帮助你搭建一个整洁的项目架构。

    Angular

    Angular 也有一些有趣的东西,叫 TypeScript 和 RxJS。

    TypeScript

    TypeScript 是一门在 JavaScript 基础上,由微软开发的新语言。他是 ES2015 的超集,并且包含了JS语言即将到来的新版本的一些特性。你能用它替代 Babel 来编写最新的 JavaScript。它也提供了一个极其强大的类型检查系统,能够通过注释和类型推理静态分析你的代码。

    还有一个相当微妙的优势。TypeScript 受 Java 和 .NET 的影响很深,所以如果开发者有那些语言背景,他们会发现 TypeScript 比原生 JavaScript 学起来更轻松(注意我们如何根据个人情况选择工具)。虽然 Angular 是第一个采用 TypeScript 的主要框架,但它和 React 用在一起,也是可行的。

    [扩展阅读: An Introduction to TypeScript: Static Typing for the Web]

    RxJS

    RxJS 是一个响应式的编程类库,允许对异步的操作和事件做更加灵活的处理。它是利用函数式编程把观察者模式和迭代器模式混合的组合体。RxJS 允许你把一切都当做是一个连续的流值,并且在此之上实现各种各样的操作,像映射,过滤,拆分或合并。

    该类库被 Angular 的 HTTP 模块采用,也在一些内部使用。当你执行一个 HTTP 请求,它返回一个 Observable 替代通常的 Promise。虽然这个库极其强大,但它也相当的复杂。想要精通它,你需要知道不同类型的 “观察者”,“主题” ,以及上百种方法和操作符。呀,这看起来只是执行 HTTP 请求的一点小工作。

    当需要很多连续的数据流方面的工作的时候,比如 web sockets,在这种情况下 RxJS 是十分有用的,然而,这看起来仍然很复杂。无论如何,当使用 Angular 的时,你至少要对此要有基本的了解。

    [扩展阅读: Introduction to Functional Reactive Programming with RxJS]

    我们发现在提高项目的可维护性上,TypeScript 是一个强大的工具,尤其是那些代码量巨大或业务逻辑十分复杂的项目。用 TypeScript 写的代码更容易阅读与跟进。虽然 Angular 已经采用了 TypeScript,我们仍然希望更多的项目使用它。RxJS,换句话说,看起来只在特定情况下有用并且要小心使用。否则,它能给你的项目带去难以想象的复杂度。

    生态圈

    关于开源框架很重要的事情是围绕它而衍生出的工具数量。有时候,那些工具甚至比框架本身更有用。我们来看一下这两个框架最流行的工具和类库。

    Angular

    Angular 命令行工具

    现代框架的流行趋势是通过一个命令行工具来帮助初始化项目,而不必亲自配置。Angular 的工具叫 Angular CLI。它允许通过一系列的命令来生成和启动项目。所有与创建应用,启开发环境,跑测试有关的脚本都被巧妙的隐藏在叫 node_modules 的文件夹中。你也能在开发期间通过它生成新的代码。这使得创建新项目十分的简单。

    [扩展阅读: The Ultimate Angular CLI Reference]

    Ionic 2

    Ionic 2 是一款用来开发移动端混合应用的流行框架的新版本。它提供了一个完美集成了 Angular 2 的 Cordova 容器,和一个漂亮的组件库。通过它,可以轻松的创建移动端应用。如果相比原生应用更倾向于混合应用,那么它将是一个不错的选择。

    Material design 组件

    如果你钟爱于 material design,你可能很高兴听到 Material 组件库可以用于 Angular。虽然当前得到了诸多支持,但其仍然处于早期阶段并且有点简陋,所以,我们希望不久的将来能有所改善。

    Angular universal

    Angular universal 是一个种子项目,被用来创建支持服务端渲染的项目。

    @ngrx/store

    @ngrx/store 是受 Redux 启发,利用 pure reducers 基于状态突变,用于 Angular 状态管理的类库。通过集成 RxJS,可以利用变化侦测策略达到更好的性能。

    [扩展阅读: Managing State in Angular 2 Apps with ngrx/store]

    这里有更多的类库与工具 the Awesome Angular list.

    React

    Create react app

    Create-react-app 是用于快速创建 React 项目的命令行工具。跟 Angular CLI 相似,它允许生成一个新项目,启动开发服务和打包。它用 Jest 做单元测试,一款来自于 Facebook 的比较新的测试工具,本身有一些好的特性。它也支持通过环境变量做灵活的应用分析,本地环境的后端代理,Flow,和其他特性。更多内容请查看 introduction to create-react-app

    React Native

    React Native 是由 Facebook 开发的,用 React 编写移动端原生应用的平台。不像提供混合应用的 Ionic,React Native 提供真正的原生界面。它提供了一套用于绑定原生控件的标准 React 组件。也允许使用Objective-C,Java 或 Swift等原生代码编写的组件绑定到它们上。

    Material UI

    同样,这是用于 React 的 material design 组件库。跟 Angular 的版本相比,这个更加成熟并且已经有很多可用的组件。

    Next.js

    Next.js 是用于 React 应用在服务端渲染的框架。它提供了一个灵活的方式在服务端全部或部分渲染应用,返回结果给客户端并继续保持在浏览器中。它尝试完成一项复杂的任务,尽可能简单的创建一个通用应用,所以设置也被设计的尽可能简单。

    MobX

    MobX 是一个管理应用状态的可选库。代替在一个单一稳定的仓库中保存状态,就像 Redux 所做的,它鼓励你尽量存储所必须的最小状态并且推导出剩下的。它提供了一套修饰符来定义可见性和观察者和介绍状态的逻辑变化。

    [扩展阅读: How to Manage Your JavaScript Application State with MobX]

    Storybook

    Storybook 是 React 的组件开发环境。它允许快速的创建单个应用来展示你的组件。在此基础上,它还提供了许多组件来记录,开发,测试和设计你的组件。在应用的其他部分,我们发现它在独立开发组件上是极其有用的。在上一篇文章中,你能学到 关于 Storybook 的更多知识

    这里有更多的类库与工具 the Awesome React list.

    接受度,学习曲线和开发体验

    选择一项新技术的重要标准就是学习它有多么的容易。当然,答案取决于很多因素,比如你之前的经验,熟悉相关的概念和模式。不管怎样,给定一个框架我们仍然能评估必须学习的新东西的数量。现在,我们假设你已经了解 ES6+,构建工具和所有的这些,让我们看看你还必须要理解什么。

    React

    使用 React 遇到的第一个障碍就是 JSX。对有些开发者而言,它写起来颇为棘手,然而,它并没有增加太多的复杂性;就像真正的 JavaScript 表达式,和特殊的类 HTML 语法。你也需要学习如何编写组件,用属性来配置和管理内部状态。你不需要学习任何新的逻辑结构与循环,因为所有的这些都是原生 JavaScript。

    官方教程是入门 React 的优秀资源。一旦你完成了它,那么开始熟悉路由。React 路由 v4 版本可能有一些复杂和特别,但无需担心。使用 Redux 需要转变范式,学会利用类库建议的方式完成已经熟悉的任务。免费视频教程 Getting Started with Redux 能够帮助你快速熟悉一些核心概念。根据项目的大小和复杂度你可能不得不寻找和学习一些额外的类库,这可能是比较棘手的部分,但在这之后,一切都会顺风顺水。

    我们很惊喜入门 React 是如此的简单。甚至有后端经验和前端经验有限的人都能快速上手。有完善清晰的错误提示,并且提供了如何解决潜在问题的解释说明。最难的部分可能就是为所需功能寻找合适的类库,但构建和开发一个应用真的十分简单。

    Angular

    学习 Angular 需要比 React 了解更多的概念。首先,你需要熟悉 TypeScript。对于有静态类型语言像 Java 或 .NET 使用经验的开发者来说要比 JavaScript 更好理解,但对纯 JavaScript 开发者而言,可能需要付出一些努力。

    框架背身就有很多主题需要学习,从基础的开始像模块、依赖注入、装饰器、组件、服务、管道、模板和指令,到高级主题像变化侦测、区块、AoT编译和 RxJS。这些此文档中都可以找到。RxJS 本身就是很繁重的主题,在官方网站上有更多的描述。虽然从基础水平上使用它比较容易,但要使用高级主题会十分的复杂。

    总而言之,我们注意到使用 Angular 要比 React 难得多。眼花缭乱的新概念对新手来讲十分的困惑。即使你已经入门了,你也需要时刻注意像 RxJS 订阅管理,变化侦测性能和未知的东西(是的,这是来自文档实际建议)。我们会经常遇到难以理解的错误信息,所以不得不经常检索它们并祈求得到一个精准的匹配。

    这看起来好像我们更倾向于 React,的确是。结合我们利用同样大小和复杂度的 Angular 和 React 项目,对新手开发者进行培训的经验,React 更加的顺滑。但是,像我之前所说的,这取决于多种因素,可能对你来说会有所不同。

    契合度

    你可能已经注意到每个框架都有它本身一系列的功能,有好的也有坏的。但在特定环境外的分析已经完成并且没能在选择哪个框架上给出答案。为了做出决定,你不得不从你自己项目的角度来考查它。这些事情需要你自己来做。

    现在,结合你的项目试着回答下面这些问题,顺便想想是否符合关于这两个框架你已经学到的特性。列表可能还不完全,但是应该够开始讨论了:

    1. 项目有多大?
    2. 要维护多久?
    3. 所有的功能都被提前定义好还是你希望灵活一些?
    4. 如果所有的特性已经明确,你需要什么功能?
    5. 应用场景和业务逻辑是否复杂?
    6. 针对哪些平台?Web端,移动端,桌面端?
    7. 是否需要服务端渲染? SEO 重要么?
    8. 是否需要处理许多实时事件流?
    9. 你的团队有多大?
    10. 开发者的经验和他们的知识背景如何?
    11. 是否有一些你想用的现成组件库?

    如果你打算启动一个大项目,你可能想最小化做出不当选择的风险,首先考虑做一个概念性的验证产品。使用框架,通过简单方式,试着实现项目的一些关键特性。这通常不会花费你太多的时间,但会给你一些有价值的经验来验证关键技术需求。如果你对结果满意,你可以继续进行完整的开发。如果不满意,从长远来看其实节省了你的时间。

    一招绝?

    一旦你为你的项目选择了一个框架,你将会在接下来的项目中忍不住的想用同样的技术栈。不要这样。虽然保持技术栈统一是一个不错的注意,但不要总是使用同样的方法。每一个项目开始之前,花点时间再回答一遍上面的问题。可能对下个项目而言,答案就不一样了。另外,如果你想用不熟悉的技术栈做一个小项目,做吧。这些经历会带给你宝贵的经验。开放你的思维,并且从错误中不断学习。在某一点,一项特定的技术会让你自然而然的觉得正确。

    此文由同行 Jurgen Van de Moere 和 Joan Yin 校对. 谢谢 SitePoint 所有的校对人员,你们让 SitePoint 的内容更加的优秀!

    展开全文
  • 一些历史 Angular 是基于 TypeScript 的 Javascript ...Angular(也被称为 “Angular 2+”,“Angular 2” 或者 “ng2”)已被重写,是与 AngularJS(也被称为 “Angular.js” 或 “AngularJS 1.x”)不兼容的后续...

    一些历史

    Angular 是基于 TypeScript 的 Javascript 框架。由 Google 进行开发和维护,它被描述为“超级厉害的 JavaScript MVW 框架”。Angular(也被称为 “Angular 2+”,“Angular 2” 或者 “ng2”)已被重写,是与 AngularJS(也被称为 “Angular.js” 或 “AngularJS 1.x”)不兼容的后续版本。当 AngularJS(旧版本)最初于2010年10月发布时,仍然在修复 bug,等等 —— 新的 Angular(sans JS)于 2016 年 9 月推出版本 2。最新的主版本是 4,因为版本 3 被跳过了。Google,Vine,Wix,Udemy,weather.com,healthcare.gov 和 Forbes 都使用 Angular(根据 madewithangularstacksharelibscore.com 提供的数据)。

    React 被描述为 “用于构建用户界面的 JavaScript 库”。React 最初于 2013 年 3 月发布,由 Facebook 进行开发和维护,Facebook 在多个页面上使用 React 组件(但不是作为单页应用程序)。根据 Chris Cordle 这篇文章的统计,React 在 Facebook 上的使用远远多于 Angular 在 Google 上的使用。React 还被 Airbnb,Uber,Netflix,Twitter,Pinterest,Reddit,Udemy,Wix,Paypal,Imgur,Feedly,Stripe,Tumblr,Walmart 等使用(根据 Facebook, stacksharelibscore.com 提供的数据)。

    Facebook 正在开发 React Fiber。它会改变 React 的底层 - 渲染速度应该会更快 - 但是在变化之后,版本会向后兼容。Facebook 将会在 2017 年 4 月的开发者大会上讨论新变化,并发布一篇非官方的关于新架构的文章。React Fiber 可能与 React 16 一起发布。

    Vue 是 2016 年发展最为迅速的 JS 框架之一。Vue 将自己描述为一款“用于构建直观,快速和组件化交互式界面的 MVVM 框架”。它于 2014 年 2 月首次由 Google 前员工 Evan You 发布(顺便说一句:尤雨溪那时候发表了一篇 vue 发布首周的营销活动和数据的博客文章)。尤其是考虑到 Vue 在没有大公司的支持的情况下,作为一个人开发的框架还能获得这么多的吸引力,这无疑是非常成功的。尤雨溪目前有一个包含数十名核心开发者的团队。2016 年,版本 2 发布。Vue 被阿里巴巴,百度,Expedia,任天堂,GitLab 使用 — 可以在 madewithvuejs.com 找到一些小型项目的列表。

    Angular 和 Vue 都遵守 MIT license 许可,而 React 遵守 BSD3-license 许可证。在专利文件上有很多讨论。James Ide(前 Facebook 工程师)解释专利文件背后的原因和历史:Facebook 的专利授权是在保护自己免受专利诉讼的能力的同时分享其代码。专利文件被更新了一次,有些人声称,如果你的公司不打算起诉 Facebook,那么使用 React 是可以的。你可以在 Github 的这个 issue 上 查看讨论。我不是律师,所以如果 React 许可证对你或你的公司有问题,你应该自己决定。关于这个话题还有很多文章:Dennis Walsh 写到,你为什么不该害怕Raúl Kripalani 警告:反对创业公司使用 React,他还写了一篇备忘录概览。此外,Facebook 上还有一个最新的声明:解释 React 的许可证

    核心开发

    如前所述,Angular 和 React 得到大公司的支持和使用。Facebook,Instagram 和 WhatsApp 正在它们的页面使用 React。Google 在很多项目中使用 Angular,例如,新的 Adwords 用户界面是使用 Angular 和 Dart。然而,Vue 是由一群通过 Patreon 和其他赞助方式支持的个人实现的,是好坏你自己确定。Matthias Götzke 认为 Vue 小团队的好处是用了更简洁和更少的过度设计的代码或 API

    我们来看看一些统计数据:Angular 在团队介绍页列出 36 人,Vue 列出 16 人,而 React 没有团队介绍页。在 Github 上,Angular 有 25,000+ 的 star 和 463 位代码贡献者,React 有 70,000+ 的 star 和 1,000+ 位代码贡献者,而 Vue 有近 60,000 的 star 和只有 120 位代码贡献者。你也可以查看 Angular,React 和 Vue 的 Github Star 历史。又一次说明 Vue 的趋势似乎很好。根据 bestof.js 提供的数据显示,在过去三个月 Angular 2 平均每天获得 31 个 star,React 74 个,Vue.JS 107 个。

     

    Angular,React 与 Due 的 Github Star 历史 (数据来源)

    Angular,React 与 Due 的 Github Star 历史 (数据来源)

     

    数据来源

    更新: 感谢 Paul Henschel 提出的 npm 趋势。npm 趋势显示了 npm 包的下载次数,相对比单独地看 Github star 更有用:

     

    在过去 2 年,npm 包的下载次数

    在过去 2 年,npm 包的下载次数

     

    市场生命周期

    由于各种名称和版本,很难在 Google 趋势中比较 Angular,React 和 Vue。一种近似的方法可以是“互联网与技术”类别中的搜索。结果如下:

     

     

     

    Vue 没有在 2014 年之前创建 - 所以这里有什么不对劲。La Vue是法语的 “view” ,“sight” 或 “opinion”。也许就是这样。“VueJS” 和 “Angular” 或 “React” 的比较也是不公平的,因为 VueJS 几乎没有搜索到任何结果。

    那我们试试别的吧。ThoughtWorks 的 Technology Radar 技术随时间推移的变化。ThoughtWorks 的 Technology Radar 随着时间推移,技术的演进过程给人深刻的印象。Redux 是在采用阶段(被 ThoughtWorks 项目采用的!),它在许多 ThoughtWorks 项目中的价值是不可估量的。Vue.js 是在试用阶段(被试着用的)。Vue被描述为具有平滑学习曲线的,轻量级并具灵活性的Angular的替代品。Angular 2 是正在处于评估阶段 使用 —— 已被 ThoughtWork 团队成功实践,但是还没有被强烈推荐。

    根据 2017 年 Stackoverflow 的最新调查,被调查的开发者中,喜爱 React 有 67%,喜欢 AngularJS 的有 52%。“没有兴趣在开发中继续使用”的开发者占了更高的数量,AngularJS(48%)和 React(33%)。在这两种情况下,Vue 都不在前十。然后是 statejs.com 关于比较 “前端框架” 的调查。最有意思的事实是:React 和 Angular 有 100% 的认知度,23% 的受访者不了解 Vue。关于满意度,92% 的受访者愿意“再次使用” React ,Vue 有 89% ,而 Angular 2 只有 65%。

    客户满意度调查呢?Eric Elliott 于 2016 年 10 月开始评估 Angular 2 和 React。只有 38% 的受访者会再次使用 Angular 2,而 84% 的人会再次使用 React。

    长期支持和迁移

    Facebook 在其设计原则中指出,React API 非常稳定。还有一些脚本可以帮助你从当前的API移到更新的版本:请查阅 react-codemod。迁移是非常容易的,没有这样的东西(需要)作为长期支持的版本。在 Reddit 这篇文章中指出,人们看到到升级从来不是问题。React 团队写了一篇关于他们版本控制方案的博客文章。当他们添加弃用警告时,在下一个主要版本中的行为发生更改之前,他们会保留当前版本的其余部分。没有计划更改为新的主要版本 - v14 于 2015 年 10 月发布,v15 于 2016 年 4 月发布,而 v16 还没有发布日期。(译者注:v16 于 2017 年 9 月底发布)最近 React核心开发人员指出,升级不应该是一个问题。

    关于 Angular,从 v2 发布开始,有一篇关于版本管理和发布 Angular 的博客文章。每六个月会有一次重大更新,至少有六个月的时间(两个主要版本)。在文档中有一些实验性的 API 被标记为较短的弃用期。目前还没有官方公告,但根据这篇文章,Angular 团队已经宣布了以 Angular 4 开始的长期支持版本。这些将在下一个主要版本发布之后至少一年得到支持。这意味着至少在 2018 年 9 月之前,将支持 Angular 4,并提供 bug 修复和重要补丁。在大多数情况下,将 Angular 从 v2 更新到 v4 与更新 Angular 依赖关系一样简单。Angular 还提供了有关是否需要进一步更改的信息指南

    Vue 1.x 到 2.0 的更新过程对于一个小应用程序来说应该很容易 - 开发者团队已经声称 90% 的 API 保持不变。在控制台上有一个很好的升级 - 诊断迁移 - 辅助工具。一位开发人员指出,从 v1 到 v2 的更新在大型应用程序中仍然没有挑战。不幸的是,关于 LTS 版本的下一个主要版本或计划信息没有清晰的(公共)路径。

    还有一件事:Angular 是一个完整的框架,提供了很多捆绑在一起的东西。React 比 Angular 更灵活,你可能会使用更多独立的,不稳定的,快速更新的库 - 这意味着你需要自己维护相应的更新和迁移。如果某些包不再被维护,或者其他一些包在某些时候成为事实上的标准,这也可能是不利的。

    人力资源与招聘

    如果你的团队有不需要了解更多 Javascript 技术的 HTML 开发人员,则最好选择 Angular 或 Vue。React 需要了解更多的 JavaScript 技术(我们稍后再谈)。

    你的团队有工作时可以敲代码的设计师吗?Reddit 上的用户 “pier25” 指出,如果你在 Facebook 工作,每个人都是一个资深开发者,React 是有意义的。然而事实上,你不会总是找到一个可以修改 JSX 的设计师,因此使用 HTML 模板将会更容易。

    Angular 框架的好处是来自另一家公司的新的 Angular 2 开发人员将很快熟悉所有必要的约定。React 项目在架构决策方面各不相同,开发人员需要熟悉特定的项目设置。

    如果你的开发人员具有面向对象的背景或者不喜欢 Javascript,Angular 也是很好的选择。为了推动这一点,这里是 Mahesh Chand 引述

    我不是一个 JavaScript 开发人员。我的背景是使用 “真正的” 软件平台构建大型企业系统。我从 1997 年开始使用 C,C ++,Pascal,Ada 和 Fortran 构建应用程序。(...)我可以清楚地说,JavaScript 对我来说简直是胡言乱语。作为 Microsoft MVP 和专家,我对 TypeScript 有很好的理解。我也不认为 Facebook 是一家软件开发公司。但是,Google 和微软已经是最大的软件创新者。我觉得使用 Google 和微软强大支持的产品会更舒服。另外(...)与我的背景,我知道微软对 TypeScript 有更宏伟的蓝图。

    emmmmmmmm...... 我应该提到的,Mahesh 是微软的区域总监。

    React,Angular 和 Vue 的比较

    组件

    我们所讨论的框架都是基于组件的。一个组件得到一个输入,并且在一些内部的行为/计算之后,它返回一个渲染的 UI 模板(一个登录/注销区或一个待办事项列表项)作为输出。定义的组件应该易于在网页或其他组件中重用。例如,你可以使用具有各种属性(列,标题信息,数据行等)的网格组件(由一个标题组件和多个行组件组成),并且能够在另一个页面上使用具有不同数据集的组件。这里有一篇关于组件的综合性文章,如果你想了解更多这方面的信息。

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

    Typescript,ES6 与 ES5

    React 专注于使用 Javascript ES6。Vue 使用 Javascript ES5 或 ES6。

    Angular 依赖于 TypeScript。这在相关示例和开源项目中提供了更多的一致性(React 示例可以在 ES5 或 ES6 中找到)。这也引入了像装饰器和静态类型的概念。静态类型对于代码智能工具非常有用,比如自动重构,跳转到定义等等 - 它们也可以减少应用程序中的错误数量,尽管这个话题当然没有共识。Eric Elliott 在他的文章 “静态类型的令人震惊的秘密” 中不同意上面的观点。Daniel C Wang 表示,使用静态类型并没有什么坏处,同时有测试驱动开发(TDD)和静态类型挺好的。

    你也应该知道你可以使用 Flow 在 React 中启用类型检查。这是 Facebook 为 JavaScript 开发的静态类型检查器。Flow 也可以集成到 VueJS 中

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

    更新: James Ravenscroft 在对这篇文章的评论中写道,TypeScript 对 JSX 有一流的支持 - 可以无缝地对组件进行类型检查。所以,如果你喜欢 TypeScript 并且你想使用 React,这应该不成问题。

    模板 —— JSX 还是 HTML

    React 打破了长期以来的最佳实践。几十年来,开发人员试图分离 UI 模板和内联的 Javascript 逻辑,但是使用 JSX,这些又被混合了。这听起来很糟糕,但是你应该听彼得·亨特(Peter Hunt)的演讲 “React:反思最佳实践”(2013 年 10 月)。他指出,分离模板和逻辑仅仅是技术的分离,而不是关注的分离。你应该构建组件而不是模板。组件是可重用的、可组合的、可单元测试的。

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

    JSX 意味着 React 中的所有内容都是 Javascript -- 用于JSX模板和逻辑。Cory House2016 年 1 月的文章 中指出:“Angular 2 继续把 'JS' 放到 HTML 中。React 把 'HTML' 放到 JS 中。“这是一件好事,因为 Javascript 比 HTML 更强大。

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

    Vue 具有“单个文件组件”。这似乎是对于关注分离的权衡 - 模板,脚本和样式在一个文件中,但在三个不同的有序部分中。这意味着你可以获得语法高亮,CSS 支持以及更容易使用预处理器(如 Jade 或 SCSS)。我已经阅读过其他文章,JSX 更容易调试,因为 Vue 不会显示不规范 HTML 的语法错误。这是不正确的,因为 Vue 转换 HTML 来渲染函数 - 所以错误显示没有问题(感谢 Vinicius Reis 的评论和更正!)。

    旁注:如果你喜欢 JSX 的思路,并想在 Vue 中使用它,可以使用 babel-plugin-transform-vue-jsx

    框架和库

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

    另一方面,React 和 Vue 是很灵活的。他们的库可以和各种包搭配。(在 npm 上有很多 React 的包,但 Vue 的包比较少,因为毕竟这个框架还比较新)。有了 React,你甚至可以交换库本身的 API 兼容替代品,如 Inferno。然而,灵活性越大,责任就越大 - React 没有规则和有限的指导。每个项目都需要决定架构,而且事情可能更容易出错。

    另一方面,Angular 还有一个令人困惑的构建工具,样板,检查器(linter)和时间片来处理。如果使用项目初始套件或样板,React 也是如此。他们自然是非常有帮助的,但是 React 可以开箱即用,这也许是你应该学习的方式。有时,在 JavaScript 环境中工作要使用各种工具被称为 “Javascript 疲劳症”。Eric Clemmons 在他的文章 中说:

    当开始使用框架,还有一堆安装的工具,你可能会不习惯。这些都是框架生成的。很多开发人员不明白,框架内部发生了什么 —— 或者需要花费很多时间才能搞明白。

    Vue 似乎是三个框架中最轻量的。GitLab 有一篇关于 Vue.js(2016 年 10 月)的决定的博客文章

    Vue.js 完美的兼顾了它将为你做什么和你需要做什么。(...)Vue.js 始终是可及的,一个坚固,但灵活的安全网,保证编程效率和把操作 DOM 造成的痛苦降到最低。

    他们喜欢简单易用 —— 源代码非常易读,不需要任何文档或外部库。一切都非常简单。Vue.js “对任何东西都不做大的假设”。还有一个关于 GitLab 决定的播客节目

    另一个来自 Pixeljets 的关于向 Vue 转变的博文。React “是 JS 界在意识层面向前迈出的一大步,它以一种实用简洁的方式向人们展示了真正的函数式编程。和 Vue 相比,React 的一大缺点是由于 JSX 的限制,组件的粒度会更小。这里是文章的引述:

    对于我和我的团队来说,代码的可读性是很重要的,但编写代码很有趣也是非常重要的。在实现真正简单的计算器小部件时创建 6 个组件并不奇怪。在许多情况下,在维护,修改或对某个小部件进行可视化检查方面也是不好的,因为你需要绕过多个文件/函数并分别检查每个小块的 HTML。再次,我不是建议写巨石 - 我建议在日常开发中使用组件而不是微组件。

    关于 Hacker newsReddit 上的博客文章有趣的讨论 - 有来自 Vue 的持异议者和进一步支持者的争论。

    状态管理和数据绑定

    构建用户界面很困难,因为处处都有状态 - 随着时间的推移而变化的数据带来了复杂性。定义的状态工作流程对于应用程序的增长和复杂性有很大的帮助。对于复杂度不大的应用程序,就不必定义的状态流了,像原生 JS 就足够了。

    它是如何工作的?组件在任何时间点描述 UI。当数据改变时,框架重新渲染整个 UI 组件 - 显示的数据始终是最新的。我们可以把这个概念称为“ UI 即功能”。

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

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

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

    大多数教程和样板文件都已经集成了 Redux,但是如果没有它,你可以使用 React(你可能不需要在你的项目中使用 Redux)。Redux 在代码中引入了复杂性和相当强的约束。如果你正在学习React,那么在你要使用 Redux 之前,你应该考虑学习纯粹的 React。你绝对应该阅读 Dan Abramov 的“你可能不需要 Redux”。

    有些开发人员 建议使用 Mobx 代替 Redux。你可以把它看作是一个 “自动的 Redux”,这使得事情一开始就更容易使用和理解。如果你想了解,你应该从介绍开始。你也可以阅读 Robin 的 Redux 和 MobX 的比较。他还提供了有关从 Redux 迁移到 MobX 的信息。如果你想查找其他 Flux 库,这个列表非常有用。如果你是来自 MVC 的世界,那么你应该阅读 Mikhail Levkovsky 的文章“Redux 中的思考(当你所知道的是 MVC)”。

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

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

    这两个概念各有优劣。你需要了解这些概念,并确定这是否会影响你选择框架。文章“双向数据绑定:Angular 2 和 React”和这个 Stackoverflow 上的问题都提供了一个很好的解释。在这里你可以找到一些交互式的代码示例(3 年前的示例(,只适用于 Angular 1 和 React)。最后,Vue 支持单向绑定和双向绑定(默认为单向绑定)。

    如果你想进一步阅读,这有一篇长文,是有关状态的不同类型和 Angular 应用程序中的状态管理Victor Savkin)。

    其他的编程概念

    Angular 包含依赖注入(dependency injection),即一个对象将依赖项(服务)提供给另一个对象(客户端)的模式。这导致更多的灵活性和更干净的代码。文章 “理解依赖注入” 更详细地解释了这个概念。

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

    灵活性与精简到微服务

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

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

    正如 Cory House 所说:

    JavaScript 发展速度很快,而且 React 可以让你将应用程序的一小部分替换成更好用的 JS 库,而不是期待你的框架能够创新。小巧,可组合的单一用途工具的理念永远不会过时

    有些人对非单页的网站也使用 React(例如复杂的表单或向导)。甚至 Facebook 都没有把 React 用在 Facebook 的主页,而是用在特定的页面,实现特定的功能。

    体积和性能

    任何框架都不会十全十美:Angular 框架非常臃肿。gzip 文件大小为 143k,而 Vue 为 23K,React 为 43k。

    为了提高性能,React 和 Vue 都使用了虚拟 DOM(Virtual DOM)。如果你对此感兴趣,可以阅读虚拟 DOM 和 DOM 之间的差异以及 react.js 中虚拟 DOM 的实际优势。此外,虚拟 DOM 的作者之一在 Stackoverflow 上回答了性能的相关问题

    为了检查性能,我看了一下最佳的 js 框架基准。你可以自己下载并运行它,或者查看交互式结果表

     

     

     

    Angular,React 和 Vue 性能比较(源文件

     

     

     

    内存分配(源文件

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

    测试

    Facebook 使用 Jest 来测试其 React 代码。这里有篇 Jest 和 Mocha 之间的比较的文章 —— 还有一篇关于 Enzyme 和 Mocha 如何一起使用 的文章。Enzyme 是 Airbnb 使用的 JavaScript 测试工具(与 Jest,Karma 和其他测试框架一起使用)。如果你想了解更多,有一些关于在 React(这里这里)测试的旧文章。

    Angular 2 中使用 Jasmine 作为测试框架。Eric Elliott 在一篇文章中抱怨说 Jasmine “有数百种测试和断言的方式,需要仔细阅读每一个,来了解它在做什么”。输出也是非常臃肿和难以阅读。有关 Angular 2 与 KarmaMocha 的整合的一些有用的文章。这里有一个关于 Angular 2 测试策略的旧视频(从2015年起)。

    Vue 缺乏测试指导,但是 Evan 在 2017 年的展望中写道,团队计划在这方面开展工作。他们推荐使用 KarmaVue 和 Jest 结合使用,还有 avoriaz 作为测试工具

    通用与原生 app

    通用 app 正在将应用程序引入 web、搬上桌面,同样将深入原生 app 的世界。

    React 和 Angular 都支持原生开发。Angular 拥有用于原生应用的 NativeScript(由 Telerik 支持)和用于混合开发的 Ionic 框架。借助 React,你可以试试 react-native-renderer 来构建跨平台的 iOS 和 Android 应用程序,或者用 react-native 开发原生 app。许多 app(包括 Facebook;查看更多的展示)都是用 react-native 构建的。

    Javascript 框架在客户端上渲染页面。这对于性能,整体用户体验和 SEO 是不利的。服务器端预渲染是一个好办法。所有这三个框架都有相应的库来实现服务端渲染。React 有 next.js,Vue 有 nuxt.js,而 Angular 有...... Angular Universal

    学习曲线

    Angular 的学习曲线确实很陡。它有全面的文档,但你仍然可能被吓哭,因为说起来容易做起来难。即使你对 Javascript 有深入的了解,也需要了解框架的底层原理。去初始化项目是很神奇的,它会引入很多的包和代码。因为有一个大的,预先存在的生态系统,你需要随着时间的推移学习,这很不利。另一方面,由于已经做出了很多决定,所以在特定情况下可能会很好。对于 React,你可能需要针对第三方库进行大量重大决策。仅仅 React 中就有 16 种不同的 flux 软件包来用于状态管理可供选择。

    Vue 学习起来很容易。公司转向 Vue 是因为它对初级开发者来说似乎更容易一些。这里有一片说他们团队为什么从 Angular 转到 Vue的文章。另一位用户表示,他公司的 React 应用程序非常复杂,以至于新开发人员无法跟上代码。有了 Vue,初级和高级开发人员之间的差距缩小了,他们可以更轻松地协作,减少 bug,减少解决问题的时间。

    有些人说他们用 React 做的东西比用 Vue 做的更好。如果你是一个没有经验的 Javascript 开发人员 - 或者如果你在过去十年中主要使用 jQuery,那么你应该考虑使用 Vue。转向 React 时,思维方式的转换更为明显。Vue 看起来更像是简单的 Javascript,同时也引入了一些新的概念:组件,事件驱动模型和单向数据流。这同样是很小的部分。

    同时,Angular 和 React 也有自己的实现方式。它们可能会限制你,因为你需要调整自己的做法,才能顺畅的开发。这可能是一个缺点,因为你不能随心所欲,而且学习曲线陡峭。这也可能是一个好处,因为你在学习技术时必须学习正确的概念。用 Vue,你可以用老方法来做。这一开始可能会比较容易上手,但长此以往会出现问题。

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

    Angular, React 和 Vue 底层原理

    你想自己阅读源代码吗?你想看看事情到底是怎么样的吗?

    可能首先要查看 Github 仓库: React(github.com/facebook/re…)、Angular(github.com/angular/ang…)和 Vue(github.com/vuejs/vue)。

    语法看起来怎么样?ValueCoders 比较 Angular,React 和 Vue 的语法

    在生产环境中查看也很容易 —— 连同底层的源代码。TodoMVC 列出了几十个相同的 Todo 应用程序,用不同的 Javascript 框架编写 —— 你可以比较 AngularReactVue 的解决方案。RealWorld 创建了一个真实世界的应用程序(中仿),他们已经准备好了 Angular(4+)和 React(带 Redux )的解决方案。Vue 的开发正在进行中。

    你可以看到许多真实的 app,以下是 React 的方案:

    以下是 Angular 版的 app:

    以下是 Vue 版的 app:

    总结

    现在决定使用哪个框架

    React,Angular 和 Vue 都很酷,而且没有一个能明显的超过对方。相信你的直觉。最后一点有趣的玩世不恭的言辞可能会有助于你的决定:

    这个肮脏的小秘密就是大多数 “现代 JavaScript 开发” 与实际构建网站无关 —— 它正在构建可供构建可供人们使用的库或者包,这些人可以为编写教程和教授课程的人构建框架。我不确定任何人实际上正在为实际用户建立任何交互。

    当然,这是夸张的,但是可能有一点点道理。是的,Javascript生态系统中有很多杂音。在你搜索的过程中,你可能会发现很多其他有吸引力的选项 —— 尽量不要被最新,最闪亮的框架蒙蔽。

    我应该选什么?

    如果你在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


    二:不同的理解与分析

     

    前端这几年的技术发展很快,细分下来,主要可以分成四个方面:

    1. 开发语言技术,主要是ES6&7,coffeescript,typescript等;
    2. 开发框架,如Angular,React,Vue.js,Angular2等;
    3. 开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术;
      就开发框架这块,Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间,所以这里对比一下这三门技术,以便之后的技术选型。

    一. 趋势

    Vue.js


    Reactjs


    Angularjs


    2.对比
    虽然放在一起Angular还是最火的,但从单个趋势图可以看出来reactjs和vuejs明显是火箭一般上升。很明显可以看到Angular在16时候有个大跌幅,那时候正是React坐火箭上升最快的。就是那时候很多Angular的项目转成了React。如果Angular没有出2,那估计Angular就真的离灭亡不远了。


    3.GitHub受欢迎程度


    4.定位
    虽然Vue.js被定义为MVC framework,但其实Vue本身还是一个library,加了一些其他的工具,可以被当成一个framework。ReactJS也是library,同样道理,配合工具也可以成为一个framework。AngularJS(本文AngularJS特指Angular 1, Angular 2特指第二版Angular)是一个framework,而Angular 2虽然还是一个framework,但其实在设计之初,Angular 2的团队站在了更高的角度,希望做一个platform。
    5.上手容易度
    Vue.js hello world


    ReactJS hello world


    ** 6.文档清晰度**
    现在的前端framework,用起来就像按照说明书使用家用电器一样。按照文档一步步写就好了,所以文档的清晰度非常重要。同时小伙伴也很重要,越多的人使用,那遇到一样问题的人就越多,stackoverflow上面可能早就有帮你解决问题的小伙伴了。就这几个来说,我个人认为Vue.js的文档最恳切。我认为结合文档和遇到问题Google答案的匹配度来讲:

     

    Vue.js > ReactJS > AngularJS > Angular 2

    二. 数据流

    1.Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
    实现原理:
    $scope
    变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,
    $scope.$watch
    函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。
    使用ng-model时,你可以使用双向数据绑定。 使用$scope.$watch
    (视图到模型)以及$scope.$apply
    (模型到视图),还有$scope.$digest
    双向绑定的三个重要方法:
    $scope.$apply()$scope.$digest()$scope.$watch()
    在AngularJS双向绑定中,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope中的对象的状态的,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会**调用相应的处理方法来实现双向绑定。

    1. Vue 也支持双向绑定,默认为单向绑定数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解
      Vue相比():
      Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。
      并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
      Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

    2. React-单向数据流
      MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,当界面发生变化的时候,按照配置规则去更新相应的数据,然后,再根据配置好的规则去,从数据更新界面状态。
      React推崇的是函数式编程和单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。
      React和Vue都可以配合Redux来管理状态数据。

    三. 视图渲染

    1. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
      React
    2. React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁
      Virtual DOM 提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
      超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染
      React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:动了多少数据,就触发多少更新,不多也不少
      React 和 Angular 2 都有服务端渲染和原生渲染的功能。
    3. Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好,而且几乎不用手工优化。

    四. 性能与优化

    性能方面,这几个主流框架都应该可以轻松应付大部分常见场景的性能需求,区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是在构建方式、缓存、图片加载、网络链路、HTTP/2 等方面。

    五. 模块化与组件化

    Angular1 -> Angular2
    Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。不是异步加载的,根据依赖列出第一次加载所需的所有依赖。
    可以配合类似于Require.js来实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架会更易懂。
    Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。
    Vue
    Vue中指令和组件分得更清晰指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑**。在 Angular1 中两者有不少相混的地方。

    React
    一个 React 应用就是构建在 React 组件之上的。 组件有两个核心概念:props,state。 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。
    传统的 MVC 是将模板放在其他地方,比如 script 标签或者模板文件,再在 JS 中通过某种手段引用模板。按这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何引用模板。
    React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法,就是为了把 HTML 模板直接嵌入到 JS 代码里面,这样就做到了模板和组件关联,但是 JS 不支持这种包含 HTML 的语法,所以需要通过工具将 JSX 编译输出成 JS 代码才能使用(可以进行跨平台开发的依据,通过不同的解释器解释成不同平台上运行的代码,由此可以有RN和React开发桌面客户端)

    六. 语法与代码风格

    React,Vue,Angular2都支持ES6,Angular2官方拥抱了TypeScript这种 JavaScript 风格。
    React 以 JavaScript 为中心,Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。React 将 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 试图让 HTML 更强大的方式。
    React 推荐的做法是 JSX + inline style,也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标,但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式(template,script,style写在一个vue文件里作为一个组件)

    七. 一些大公司使用例子

    1. Vue

    滴滴出行, 还出了一本书 Vue.js 权威指南饿了么,开源了一个基于Vue的UI库 GitHub - ElemeFE/element: Desktop UI elements for Vue.js 2.0**
    阿里的 weex GitHub - alibaba/weex: A framework for building Mobile cross-platform UI**
    GitLab选择了Vue https://about.gitlab.com/2016/10/20/why-we-chose-vue/**
    小米移动商城
    饿了么
    苏宁易购触屏版、

    2. React

    阿里,React 和React-native (杭州)
    知乎的评论功能

    3. angular2

    新出的例子少

    八. 总结

    1. 上手难度

    Vue < react < angular

    2. 使用场景

    Vue React 覆盖中小型,大型项目。
    angular 一般用于大型(因为比较厚重)。
    优缺点

    3. 渲染性能

    Vue> react >angular

    渲染性能

    4. 前端库实力参数对比

    image.png

    以上3大框架均不支持IE8以下;
    IE9以下解决方法:Bootstrap (在IE8也会不支持一些样式和属性)+jQuery;
    其他框架稳定性欠缺



    作者:Su丶_33b0
    链接:https://www.jianshu.com/p/b2b8161c9565
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • 现在, Vue 还没有 React (由 Facebook 维护) 或者 Angular 2 (受到 Google 的支持) 流行。不过,许多开发者都已经转向 Vue 了。Laravel 社区也在考虑将它作为可选用的前端框架之一。 总之,Vue 给 Rea...

    推荐使用:Vue.js > ReactJS > Angular 2 > AngularJS

     

     

    概要:

    现在, Vue 还没有 React (由 Facebook 维护) 或者 Angular 2 (受到 Google 的支持) 流行。不过,许多开发者都已经转向 Vue 了。Laravel 社区也在考虑将它作为可选用的前端框架之一。

    总之,Vue 给 React & Angular 的弊病提供了一道良方,为你提供了一种更加简单和轻松的方法来编写代码。

    满意度对比:

    Hacker News (https://news.ycombinator.com/item?id=15999688)

    前端框架 / 满意度

    2016

    2017

    React

    91%

    93%

    Vue 

    91%

    91%

    Angular 2

    65%

    66%

    Angular

    40%

    33%

                    

    1.首先,我们先了解什么是MVX框架模式?

          MVX框架模式:MVC+MVP+MVVM

          1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。

          2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。

          3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

    2.使用MVVM好处:

      1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。  
      2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
      3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
      4. 可试性。可以针对ViewModel来对界面(View)进行测试。可以针对ViewModel来对界面(View)进行测试  


    3.Vue.js是什么?

    看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢?

    Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

    Vue.js的特性如下:

    1.轻量级的框架,易用

    2.双向数据绑定

    3.指令化

    4.组件化

    4.与angularjs的区别

        相同点:

    都支持指令:内置指令和自定义指令。

    都支持过滤器:内置过滤器和自定义过滤器。

    都支持双向数据绑定。

    都不支持低端浏览器。

        不同点:

          1.更简单易用

    AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

          2. 更灵活

    比起 Angular更少专制,它能然你按照自己想要的方式构建应用,而非凡事非得 Angular 框架必须如此如此

          3.性能更突出

    AngularJS依赖对数据做脏检查,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所

    有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要

    运行多次。 
    Vue依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖

    关系。唯一需要做的优化是在 v-for 上使用 track-by。做甚是2.0吸取的react的虚拟DOM的特性。

    对于庞大的应用来说,这个优化差异还是比较明显的。

    5.与React的区别

        相同点:

    react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,

    两者都需要编译后使用。

    中心思想相同:一切都是组件,组件实例之间可以嵌套。

    都提供合理的钩子函数,可以让开发者定制化地去处理需求。

    都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

    在组件开发中都支持mixins的特性。

        不同点:

          1.性能更好:

    Vue性能上更有优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些,整体大小比react.js更小更轻便

          2.更易学更简单: 
    react.JS 彩用SX语法,对语大部分工程师入手比较困难,需要要大量的时间去学习适应这种新语法的形式,vue采用DOM模板的方法,易看易用

          3.优化更好:

    在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。 然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的负担。

    Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。

    综上所述,在VUE.20更新以后。它更是吸取了 React 和 Angular 的教训,同时也吸收了它们的成功之处。我们看到的 Vue.js 是轻量级且容易学习掌握的新型mvvm框架。


    Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

    展开全文
  • 如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的...

    如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见。

    选择的方法

    在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案来帮助我们更加了解框架,也更加让选择变得更容易

    框架本身的问题:

    • 是否成熟?谁在背后支持呢?
    • 具备的功能?
    • 采用什么架构和模式?
    • 生态系统是否丰富?

    需要自我反思的问题:

    • 我和我的团队能否轻松学习并掌握?
    • 是否适合我的项目?
    • 开发体验是否足够好?

    严格说来,Angular和React的比较是不公平的,因为Angular是一个功能丰富的框架,而React是一个UI的组件库,所以我们在接下来的分析中会将一些经常和React在一起使用的类库放在一起讨论。

    OK,开始… …


    成熟度

    作为一名成熟的开发人员或者是能够决定架构及技术走向的人员,一项必备的技能就是能够在工作和项目中平衡成熟技术与最前沿框架之间的关系,既能保持人员及技术的前进,又能保证项目或产品的交付质量,所以,必须小心以下可能的风险:

    • 该框架可能是不稳定的。
    • 主要的开发方(赞助方)可能会突然的放弃。
    • 如果你需要帮助,可能没有大型知识库或社区可用。

    幸好,无论是Angular还是React,似乎都不需要担心以上的风险

    React

    React由Facebook开发和维护,用于自己的产品,包括Instagram和WhatsApp。现在已经有大约三年半的时间。 它也是GitHub 最受欢迎的项目之一。

    Angular

    Angular由Google进行维护,并用于Google 的Adwords 和Fiber项目。既然AdWords是Goolge重要的吸金利器,自然Angular不太可能突然夭折。


    功能

    如前文提到的,Angular本身会比React自带很多的功能,当然,更丰富的功能对于一个框架来说,是优点也有可能是缺点。两个框架都具备一些相同的核心功能:组件化、数据绑定以及平台无关的Render机制

    Angular

    Angular除了提供一些需要最新浏览器支持的功能外,同时提供以下标准功能:

    • 依赖注入
    • 模板
    • 路由(@angular/router)
    • AJAX(@angular/http)
    • 表单(@angular/forms)
    • 组件化CSS封装
    • XSS保护
    • 单元测试工具

    功能丰富的好处就是你不需要额外费精力去挑选第三方的类库,然而,这也同样让你没得选择,即使你并不需要这些功能(最新发布的Angular4貌似已经意识到了这个问题)

    React

    相对Angular,React本身提供的功能就相对“简约“:

    • 无依赖注入
    • 使用JSX代替传统的HTML Templates
    • XSS保护
    • 单元测试工具

    相对Angular,React让你有很大的自由度去挑选第三方的类库,比如:

    可以根据自己的需求很自由(或者定制)需要的类库,同时这些第三方的类库都是很容易学习的。


    语言与模式

    随着两个框架的流行,一些概念和技术也随着浮出,如果想真正的用好或者说掌握这两个框架,了解随之而出的这些概念或者技术是非常必要的:

    React

    JSX

    JSX是一个很有争议的话题:有些人喜欢它,而其他人认为这是一个很大的退步。React决定使用一种类似XML的语言在组件中把标记和代码结合起来,直接在JavaScript代码中编写HTML标记。

    尽管混合标记与JavaScript的话题可能是有争议的,但它具有无可争议的优点:静态分析。如果在JSX标记中发生错误,编译器会立即报错而不是留待运行时出现莫名其妙的问题。这有助于开发人员快速排查错误以及避免其它愚蠢的错误,比如拼写错误。

    Flow

    Flow是由Facebook开发的JavaScript类型检查工具。它可以解析代码并检查常见的类型错误,如隐式转换或取消引用。

    与类似目的的TypeScript不同,它不需要开发人员迁移到新语言,并为你的代码注释类型检查工作。在流程中,类型注释是可选的,可用于向分析器提供其他提示。如果你想使用静态代码分析,同时避免重写现有的代码,Flow是一个很好的选择。

    Redux

    Redux是一个可以以清晰的方式管理状态变化的库。它的灵感来自Flux,但是有一些简化。Redux的关键思想在于,应用程序的整个状态由单个对象表示,该对象由名为reducers的函数进行突变。Reducers本身是纯功能,与组件分开实现。这样可以更好地分离问题和测试。

    如果你正在开展一个简单的项目,那么引入Redux可能有点得不偿失,但对于中等和大型项目来说,这是一个很好的选择。

    Angular

    TypeScript

    TypeScript是一种基于JavaScript开发并由Microsoft开发的新语言。它是JavaScript ES2015的超集,并包含较新版本的语言的功能。你可以使用它而不是Babel来编写最先进的JavaScript。它还可以通过使用注释和类型推断的组合来静态分析你的代码。

    还有一个更微妙的好处。TypeScript受到Java和.NET的严重影响,所以如果你的开发人员有这些语言之一的背景知识,他们可能会比简单的JavaScript更容易找到TypeScript(请注意我们如何从工具切换到你的个人环境)。 虽然Angular是第一个积极采用TypeScript的主要框架,但它也可以与React一起使用。

    RxJS

    RxJS是一个响应式编程库,可以灵活地处理异步操作和事件。它是将Observer和Iterator模式与功能编程相结合的组合。RxJS允许您将任何东西视为连续的流,并对其进行各种操作,例如映射,过滤,拆分或合并。

    该类库已被Angular采用其HTTP模块以及一些内部使用。当您执行HTTP请求时,它返回一个Observable,而不是通常的Promise。 虽然这个类库非常强大,但也很复杂。要掌握它,您将需要了解不同类型的“可观察”,“主题”以及大约一百种方法和操作符 。

    当您使用连续数据流(如Web套接字)工作很多的情况下,RxJS非常有用,但是对于其他任何东西来说似乎过于复杂。 无论如何,当你使用Angular时,您至少应该了解RxJS的基本知识。

     

    TypeScript可以说是Angular中非常重要的特点,首先他给原本C#/Java开发人员提供了很容易进入前端的机会,另外TypeScript也想比JavaScript更容易理解,尤其是代码量或者业务复杂的项目中。


    生态系统

    开源框架这么流行的原因之一,就是围绕着他们,会有无数的工具、类库、扩展来支撑整个框架,有时,这些工具可能比框架本身更有帮助,接下来我们就来看看相关这两个框架最流行的工具和类库。

    Angular

    Angular CLI

    现代框架的流行趋势是使用CLI工具,可以帮助您引导项目,而无需自行配置构建。Angular有Angular CLI。它允许您仅使用几个命令来生成和运行项目。负责构建应用程序的所有脚本,启动开发服务器和运行测试都会在node_modules中隐藏。您也可以在开发过程中使用它来生成新的代码。这使得新项目的设置变得轻而易举。

    Ionic 2

    Ionic 2 是开发混合移动应用程序的流行框架的新版本。它提供了一个与Angular 2完美集成的Cordova容器,以及一个漂亮的材料组件库。 使用它,您可以轻松地设置和构建移动应用程序。 如果您喜欢使用混合应用程序,那么这是一个不错的选择。

    Material design components

    如果您热衷于设计Material,您会很高兴听到Angular有一个Material组件库

    Angular universal

    Angular universal是一个种子项目,可用于创建支持服务器端渲染的项目。

    @ngrx/store

    @ngrx/store是由Redux启发的Angular的状态管理库,基于由pure reducer进行突变的状态。它与RxJS的集成允许您利用推送更改检测策略获得更好的性能。

    关于更多的有关Angular相关类库和工具可以参考:the Awesome Angular list

    React

    Create React App

    Create-react-app 是一个CLI工具,用于快速创建新的React应用。可以生成一个新的工程,启动开发服务器并创建绑定。Jest(来自Facebook的一个单元测试工具)也同时集成在Create-react-app内部,更方便的让我们进行单元测试。

    React Native

    React Native 是Facebook开发的基于React在移动端的开发平台,借助此平台,React可以创建真正的Native的UI。提供了一系列标准的React组件用于绑定。同时允许创建自己的组件并与Objective-C、Java或者Swift的代码进行绑定。

    Material UI

    还有一个可用于React的Material Design Component。与Angular的版本相比,这个版本比较成熟,可以使用更广泛的组件。

    Next.js

    Next.js 是React应用程序的服务器端呈现的框架。它提供了一种在服务器上完全或部分呈现应用程序的灵活方式,将结果返回给客户端并在浏览器中继续。它试图使创建通用应用程序的复杂任务尽可能简单,所以设置被设计为尽可能简单,最少量的新原语和对项目结构的要求。

    MobX

    MobX 是用于管理应用程序状态的替代库。不像Redux那样将状态保存在一个不可变的存储中,它鼓励您仅存储最低限度的必需状态,并从其中获取剩余的数据。它提供了一组装饰器来定义可观察和观察者,并将反应逻辑引入到你的状态管理代码中。

    Storybook

    Storybook是React的组件开发环境。它允许您快速设置单独的应用程序来显示您的组件。除此之外,它提供了许多附加组件来记录,开发,测试和设计您的组件。

    同样的,可以从Awesome React list了解更多的工具和类库。


    学习曲线与开发体验

    选择新技术的一个重要标准是学习它是否容易。当然,答案取决于广泛的因素,例如您以前的经验和对相关概念和模式的普遍了解。如果我们假设你已经知道ES6 +,构建工具和所有这些,我们来看看你还需要了解什么。

    React

    有了React,你会遇到的第一件事就是JSX。对于一些开发人员来说似乎刚开始会觉得很别扭,但它并没有增加复杂性; 只是表达式,实际上还是JavaScript,还有一个特殊的类似HTML的语法。您还需要学习如何编写组件,使用props进行配置和管理内部状态。不需要学习任何新的逻辑结构或循环,因为所有这些都是纯JavaScript。

    官方教程是开始学习React的好地方。一旦完成了官方教程,接下来应该熟悉并掌握React的路由机制 。React Router v4版本可能稍微复杂和非常规,但也不许太过担心。

    使用Redux将需要一个范式的转变,免费入门Redux视频课程可以快速介绍核心概念。根据项目的大小和复杂性,找到并学习一些额外的库,这可能是棘手的一部分,但之后,一切都应该变得顺利。

    其实,React的上手非常容易,最难的部分可能是如何挑选合适你项目或产品的类库。

    Angular

    Angular将向您介绍比React更多的新概念。首先,您需要使用TypeScript。对于具有静态类型语言(如Java或.NET)经验的开发人员,这可能比JavaScript更容易理解,但对于纯JavaScript开发人员,这可能需要一些额外的学习。

    框架本身丰富的技术主题可以从诸如模块,依赖注入、装饰器、组件、服务、管道、模板和指令等基础开始,到更高级的主题,如更改检测,区域,AoT编译和RxJS。这些都在文档中。RxJS是一个很重的话题,在官方网站上有详细描述。虽然在基本功能层面上使用起来相对容易,但在转到高级应用时会变得更加复杂。

    总而言之,我们注意到Angular的进入壁垒高于React。新概念的数量绝对令新来者感到困惑。又是碰到一些问题还不得不Google后才能找到答案,但是,就像之前说的,是否合适,还是取决于更多的因素。


    前景

    Angular

    就在2017年的3月,Angular已经发布了4.0的版本(兼容2.x版本),关于为什么是4.0,官方的解释是因为Router这个主要核心组件的版本已经是4.0.0,如果Angular还用3.0会引起混淆,如下图:

     

    4.0版本中主要是大幅度的减小了代码体积(60%),同时提高了加载的速度(肉眼可查的程度),同时报错的信息更清晰了。根据官方的文档,Angular的版本升级会以比较快的速度进行迭代

     

    无论是大版本的6个月迭代,还是每周的hotfix,能看出Angular团队想用快速升级的策略迅速占领市场。

    React

    反观React的升级倒是非常谨慎的,这从最新的v15.5.0的发布新闻博客中就能看出

    不过,从博客中能看到React即将迎来v16,不知道整个重写的React会给我们带来什么惊喜。不过,需要提一下的是Facebook已经与去年底的时候发布了React VR,有兴趣的同学可以围观以下。


    契合度

    无论是哪个框架,适合自己的才是“好“的,所以需要你从项目(产品)本身的角度去衡量,以下的问题列表可能并不全面,但至少可以作为一个开始

    • 该项目(产品)有多大规模?
    • 要维护多久?
    • 所有的功能是提前清楚地定义还是灵活的改变?
    • 域模型和业务逻辑是否复杂?
    • 你定位什么平台? Web,手机,桌面?
    • 你需要服务器端渲染吗? SEO重要吗?
    • 你会处理很多实时事件流?
    • 你的团队有多大?
    • 你的开发人员有多丰富,他们的背景是什么?
    • 是否有任何您想要使用的现成的组件库?

    如果您正在开展一个大型项目,并希望尽可能减少错误选择的风险,请考虑先创建一个demo用于验证产品概念。选择项目的一些主要功能,并尝试使用其中一个框架以简单的方式实现它们。 Demo通常不会(也不应该)花费很多时间,但会提供一些宝贵的经验,可以帮助您验证关键的技术要求。如果对结果感到满意,可以继续全面构建。如果没有,会给你充分的时间重新选择。在项目发开过程中,你还可以借助一些支持Angular和React的开发工具来提高开发效率,如Wijmo,这是一款为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。无论你的应用程序是移动端、PC端、还是必须要支持IE6,Wijmo Enterprise 均能满足需求。


    总结

    通过以上的6个方面对比了React和Angular这两个目前最热的前端框架,希望能对你在选择时提供一些参考。但是否真的是合适自己的,或许真的需要用过才知道

    原文链接:https://www.sitepoint.com/react-vs-angular/

    转载请注明出自:葡萄城控件

    展开全文
  • Angular、Vue和React都是目前比较流行的前端框架,不同的企业对其前端工作者有不同的要求,那么这三个框架之间有什么样的区别呢?   ▍Angular 框架比较成熟完整,过于庞大,上手难; 指令以ng-xxx开头; 由...

    Angular、Vue和React都是目前比较流行的前端框架,不同的企业对其前端工作者有不同的要求,那么这三个框架之间有什么样的区别呢?

     

    ▍Angular

    1. 框架比较成熟完整,过于庞大,上手难;
    2. 指令以ng-xxx开头;
    3. 由谷歌开发和维护;
    4. 版本1比较适合PC端开发,版本2在往移动端靠;
    5. 不支持低版本浏览器;
    6. 内置指令和自定义指令;
    7. 内置过滤器和自定义过滤器;
    8. 支持双向数据绑定;

     

    ▍Vue

    1. 它是一个轻量级框架,其核心库只关注视图层,简单小巧、易学易上手;
    2. 指令以v-xxx开头;
    3. 个人维护项目;
    4. 适合于移动端开发;
    5. 不支持低版本浏览器;
    6. 内置指令和自定义指令;
    7. 内置过滤器和自定义过滤器;
    8. 支持双向数据绑定;
    9. 使用DOM模板。中心思想:一切都是组件,组件实例之间可以嵌套;
    10. 核心库不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;
    11. 基于依赖追踪的观察系统,并且异步队列更新。

     

    ▍React

    1. 依赖虚拟DOM;
    2. 采用特殊的JSX语法;
    3. 中心思想:一切都是组件,组件实例之间可以嵌套;
    4. 核心库不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

     

    ▍参考文章

    vue、react、angular三者的比较 | 博客园vue 与 react,angular 优缺点对比 | 简书

     

    展开全文
  • 前端这几年的技术发展很快...开发框架,如AngularReact,Vue.js,Angular2等; 3.开发工具的丰富前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术; 4.前端开发范围的扩展,如服务端的nodejs,e...
  • 题外话:学习了jQuery后,就在公司接触了Angular,第一次接触的时候,简直一脸懵逼呀,对于曾经习惯了对DOM元素进行操作的我真的好难好难,对于曾经没工作经验的我,Angular1入门还是比较难的,还好,努力克服了这个...
  • 目前vue,angularreact这三个前端框架非常流行,但是在很多场景下,我们在选择技术路线的时候总是很纠结,不知道该选择哪一种,这个问题的是本质是对框架的优劣认识不清晰。在这里不详细对比技术细节,因为技术...
  • 就在几年前,开发人员主要在争论是否应该在项目中使用Angular vs React。但是在2018年2019年期间,我们看到了名为Vue.js的第三个“”团体“”的加入混战。展望2020年,这篇文章是一个综合指南,可能是您合适的解决...
  • Vue与Angular以及React区别? 与AngularJS的区别 相同点: 都支持指令:内置指令自定义指令;都支持过滤器:内置过滤器自定义过滤器;都支持双向数据绑定;都不支持低端浏览器。 不同点: AngularJS的学习成本...
  • 选择 Vue 而不选择 AngularReact,有下面几个原因,当然不是对每个人都适合,在 API 与设计两方面上 Vue.js 都简单得多,因此你可以快速地掌握它的全部特性并投入开发。 框架模式 MVX框架模式:MVC+MVP+MVVM 1....
  • 作者 | Maja Nowak 译者 | 苏本如 责编 | 屠敏 来源:...随着在Github上的支持数超过12万,Vue.js以相当大的优势击败了Angular和React成为当前最热门的JavaScript前端框架。虽然在总的市场占有率上React依然称...
  • 我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结。无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划,你都有可能从...
  • 前端框架近些年来发展地很快,主流的框架主要angularReact、Vue等,对这三个框架进行宏观对比,便于选择。一、angular angular是一款优秀的前端的JS框架,已经被Google等多款产品使用。 特性: 1、良好的应用...
  • 在过去的一段日子里我大量地使用了 Angular 1.x,直到我开始使用 React。这两个项目我使用得比较广泛。但是,其中有几个原因使我转向了 React。刚开始原因还不是那么清晰,但现在回顾起来,我认为我可以对此作出一...
  • 概念:vue是一个构建数据驱动的web界面的渐进式框架,它的目标是通过尽可能简单的API实现响应的数据绑定组合的视图组件 vue对比angular 1、vue在设计之初参考了很多angularjs的思想 2、vue相对比与angular比较简单...
  • 废话不多说,本篇主要是介绍Angular中各种组件的用法,顺便跟比较RN中的组件做比较1.组件生成方式 在RN中,组件的生成是通过注解,RN中则是通过继承组件类。2.组件交互方式 2.1 父子组件数据交互方式 NG中组件...
  • 如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的...
  • vue.js兼具angular.js和react的优点,并且剔除了他们的缺点。 二、vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他...
  • Vue与React和Angular比较

    2019-03-25 16:03:23
    Vue与React和Angular区别 vue.js更轻量,压缩后大小只有20K+, 但React压缩后大小为44k,Angular压缩后大小有56k,所以对于移动端来说,vue.js更适合; vue.js更易上手,学习曲线平稳,而Angular入门较难,概念较多...
1 2 3 4 5 ... 20
收藏数 24,521
精华内容 9,808