【.com原稿】目前的两种前端开发框架你是不是无从选择？本文将深入对比分析React和Angular哪个项目更适合你。在编程方面，Angular和React是前端开发人员比较流行的两个JavaScript框架。根据2018年版StackOverflow开发者调查，Angular、React和Node.js是所有软件工程师公认的三大最佳编程框架。请参阅：https://insights.stackoverflow.com/survey/2018/#technology这两个前端框架在流行度、架构相似性和基于JavaScript的视角方面有许多相似之处。在本文中，我们将深入比较React和Angular。我们将从这两个框架的基本特性开始。当然，如果你对这类话题特别感兴趣，请看：https://www.altexsoft.com/blog/engineering/angularjs-vs-knockout-js-vs-vue-js-vs-backbone-js-其中-framework-suits-your-project-best/?utm_source=DZone&utm_medium=referralAngular和React.js的简单介绍Angular是Google支持的前端框架。它与最常用的代码编辑器兼容。MEAN堆栈的一部分。请参阅：https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-angular-development/#angular%202%20and%20angular%202+https://www。altexsoft.com/blog/engineering/the-good-and-the-bad-of-javascript-full-stack-development/?utm_source=DZone&utm_medium=referral和MEAN堆栈是一组免费和开源的以JavaScript为中心的工具集,可用于构建动态网站和网络应用程序。其组件包括：MongoDB（NoSQL数据库）、Express.js（Web应用程序框架）、Angular或AngularJS（前端框架）和Node.js（服务器平台）。Angular框架允许开发人员创建动态的单页Web应用程序（Single-PageWebApplications，SPA）。Angular的初始版本解决了将基于HTML的文档转换为动态内容的问题。在这里，我们将重点关注它的更新版本Angular2+，以及它与AngularJS的不同之处。在行业案例中，Angular主要被Forbes、WhatsApp、Instagram、healthcare.gov、HBO、Nike等机构使用。React.jsReact.js是Facebook于2011年创建的用于构建动态用户界面的开源JavaScript库。详情请看：https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/React是基于JavaScript和JSX的，而JSX是由Facebook开发的一个PHP扩展，可以为前端开发创建可重用的HTML元素。React有一个独立的跨平台框架ReactNative，可用于移动开发。在行业案例中，React主要被Netflix、PayPal、Uber、Twitter、Udemy、Reddit、Airbnb和Walmart等组织使用。工具集：框架与库有过开发经验的读者都知道，框架生态系统定义了工程体验的无缝性。下面，让我们看看Angular和React的主要特性。首先，React并不是一个真正的框架，它实际上是一个库。因此，它需要与其他工具和库进行多次集成。相比之下，使用Angular时，您已经拥有了构建应用程序所需的一切。Angular提供了以下开箱即用的功能：RxJS：它是一个异步库，通过设置多个数据交换通道来减少资源消耗。RxJS的主要优点是：它能够独立和同步地处理事件。但是，有一个问题：虽然RxJS可以与许多框架一起使用，但您必须学习该库才能充分利用Angular。AngularCLI：具有强大的命令行界面，可帮助创建应用程序、添加文件、测试、调试和部署。依赖注入：框架将各个组件从它们的依赖中分离出来，使它们可以同步运行；也可以在不重新配置组件的情况下更改依赖关系。Ivy渲染器：作为新一代Angular渲染引擎，Ivy的性能得到了显着提升。AngularUniversal：是一种服务端渲染的技术，可以快速渲染第一个应用页面，或者在可能缺乏渲染资源的浏览器端设备（比如移动设备）上显示应用。Aptana、WebStorm、SublimeText、VisualStudioCode：都是Angular的流行代码编辑器。Jasmine、Karma和Protractor：都是在浏览器中进行端到端测试和调试的工具。React需要通过多重集成和各种配套工具来运行：Redux：是一个状态容器，可以在大型应用程序中加速React的运行，可以管理具有多个动态元素的应用程序组件，也可以用于渲染。此外，React使用更广泛的Redux工具集，包括：Reselect、Redux的选择器库和ReduxDevToolsProfilerMonitor。Babel：是一个转译器，可以将JSX转换为浏览器可以理解的JavaScript应用程序。Webpack：由于所有组件都写在不同的文件中，所以我们需要将它们捆绑在一起以便更好地管理。而Webpack是公认的标准代码打包器。ReactRouter：路由器是React常用的标准URL路由库。类似于Angular：您的代码选择不受限制。常见的编辑器包括VisualStudioCode、Atom和SublimeText。与Angular不同：在React中，您不能使用单一工具来测试整个应用程序，而必须针对不同类型的测试使用不同的工具。以下是React如何与各种工具一起工作的列表：用于组件测试的Enzyme和Unexpected-react。Jest用于JavaScript代码。用于ReactDOM测试的react-testing-library。用于单元测试的React-unit。Skin-deep用于渲染测试。ReselectDevTools(https://github.com/skortchmark9/reselect-tools)提供的此类工具集可用于调试和可视化。ReactDeveloperTools的ChromeExtension和FirefoxExtension以及ReactSight也可以可视化状态和属性树（proptree）。这两种工具形成了一个强大的生态系统。通常，用户倾向于选择React，但React需要像Redux这样的多种集成来扩展其服务能力。基于组件的架构：两种工具的可重用和可维护组件这两种框架都具有基于组件的架构。这意味着单个应用程序可以通过模块化、内聚和可重用的组件构建各种用户界面。在Web开发中，基于组件的架构通常被认为比使用其他结构更容易维护。它通过创建单独的组件来加快开发过程，并使开发人员能够缩短上市时间以及调整和扩展应用程序。①代码：TypeScriptvsJavaScript(JSX)Angular使用的是TypeScript语言（当然如果你愿意也可以使用JavaScript）。TypeScript是JavaScript的超集，适用于大型项目。它既紧凑又能够识别输入中的错误。TypeScript的其他优势包括：更好的导航和自动完成、更快的代码重构。此外，TypeScript的可扩展性和简洁性也非常适合企业规模的大型项目。React使用JavaScriptES6和JSX脚本。JSX是JavaScript的语法扩展，用于简化UI编码并使JavaScript代码看起来更像HTML。JSX不仅可以检测各种错误，还可以保护代码。此外，Babel(https://babeljs.io/)使用JSX进行浏览器编译。另一方面，Babel是一个编译器，可以将代码转换为网络浏览器可以读取的格式。虽然JSX在语法上几乎与TypeScript相似，但一些开发人员发现学习起来更加复杂。②DOM：realvsvirtual文档对象模型（DocumentObjectModel，DOM）是HTML、XHTML或XML文档的编程接口。它具有树状组织结构，使脚本能够动态地与Web文档的内容和结构进行交互并进行更新。DOM有两种类型：虚拟的和真实的。在实现上，即使一个元素发生变化，传统或真实的DOM也会更新整个树结构。虚拟DOM是真实DOM的映射，因此它只跟踪变化的部分，只更新特定的元素，而不会影响整棵树的其他部分。React使用虚拟DOM，而Angular在真实DOM上运行并使用变更检测来查找那些需要更新的组件。虽然虚拟DOM被认为比真实DOM操作起来更快，但在Angular中，由于需要更改检测，这两种方法实际上在性能方面具有可比性。③数据绑定：双向vs向下（单向）数据绑定是模型（业务逻辑）和视图（UI）之间同步数据的过程。数据绑定有两种基本实现，单向和双向。单向和双向数据绑定的区别在于模型视图的更新过程。Angular中的双向数据绑定类似于“模型-视图-控制器（MVC）”架构，参见：https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller由于模型和视图是同步的，所以数据的变化会影响视图，视图的变化又会反过来触发数据的相应变化。React使用单向或向下数据绑定。单向数据流不允许子元素在更新时影响父元素，从而确保只有批准的组件被更改。可以看出，这种数据绑定使得代码更加稳定，当然还需要额外的工作来同步相应的模型和视图。毕竟子组件的变化触发更新父组件的配置需要更多的时间。总的来说，React的单向数据绑定的可预测性更高，代码更稳定，调试也更容易。Angular中传统的双向数据绑定很容易使用。④应用规模和性能：Angular略胜一筹。在处理复杂和动态的应用程序时，AngularJS的性能很低。并且由于使用了虚拟DOM，React的各种应用比同等大小的AngularJS应用速度更快。然而，根据来自freeCodeCamp.org的JacekSchae的研究，新版本的Angular比React+Redux稍微快一些。详情请参考：https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962此外，研究还表明，Angular的应用体积稍小，被测传输大小（TransferSize）只有129KB，而React+Redux有193KB。⑤预构建的UI设计元素：AngularMaterial与社区支持的组件Angular：随着MaterialDesign语言在Web应用程序中变得流行，更多的工程师受益于其开箱即用的Material工具集。Angular具有预构建的材料设计组件。其AngularMaterial可以实现表单控件、导航、布局、按钮、指示器、弹窗、模块、数据表等一系列常用的交互模型。由于存在各种预构建元素，配置UI变得更快。React：它的大部分UI工具都来自它的社区。目前，ReactPortal(https://reactjs.org/community/ui-components.html)上的UIComponents部分提供了大量免费和部分付费组件。您需要安装Material-UI库和各种依赖项才能使用React的材料设计进行构建。此外，您还可以使用使用React构建的Bootstrap组件（https://react-bootstrap.github.io/），以及一组UI组件和工具（https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42)。⑥移动可移植性：NativeScript和ReactNative这两个框架都带有允许工程师将现有Web应用程序移植到移动应用程序的工具。我们还对NativeScript（Angular）和ReactNative进行了深入的分析和比较。详情请参考：https://www.altexsoft.com/blog/engineering/xamarin-vs-react-native-vs-ionic-vs-nativescript-cross-platform-mobile-frameworks-comparison/?utm_source=DZone&utm_medium=referral这里简单总结一下要点：NativeScript（https://www.nativescript.org/）是一个以TypeScript为核心语言的跨平台移动端框架。它的用户界面是使用XML和CSS构建的。当开发人员从Web应用程序移植业务逻辑并在其UI上使用相同的技巧时，该工具允许iOS和Android平台共享大约90%的代码。NativeScript背后的想法是为移动设备编写一个单一的UI，并根据特定需求为每个平台对其进行微调。与使用WebView渲染的混合跨平台解决方案不同，该框架在JavaScript虚拟机中运行各种应用程序，并直接连接到原生移动API，从而确保了与原生应用程序相媲美的高性能。ReactNative（https://facebook.github.io/react-native/）：这个JavaScript框架是为移动应用程序的跨平台实现而准备的，可以支持从Web移植。与NativeScript相比，ReactNative采用的方法略有不同：它鼓励其社区为不同的平台编写单独的UI，并坚持“一次学习，随处编写”的方法。所以代码共享度也是70%。此外，ReactNative也有类似于NativeScript的原生API渲染功能。但它需要构建一个额外的桥接API层并使用本机控制器连接到JavaScript运行时。总的来说，如果您需要运行具有相同业务逻辑的Web和移动应用程序，那么这两个框架都是不错的选择。当然，NativeScript更侧重于代码共享和缩短产品上线时间；而ReactNative会用更长的开发周期来换取更接近原始的观感。⑦文档和厂商支持：文档不足，依赖庞大的社区自2018年1月起，由于谷歌对Angular生态系统的不断发展，他们不仅可以为框架提供长期支持（Long-TermSupport，LTS），还专注于修复错误并积极改进。但是，与其框架的开发速度相比，相应的文档更新并不是那么及时。一些开发人员对其CLI文档的更新速度表示担忧。下图是为方便Angular开发者而设计的交互式服务接口（https://update.angular.io/）。您可以自定义框架的当前版本和更新目标，获取更新内容列表。AngularJS因其文档(https://docs.angularjs.org/api)和提供比Angular2+更广泛范围的教程而受到开发人员的称赞。React社区也有与Angular类似的文档问题。由于React环境及其运行方式经常更新，因此您在使用React时必须做好改变和不断学习的准备。虽然React有一些新版本的文档（请参阅：https://reactjs.org/versions/），但跟上所有的变化和集成并不是一件容易的事。幸运的是，其社区的支持在一定程度上抵消了这些问题。React拥有大量开发人员，他们能够不时在专门的论坛上分享他们的知识。⑧学习曲线：Angular更陡峭Angular的学习曲线被认为比React更陡峭。Angular是一个复杂而冗长的框架，它以各种方式解决某个单一问题。然而，它需要许多重复操作才能实现复杂的组件管理。正如我们上面提到的，框架在不断发展，因此开发人员不得不适应它的变化。另外，由于Angular2+使用了TypeScript和RxJS，虽然TypeScript接近JavaScript，但用户仍然需要花一些时间学习RxJS。由于更新频繁，React也需要用户不断学习。当然，如果你已经很擅长JavaScript，那么重新开始也不需要很长时间。目前，Redux是必备工具，因为大约60%的React应用程序构建使用Redux，而React学习曲线在很大程度上取决于Redux库。不过，React也为初学者提供了各种实用教程。详情请参考：https://reactjs.org/tutorial/tutorial.html⑨社区和接受度：两者相媲美React在GitHub上的热度略高于Angular。它拥有113,719颗星和6,467位粉丝；Angular拥有41,978颗星和3,267名粉丝。根据2018年版的StackOverflow开发者调查（如下图），Angular拥有37.6%的开发者，而React拥有28.3%的用户。值得一提的是，该调查涵盖了AngularJS和Angular2+用户。有趣的事实：Angular也导致负面评论。根据同一项调查，45.6%的开发人员认为Angular是最差的框架之一。当然，这种负面反馈可能受到许多开发人员仍在使用AngularJS这一事实的影响，AngularJS比Angular2+存在更多问题。Angular社区甚至更大。相对而言，React的数据更好一些，只有30.6%的专业开发者不愿意使用它。你会选择哪个框架？综上所述，Angular背后的基本思想是为前端开发的整体体验提供强大的支持和工具集。感谢谷歌团队的不断更新和积极支持，该框架不会“野蛮生长”。其背后的工程师将努力保护现有社区，并协助各种开发人员和公司从AngularJS切换到具有更高性能和更小应用程序大小的Angular2+。同时，随着你的应用逐渐达到企业级规模，TypeScript可以增加应用代码的可维护性，因此变得越来越重要。当然，这些对于开发人员来说也面临着陡峭的学习曲线。React提供了一个更轻量级的解决方案，适合需要快速上手而又不需要太多学习时间的开发者。虽然它的代码库并没有详细说明各种工具集和方法，但是像Redux这样的常用工具还是需要你额外花时间去学习。由于React的性能与Angular相当，它对开发人员仍然具有吸引力。【原创稿件，合作网站转载请注明原作者和出处为.com】
