几年前,当我的代码开始被jQuery选择器和回调弄得乱七八糟时,AngularJS来拯救我。Angular帮助我提高了开发项目的可维护性。它有很多开箱即用的功能。
它是用于构建大型web应用程序的工具,极大地促进了这类应用程序的快速开发。我记得它的双向结合和作为真理唯一来源的模型哲学是如何让我震惊的。而且,在实践中,它们减少了整个应用程序的数据冗余。
随着时间的推移,我发现了Angular中的一些痛点。最终,它们让我非常沮丧,我开始四处寻找替代方案。以下是我对Angular的一些担忧。
DOM用于执行。
Angular的执行流严重依赖于DOM。在Angular应用的默认引导中,它会扫描DOM并根据指令的优先级进行编译,这使得调试和测试执行顺序变得困难。
双向绑定是一把双刃剑。
随着组件复杂性的增加,这种方法可能会导致性能问题。
双向绑定如何影响性能?JavaScript (ES5)没有任何实现来通知变量或对象的任何变化,所以Angular使用了所谓的“脏检查”来跟踪数据变化,并将它们与用户界面(UI)同步。事后进行脏检任何操作在Angular的作用域(美元的消化
周期),随着绑定数量的增加,这会导致性能变慢。
双向绑定的另一个问题是页面上的许多组件都能够更改数据,这意味着有多个数据输入源。如果处理不好,这可能会导致混乱和压倒性的局面。公平地说,这是一个实现问题,而不是Angular本身的问题。
Angular有自己的世界。
Angular中的每个操作都必须经过它的摘要周期,否则你的组件将无法与你的数据模型同步。这会导致与其他依赖项的兼容性问题。如果你使用任何涉及数据更改的第三方JavaScript库,你需要用Angular的库来包装它美元的应用
函数。
或者,如果它是一个实用程序库,则需要将其转换为服务。这就像你必须重新发明你使用的每一个JavaScript库,以便它与Angular互操作。
依赖注入。
JavaScript目前还没有自己的包管理器和依赖解析器。
AMD、UMD和CommonJS已经很好地解决了这一差距。但是,直到最近, Angular在这些方面都做得不好。相反,它引入了自己的依赖注入(DI)。
不过,公平地说,有一些非官方的Angular依赖注入实现使用了RequireJS。
陡峭的学习曲线。
使用Angular需要学习大量的概念,包括但不限于:
- 模块
- 控制器
- 指令
- 作用域
- 模板
- 连接功能
- 过滤器
- 依赖注入
开始使用Angular可能会非常困难。胆小的人不适合。所有这些都让我选择了React。
React有什么了不起的?
反应是一种用于构建用户界面的新开源框架,它是开发JavaScript应用程序的另一种方式。React由Facebook和Instagram主导。
需要明确的是:反应不是像AngularJS这样的应用开发框架。把两者相提并论是不公平的。React是什么时候介绍了在2013年5月的JSConf EU会议上,与会者被其中的一些概念震惊了,比如“单向数据流”和“虚拟DOM”。
React是用来构建用户界面的。换句话说,直接从项目的官方登陆页面:“人们使用React作为MVC中的V然而,你可以用它来编写自包含的组件,这或多或少可以与Angular的指令相比较。React重新思考了我们当前的web开发概念和最佳实践。
例如,它鼓励单向数据流他相信组件是由数据驱动的状态机。大多数其他类似的框架都喜欢使用DOM并直接操作它,而React讨厌DOM,并努力保护开发人员不受它的影响。React提供了定义UI组件所需的最小API。
不多不少。它遵循UNIX哲学:小即是美。做一件事,并且做到最好。
你可以找到Pete Hunt(他在Facebook/Instagram工作)对Angular和React的更详细的比较。
为什么我要切换到React?
下面是我喜欢React的一些地方。
React很快
与其他框架相比,React采用了不同的DOM方法。它不允许您直接使用DOM。它引入了一个叫做虚拟DOM,在JavaScript逻辑和实际DOM之间。
这个概念提高了web性能。
在连续的渲染中,React对Virtual DOM执行差分(diff),然后只更新实际DOM中需要更新的部分。
跨浏览器的兼容性
Virtual DOM还有助于解决跨浏览器的问题,因为它为我们提供了一个标准的API,甚至可以追溯到ie8。
模块化
编写自包含的UI组件使应用程序模块化,这反过来又将问题隔离到有问题的组件中。每个组件都可以独立地开发和测试,并且可以使用其他组件。这等同于可维护性的改进。
单向数据流让事情更清晰
Flux是一种在JavaScript应用程序中创建单向数据层的架构。它与React视图库一起由Facebook概念化。Flux的概念让大型应用开发变得更简单。
Flux是一个概念,而不是特定于工具的实现。它可以合并到其他框架中。比如,亚历克斯·拉特雷有一个很好的Flux的实现在React中使用骨干收集和模型。
只是JavaScript
与传统web相比,现代web应用程序的工作方式有所不同。例如,View层需要在不影响服务器的情况下使用用户交互进行更新。因此视图和控制器需要彼此严重依赖。
许多其他框架使用模板引擎,如Handlebars或Mustache来处理视图层。但是React认为,视图和控制器是如此相互依赖,以至于它们必须驻留在一个单一的地方,而不使用任何第三方模板引擎,而且,最重要的是,不离开JavaScript的范围。
同构JavaScript
单页JS web应用程序的最大缺点是,当被搜索引擎抓取时,它有局限性。React对此有一个解决方案。React可以在将应用程序发送给用户代理之前在服务器上预渲染应用程序。
它可以将服务器上预呈现的静态内容的相同状态恢复到活动应用程序中。因为搜索引擎爬虫依赖于服务器的响应而不是JavaScript的执行,预渲染你的应用程序有助于SEO。
它和别人相处得很好
在构建大型应用程序时,像RequireJS、Browserify和Webpack这样的加载器和捆绑器是非常需要的。他们使艰巨的任务可以克服。不幸的是,当前版本的JavaScript没有提供模块绑定器或加载器。
(虽然在即将到来的ES6版本中有一个解决这个问题的建议System.import
).幸运的是,我们有一些替代品,如RequireJS和Webpack,它们非常简洁。React是用Browserify构建的,但如果你想注入图像资产和编译少或CoffeeScript,那么Webpack可能是一个更好的选择。
关键是:你有钱那选择。
我需要React的另一个开发框架吗?
使用React,你可以构建用户界面,但是你仍然需要进行AJAX调用,应用数据过滤器,以及其他Angular已经做过的事情。所以,如果我们需要一个额外的JavaScript应用开发框架,为什么要抛弃Angular呢?
框架是一组模块和规则。如果我不需要它的某些模块,或者想把一个模块换成另一个工作更好的模块,我该怎么做?实现模块化和更好的依赖管理的方法之一是通过包管理器。
那么,我们如何在Angular中管理包呢?这取决于你,但要知道Angular有自己的世界。你很可能需要将第三方包适配到Angular的世界中。
另一方面,React只是JavaScript。任何用JavaScript编写的包都不需要在React中进行任何包装。对我来说,使用像npm和Bower这样的包管理器更好。
我们可以选择我们的组件并制作定制的工具集。需要明确的是:与仅仅使用Angular这样的综合应用开发框架相比,这要复杂得多。在这方面,React的可取之处是鼓励使用npm,它有很多现成的包。
例如,要开始使用React构建应用程序,你可以使用其中一个全栈启动套件.
切换到React不是无痛的!
因为Angular是一个应用开发框架,所以它有很多优点。的AJAX包装器等优秀特性http美元
服务,美元的问
作为承诺服务,ng-show
,ng-hide
,ng-class
,ng-if
作为模板的控制语句-所有这些神奇的东西。
React不是一个应用程序开发框架,所以你需要考虑如何处理构建应用程序的其他方面。例如,我在做一个开源项目叫做react-utils它可以与React一起使用来简化开发。可以说,社区也积极贡献类似的可重用组件来填补空白。
反应组件是一个非官方的目录网站,在那里您可以找到这样的开源组件。React的理念不鼓励你使用双向绑定,这会在处理表单元素和可编辑数据网格时带来很多痛苦。但是,当您开始理解Flux数据流和存储时,事情就会变得更加清晰、简单和容易。
React是新产品。它周围的社区需要一段时间才能成长起来。另一方面,Angular已经获得了巨大的普及,并且有相对大量的可用扩展(例如。
AngularUI和Restangular)。然而,尽管React的社区是新的,它正在快速增长。像React Bootstrap这样的扩展就是一个证明。
我们有更多可用的组件只是时间问题。
结论
如果你喜欢Angular的方法,那么一开始你可能会讨厌React。主要是因为它是单向数据流,缺乏应用开发功能。你最终需要自己处理很多事情。
但一旦你熟悉了Flux的设计模式和React的理念,我保证你会开始看到它的美丽。Facebook和Instagram都在使用React(因为他们正在领导这个项目)。GitHub的新源代码编辑器Atom是使用React构建的。
即将到来的雅虎!邮件正在React中重新构建。React已经有了大型应用程序,大型科技公司也押注于此。