51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

入门前端框架的必备知识点:深度比较React和Angular

QQ截图20200831182239.jpg

俗说话,金无足赤,人无完人,任何一种产品没有绝对完美的,只是根据市场情况,取长补短而已,如何最大化地用长处掩盖自己的短处。回到我们学习前端方面,有些童鞋刚开始在学习前端框架的时候,会有些疑问,不知道学哪个好,今天我们分析下React和Angular二者的优劣势。

从哪儿开始?

在选择任何工具之前,您需要回答两个简单的问题:"这本身就是好工具吗?" 和"对于我的用例来说,它会很好地工作吗?" 它们都不意味着任何东西,因此您始终需要牢记两者。好吧,问题可能不是那么简单,所以我们将尝试将其分解为较小的问题。

有关工具本身的问题:

  • 它有多成熟?背后是谁?

  • 它具有什么样的功能?

  • 它采用什么架构,开发范例和模式?

  • 周围是什么生态系统?

自我反省的问题:

  • 我和我的同事能够轻松学习此工具吗?

  • 它适合我的项目吗?

  • 开发人员的体验如何?

使用这一系列问题,您可以开始评估任何工具,我们还将基于React和Angular进行比较。

我们还需要考虑另一件事。严格来讲,将Angular与React进行比较并不完全公平,因为Angular是一个成熟的,功能丰富的框架,而React只是一个UI组件库。偶有机会,我们将结合一些经常使用的库来讨论React。

Maturity

成为一名熟练的开发人员的重要组成部分是能够在既定的,经过时间验证的方法与评估新的尖端技术之间保持平衡。通常,在采用由于某些风险而尚未成熟的工具时,应格外小心:

  • 该工具可能有故障且不稳定。

  • 供应商可能会意外放弃它。

  • 如果您需要帮助,可能没有足够的知识库或社区。

  • React和Angular都来自好家庭,因此我们似乎对此充满信心。

React

React由Facebook开发和维护,并用于其产品,包括Instagram和WhatsApp。自2013年以来一直存在,所以它并不是全新的。它也是GitHub上最受欢迎的项目之一,在撰写本文时已超过150,000个星。其他一些使用React的著名公司包括Airbnb,Uber,Netflix,Dropbox和Atlassian。听起来不错。

Angular

Angular自2016年以来一直存在,使其比React还要年轻,但它也不是一个新手。它由Google维护,正如Igor Minar所述,即使在2018年,它也被Google超过600百万个应用程序使用,例如Firebase Console,Google Analytics,Google Express,Google Cloud Platform等。在Google之外,Forbes,Upwork,VMWare 等使用Angular 。

特征

就像我之前提到的,Angular具有比React更多的功能。根据您的看法,这既可以是好事也可以是坏事。


两种框架都具有一些共同的关键特征:组件,数据绑定和与平台无关的呈现。

Angular

Angular开箱即用提供了现代Web应用程序所需的许多功能。一些标准功能是:

  • 依赖注入

  • 模板,基于HTML的扩展版本

  • 具有生命周期挂钩的基于类的组件

  • 路由,由 @angular/router

  • Ajax请求使用 @angular/common/http

  • @angular/forms 用于建筑形式

  • 组件CSS封装

  • XSS保护

  • 代码拆分和延迟加载

  • 用于单元测试的测试运行器,框架和实用程序。

其中一些功能内置在框架的核心中,您没有选择不使用它们的选项。这要求开发人员熟悉诸如依赖项注入之类的功能,以构建甚至小的Angular应用程序。HTTP客户端或表单之类的其他功能完全是可选的,可以根据需要添加。

React

使用React,您将从一个更简单的方法开始。如果我们只看React,那么这里就是:

  • 而不是经典模板,它具有JSX,这是一种基于JavaScript的类似XML的语言

  • 具有生命周期挂钩或更简单功能组件的基于类的组件

  • 使用setState和hook进行状态管理。

  • XSS保护

  • 代码拆分和延迟加载

  • 错误处理边界

  • 单元测试组件的实用程序

开箱即用,React不提供任何东西用于依赖项注入,路由,HTTP调用或高级表单处理。您应该根据自己的需要选择要添加的其他任何库,这取决于您对这些技术的经验如何,既可以是好事,也可以是坏事。一些经常与React一起使用的流行库是:

  • 用于路由的React-router

  • 为HTTP请求获取(或axios)

  • 多种CSS封装技术

  • 酶或React测试库,用于其他单元测试实用程序

与我合作的团队发现可以自由选择要解放的库。这使我们能够根据每个项目的特定要求定制堆栈,而我们还没有发现学习新库的成本如此之高。

语言,范式和模式

从每个框架的功能退后一步,让我们看看两种框架都流行哪种高级概念。

React

考虑React时,会想到一些重要的事情:JSX,组件和挂钩。

JSX

与大多数框架相比,React没有单独的模板语言。React没有遵循将标记和逻辑分离的经典方法,而是决定使用JSX将它们组合在组件中,JSX是一种类似于XML的语言,允许您直接在JavaScript代码中编写标记。

虽然将标记与JavaScript混合的优点值得商,,但它具有无可争议的好处:静态分析。如果您在JSX标记中出错,则编译器将发出错误,而不是继续保持沉默。通过立即捕获错别字和其他愚蠢的错误,这将有所帮助。使用在不同项目中流行的JSX(例如MDX),它允许在markdown文件中使用JSX。

组件

在React中,您可以使用函数和类来定义组件。

类组件允许您使用ES类编写代码,并将组件逻辑结构化为方法。它们还允许您使用React的传统生命周期方法在组件安装,更新,卸载等过程中运行自定义逻辑。尽管对于熟悉OOP编程的人来说,这种表示法更容易理解,但是您需要了解JS所具有的所有细微差别,例如,如何this工作,并且不要忘记绑定事件处理程序。

功能组件被定义为简单功能。它们通常是纯净的,并在输入道具和渲染的输出之间提供清晰的映射。功能代码通常较少耦合,更易于重用和测试。在引入钩子之前,功能组件不能是有状态的,并且不能替代生命周期方法。

在React开发人员中,有一种趋势是放弃类组件,而倾向于使用更简单的功能组件,但是由于钩子是一种较新的功能,因此在大型React项目中通常会同时使用两种方法。

钩子 {#hooks}

钩子是版本16.8中引入的React的新功能。它们是允许您对功能组件中的组件状态和生命周期方法功能进行分类的函数。React提供了两个钩子:useState用于管理状态和useEffect创建副作用-例如加载数据或手动编辑DOM。

引入了挂钩,以使功能组件更简单,更易组合。现在,您可以将较大的功能拆分为较小的原子部分,从而可以将相关的功能部件分开-将它们与渲染逻辑分开,并在不同的组件中重复使用。钩子是使用类组件和其他模式(例如渲染功能和高阶组件)的一种较干净的替代方法,这些组件很快会变得过于复杂。

React提供了构建应用程序的方法,而无需涉及很多复杂的抽象层。通过将功能组件与挂钩一起使用,您可以编写更简单,更具原子性和可重用性的代码。即使将代码和模板组合在一起的概念可能会引起争议,但将表示形式和应用程序逻辑分为不同的功能可以使您获得相似的结果。

Angular

Angular也有一些有趣的事情,从组件,服务和模块等基本抽象开始,到TypeScript,RxJS和Angular Elements以及状态管理方法。

主要概念

Angular具有比React更高的抽象级别,因此引入了更多基本概念来熟悉。主要的是:

  • 组件:定义为经过特殊装饰的ES类,负责执行应用程序逻辑和呈现模板

  • 服务:由组件使用的负责实现业务和应用程序逻辑的类

  • 模块:本质上是DI容器,用于将相关组件,服务,管道和其他实体连接在一起。

Angular大量使用了类以及诸如DI之类的概念,这些概念在前端开发领域不太流行,但是任何有后端开发经验的人都应该熟悉。

TypeScript {#typescript}

TypeScript是一种基于JavaScript的新语言,由Microsoft开发。它是JavaScript ES2015的超集,并包含该语言的较新版本的功能。您可以使用它代替Babel来编写最新的JavaScript。它还具有功能非常强大的键入系统,可以通过结合使用批注和类型推断来静态分析代码。

还有一个更微妙的好处。TypeScript受Java和.NET的影响很大,因此,如果您的开发人员具有其中一种语言的背景,他们可能会发现TypeScript比普通的JavaScript更易于学习(请注意,我们是如何从工具切换到您的个人环境的) 。尽管Angular是第一个积极采用TypeScript的主要框架,但它现在在Deno(一种TypeScript本机运行时),Puppeteer和TypeORM 等许多其他项目中也受到关注。

也可以(和明智地)将TypeScript与React一起使用。

RxJS {#rxjs}

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

该库已被Angular在其HTTP模块中采用,也可用于某些内部使用。当您执行HTTP请求时,它返回一个Observable而不是通常的Promise。这种方法为有趣的可能性打开了大门,例如具有取消请求,重试多次或使用连续数据流(例如WebSockets)的能力。但这仅仅是表面。要掌握RxJS,您需要了解各种类型的Observable,Subject以及大约一百种方法和运算符。

国家管理 {#statemanagement}

类似于React,Angular组件具有组件状态的概念。组件可以将数据存储在其类属性中,并将值绑定到其模板。如果要在应用程序之间共享状态,则可以将其移动到有状态服务,该服务以后可以注入到组件中。由于React式编程和RxJS是Angular中的一等公民,因此通常会使用可观察对象根据一些输入来重新计算部分状态。但是,这在较大的应用程序中可能会变得棘手,因为更改某些变量会触发难以遵循的多方向更新级联。有一些用于Angular的库,可让您简化大规模的状态管理。稍后我们将对其进行仔细研究。

角度元素 {#angularelements}

Angular元素提供了一种将Angular组件打包为自定义元素的方法。自定义元素也称为Web组件,是一种与框架无关的标准化方法,用于创建由JavaScript代码控制的自定义HTML元素。定义了此类元素并将其添加到浏览器注册表后,它将自动在HTML中引用的任何位置呈现。Angular元素提供了一个API,该API创建必要的包装器以实现自定义组件API并使其与Angular的更改检测机制配合使用。此机制可用于将其他组件或整个Angular应用程序嵌入到您的宿主应用程序中,并有可能在具有不同开发周期的不同框架中编写。

我们发现TypeScript是提高项目可维护性的好工具,特别是那些具有大型代码库或复杂域/业务逻辑的项目。用TypeScript编写的代码更具描述性,更易于遵循和重构。即使您不打算使用Angular,我们也建议您在下一个JavaScript项目中考虑使用它。RxJS引入了管理项目中数据流的新方法,但确实需要您对此主题有很好的了解。否则,会给您的项目带来不必要的复杂性。Angular元素具有重用Angular组件的潜力,很有趣的是,它将来会如何发展。

生态系统

开源框架的伟大之处在于围绕它们创建的工具数量。有时,这些工具比框架本身更有帮助。让我们看一下与每个框架相关的一些最受欢迎的工具和库。

Angular

角度CLI

现代框架的一个流行趋势是拥有一个CLI工具,该工具可帮助您引导项目,而不必自己配置构建。Angular 为此提供了Angular CLI。它使您仅需几个命令即可生成和运行项目。在中,所有负责构建应用程序,启动开发服务器和运行测试的脚本都对您隐藏了node_modules。您还可以使用它在开发和安装依赖项时生成新代码。

Angular引入了一种有趣的新方法来管理项目的依赖关系。使用时ng add,您可以安装依赖项,它将自动配置为可以使用。例如,当您运行时ng add @angular/material,Angular CLI从npm注册表中下载Angular Material,并运行其安装脚本,该脚本会自动将您的应用程序配置为使用Angular Material。这是使用Angular原理图完成的。Schematics是一种工作流工具,它允许库对您的代码库进行更改。这意味着库作者可以提供自动方式来解决在安装新版本时可能会遇到的向后不兼容的问题。

组件库 {#componentlibraries}

使用任何JavaScript框架时,重要的是能够将它们与您选择的组件库集成在一起,从而避免从头开始构建所有内容。Angular提供了与大多数流行的组件库以及其自身的本机库的集成。例如:

  • ng-bootstrap用于使用Bootstrap小部件

  • Material UI,用于Google的Material Design组件

  • NG-ZORRO,一个实现Ant Design规范的组件库

  • Angular的Onsen UI,移动应用程序的组件库

  • PrimeNG,丰富的Angular组件的集合

国家管理图书馆 {#statemanagementlibraries}

如果本机状态管理功能不足以满足您的需求,则可以在此区域中找到几个流行的第三方库。

最受欢迎的是NgRx。它受React的Redux的启发,但也使用RxJS来监视和重新计算状态中的数据。使用NgRx可以帮助您强制执行可理解的单向数据流,并减少代码中的耦合。

NGXS是另一个受Redux启发的状态管理库。与NgRx相比,NGXS致力于通过使用现代TypeScript功能来减少样板代码,并改善学习曲线和整体开发经验。

秋田(Akita)是个新手,可以让我们将状态保存在多个商店中,应用不可变的更新,并使用RxJS查询和传输值。

离子框架 {#ionicframework}

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

角度通用 {#angularuniversal}

Angular Universal是一个捆绑了各种工具的项目,以启用Angular应用程序的服务器端渲染。它与Angular CLI集成在一起,并支持多个Node.js框架(例如Express和Hapi)以及.NET核心。

Augury {#augury}

Augury是Chrome和Firefox的浏览器扩展程序,可帮助调试在开发模式下运行的Angular应用程序。您可以使用它来浏览组件树,监视更改检测并优化性能问题。

Compodoc {#compodoc}

Compodoc是Angular的静态文档生成器。与其他文档生成器类似,它可以基于代码中的TSDoc注释创建静态HTML文档。但是,Compodoc具有专门用于Angular的便捷功能,例如浏览模块结构,路由,以及将类分类为组件,服务等。

Ngx管理员 {#ngxadmin}

Ngx-admin是一个流行的框架,用于使用Angular创建自定义仪表板并将Nebular或Angular Material用作组件库。

令人敬畏的Angular列表中还有许多其他库和工具可用。

React {#react-3}

创建React应用 {#createreactapp}

Create React App是一个CLI工具,可用于React快速建立新项目。与Angular CLI相似,它允许您生成新项目,在开发模式下运行应用程序或创建生产包。它使用Jest进行单元测试,支持使用环境变量进行应用程序性能分析,用于本地开发的后端代理,TypeScript,Sass,PostCSS和许多其他功能。

组件库 {#componentlibraries-1}

与Angular相似,React有多种组件库可供选择:

  • 蚂蚁设计

  • 材质界面

  • React引导

  • 语义UI

  • Onsen用户界面,针对移动应用程序进行了优化

  • 蓝图,用于创建桌面应用程序

国家管理图书馆 {#statemanagementlibraries-1}

钩子的引入无疑已经动摇了React中的状态管理。是否甚至需要第三方状态管理库也正在进行讨论。即使钩子满足了使用状态的迫切需求,其他库仍可以通过允许我们使用经过时间考验的实现模式,许多其他库和开发工具来进一步推动这一工作。

Redux是一个受Flux启发的状态管理库,但有一些简化。Redux的关键思想是应用程序的整个状态由单个对象表示,该对象由称为reducers的函数进行了变异。减速器本身是纯函数,并且与组件分开实现。这样可以更好地分离关注点和可测试性。

MobX是用于管理应用程序状态的备用库。它不像Redux那样将状态保存在单个不可变存储中,而是鼓励您仅存储所需的最小状态并从中获取其余状态。它提供了一组装饰器来定义可观察对象和观察者,并将React性逻辑引入您的状态。

样式库 {#stylinglibraries}

与Angular不同,React不提供本机CSS封装功能,因此您需要寻找第三方解决方案。有许多解决此问题的方法,但其中没有明确的领导者。一些受欢迎的是:

  • 样式化的组件,一个库,允许您在应用样式后创建React组件,以及对组件进行样式设置

  • CSS模块,可让您导入CSS文件并生成唯一的隔离类名称以引用样式

  • Emotion,将样式化组件和CSS模块的方法组合到一个库中

道具类型 {#proptypes}

PropTypes是React的可选功能,可让您引入组件运行时prop验证。与在TypeScript中使用静态类型检查相比,PropTypes将在您的应用程序实际运行时执行类型检查。这在开发库时特别方便,即使您不能确定客户端是否正在使用TypeScript,也可以这样做。从React 15.5开始,prop类型已经被移到了一个单独的prop-types库中,现在完全是可选的。考虑到它的好处,我们建议您使用它来提高应用程序的可靠性。

React本机 {#reactnative}

React Native是Facebook开发的一个平台,用于使用React创建本机移动应用程序。与Ionic产生混合应用程序不同,React Native产生了真正的本机UI。它提供了一组标准的React组件,这些组件绑定到它们的本机对应组件。它还允许您创建组件并将其绑定到用Objective-C,Java或Swift编写的本机代码。

Next.js {#nextjs}

Next.js是用于React应用程序的服务器端渲染的框架。它提供了一种灵活的方法来完全或部分在服务器上呈现您的应用程序,将结果返回给客户端,然后在浏览器中继续。它试图使创建通用应用程序的复杂任务变得更容易,因此设置被设计为尽可能简单,并且对项目结构的新原语和需求最少。

React管理员 {#reactadmin}

React-admin是一个框架,用于在现有REST或GraphQL API之上构建CRUD风格的SPA应用程序。它具有方便的功能,例如使用Material Design构建的UI,国际化,主题化,数据验证等。

UI开发环境 {#uidevelopmentenvironments}

过去几年中,前端开发的一个主要趋势是开发工具的兴起,它使您可以交互地,独立于应用程序地开发,测试和记录组件。在React和Angular的支持下,Storybook已成为该领域的领导者之一。但是,React还有其他选择。

与Storybook类似,React Styleguidist可让您创建组件的交互式文档。与Storybook相反,生成的UI看起来更像是一个交互式自述文件,而不是单独的故事集。尽管Storybook可以作为开发环境发挥作用,但Styleguidist还是一种文档工具。

在本文中我们还提到了MDX。它允许您通过添加交互式JSX组件来增添Markdown文件的趣味性。

测试助手 {#testinghelpers}

测试UI组件通常涉及到必须在沙盒环境中呈现它们,模拟用户交互并验证输出结果。这些常规任务可以通过使用适当的测试助手来简化。对于Angular,这是内置的TestBed。对于React,有两个流行的候选对象:酶和测试库。

酶是事实上的标准选择。它允许您将组件呈现为完整或浅的DOM,并与呈现的组件进行交互。它主要遵循白盒测试方法,您的测试可以引用组件的某些内部组件,例如其子组件,道具或状态。

测试库采用了不同的方法,并在您不了解技术实现的情况下,促使您与用户进行交互。用这种方法创建的测试通常不那么脆弱,更易于维护。尽管它在React中最受欢迎,但它也可用于Angular。

Gatsby {#gatsby}

Gatsby是使用React.js的静态网站生成器。它允许您使用GraphQL查询在Markdown,YAML,JSON,外部API和流行的内容管理系统中定义的网站数据。

React 360 {#react360}

React 360是一个用于为浏览器创建虚拟现实应用程序的库。它提供了一个声明性的React API,该API建立在WebGL和WebVR浏览器API之上,从而使创建360 VR体验变得更加容易。

React开发人员工具 {#reactdevelopertools}

React Dev Tools是Chrome浏览器的浏览器扩展程序,用于调试React应用程序,使您可以遍历React组件树并查看其属性和状态。

在Awesome React列表中还有许多其他库和工具可用。

领养,学习曲线和发展经验

选择一项新技术的一个重要标准是学习的难易程度。当然,答案取决于多种因素,例如您以前的经验以及对相关概念和模式的总体了解。但是,我们仍然可以尝试评估开始使用给定框架所需学习的新事物的数量。现在,如果我们假设您已经了解ES6 +,构建工具以及所有这些,那么让我们看看您还需要了解什么。

React

使用React,您首先会遇到的是JSX。为某些开发人员编写代码似乎很尴尬。但是,它并不会增加太多复杂性:仅是JavaScript表达式和类似HTML的特殊语法。您还需要学习如何编写组件,使用props进行配置以及管理内部状态。您不需要学习新的模板语法,因为所有这些都是纯JavaScript。尽管React支持基于类的组件,但随着钩子的引入,功能开发变得越来越流行。这将需要您了解一些基本的功能开发模式。

该官方教程是开始学习React的好地方。完成此操作后,请熟悉路由器。React Router可能有点复杂且非常规,但无需担心。根据项目的大小,复杂性和要求,您将需要查找和学习一些其他库,这可能是棘手的部分。但是之后,一切都应该顺利进行。


我们真的很惊讶使用React变得如此容易。即使具有后端开发背景并且在前端开发方面经验有限的人也能够迅速赶上。您一路上可能遇到的错误消息通常很清楚,并提供有关如何解决根本问题的说明。

缺点是您需要花费时间选择支持开发活动的库。考虑到其中有多少,这可能构成挑战。但是,在您熟悉框架本身之后,可以将其与开发活动一起完成。

尽管React不需要TypeScript,但我们强烈建议您评估并在项目中采用它。

Angular

学习Angular将为您介绍比React更多的新概念。首先,您需要熟悉TypeScript。对于具有静态类型语言(例如Java或.NET)经验的开发人员,这可能比JavaScript更易于理解,但是对于纯JavaScript开发人员,则可能需要付出一些努力。要开始您的旅程,我们可以推荐" 英雄之旅"教程。

框架本身包含许多要学习的主题,从基本的主题(例如模块,依赖项注入,装饰器,组件,服务,管道,模板和指令)到更高级的主题(例如更改检测,区域,AoT编译和Rx) .js。这些都包含在文档中。Rx.js本身是一个繁琐的话题,并且在官方网站上进行了详细描述。虽然在基本级别上相对易于使用,但在进入高级主题时会变得更加复杂。

总而言之,我们注意到Angular的进入障碍高于React。新概念的庞大数量可能使新来者不知所措。甚至在您开始之后,体验可能仍然有些粗糙,因为您需要牢记Rx.js订阅管理,更改检测性能和包装盒中的内容(是的,这是一条实际建议从文档中)。我们经常遇到难以理解的错误消息,因此我们不得不在Google上搜索并祈祷精确匹配。

似乎我们在这里偏爱React,我们肯定会这样做。我们已经有经验将新的开发人员加入规模和复杂程度相近的Angular和React项目中,并且以某种方式使用React总是会更加顺利。但是,正如我之前所说,这取决于多种因素,并且可能对您有所不同。

人气和社区反馈

这两个框架都非常受欢迎,并拥有追随者和拥护者社区。也有许多文章建议您使用一种或另一种技术,主要是强调它们的积极方面。让我们看看是否可以找到一种更客观的方式来表示每个项目的受欢迎程度和开发人员的满意度。

在故宫的下载统计显示近5倍以上的下载React比角。Google趋势还报告了全世界对React的更多搜索。

在JavaScript的报告2019年国家名单作出React,最流行的前端框架,具有角是倒数第二,仅灰烬之前。71%的参与者说他们已经使用过React,并将再次使用它。只有21%的参与者对Angular表示相同的看法,而35%的参与者表示他们已经使用了Angular并且不再使用它(只有8%的参与者表示对React的看法)。

《黑客新闻招聘趋势》(2019年)连续31个月以上将React列为员工中最想要的技术。

Stack Overflow将React列为仅次于jQuery的第二受欢迎的框架。Angular被列为第三个。他们最喜欢,最害怕和想要的Web框架报告描绘了与其他人相似的情况。

Jet Brains撰写的《2020年开发者生态系统状况》报告确认了React作为最受欢迎的前端框架的地位。

做出决定

您可能已经注意到,每个框架都有其自己的功能集,既有优点也有缺点。但是,此分析是在任何特定上下文之外进行的,因此无法为您选择哪种框架提供答案。要对此做出决定,您需要从项目的角度进行审查。这是您需要自己做的事情。

首先,请尝试回答有关项目的这些问题,并在完成时将答案与您对这两个框架的了解相匹配。该列表可能不完整,但足以让您入门:

  • 这个项目有多大?

  • 它要维持多长时间?

  • 是否预先明确定义了所有功能,还是希望您灵活?

  • 如果已经定义了所有功能,则需要什么功能?

  • 域模型和业务逻辑是否复杂?

  • 您定位到什么平台?网络,移动,台式机?

  • 您需要服务器端渲染吗?SEO重要吗?

  • 您会处理大量的实时事件流吗?

  • 您的团队有多大?

  • 您的开发人员的经验如何?他们的背景是什么?

  • 您是否想使用任何现成的组件库?

如果您要开始一个大型项目,并且希望最大程度地减少做出错误选择的风险,请考虑首先创建概念验证产品。选择项目的一些关键功能,并尝试使用其中一个框架以简单的方式实现它们。PoC通常不需要花费很多时间来构建,但是它们会为您提供一些使用该框架的宝贵个人经验,并允许您验证关键的技术要求。如果您对结果满意,则可以继续进行全面的开发。如果不是这样,从长远来看,快速失败会为您省去很多麻烦。

一种统治所有人的框架?

选择了一个项目的框架后,您将很容易为即将进行的项目使用完全相同的技术堆栈。别。即使保持技术堆栈一致是个好主意,但不要每次都盲目使用相同的方法。在开始每个项目之前,请花一点时间再次回答相同的问题。也许对于下一个项目,答案会有所不同,或者情况将会改变。另外,如果您有使用不熟悉的技术堆栈进行小型项目的奢侈行为,那就去吧。这样的实验将为您提供宝贵的经验。保持思想开放,从错误中学习。在某个时候,某种技术将自然而然地变得正确。

赞(0)
未经允许不得转载:工具盒子 » 入门前端框架的必备知识点:深度比较React和Angular