2019的Angular

2,703 阅读9分钟

写在前面

作者:Giancarlo Buomprisco
原文地址:The State of Angular in 2019
说明:本人水平有限,在翻译过程中难免有理解翻译不准确的地方,为避免错误引导大家,希望能够指,向大家传递正确的观点和知识。

正文

从最新的特性到您可能错过的最热门的主题和趋势,对当前的Angular做一个详细的概述


Photo by Guillermo Ferla on Unsplash

每年的这个时候,世界各地都在举行会议和活动,我们被大量的信息轰炸,这些信息很难被消化。
前端世界是一台永不停止的机器,我们都知道保持不落后是多么困难。要看所有的会议内容会花费大量时间,所以,大多数人更偏向在一天的工作之后在办公室里看Netflix就变得可以理解了。
因此,我希望帮你分析大量的信息并在一篇文章中给你一个2019年Angular的概述。
下面就是我们在这篇文章中要讨论的内容:

  • Angular的现状
  • 框架的最新特性
  • 最新的观点和趋势
  • 理解一些你在很多地方都看到过却还没有完全理解的词
    提示:使用Bit轻松地在项目中共享和重用Angular组件、建议更新、同步更改并作为一个团队更快地构建。

Angular的使用量不断增长

根据Angular当前工程经理Brad Green在NG Conf 2019上提供的统计数据,自去年以来,Angular的采用率增加了大约50%!
不可否认的是从老版本Angular1.x升级的工程夸大了这一数据,但这仍是一个让人印象深刻的增长。
Angular并不像Svelte 或 Vue那样增长迅速,也不像React那样被广泛使用,但可能与你在Reddit和Twitter上看到的相反,Angular正处在一个非常健康的状态,正在被数以百万的开发者和团队使用。

Angular的生态非常庞大和兴旺

尽管框架附带了Angular团队提供的大量现成工具,但社区仍然提供了非常庞大以及高质量的生态系统。
我们有很多东西可以结合Angular一起使用:

  • 与很多优秀的工具(例如: Typescript和RxJS)高度集成,随着这些工具的快速发展,使得Angular也间接受益。
  • 不同风格的状态管理库。
  • 代码质量工具,例如 Codelyzer
  • UI库、组件、指令、管道等等
  • 巨大的IDE插件库
  • 测试框架和实用工具库
  • 最后,社区和Angular 团队提供了关于最佳实践、引导、事例、书籍、视频课程等等的丰富文档。
    在下一部分,我们将看到我们在Angular项目中可以使用的一些最佳工具的详细概述。

Angular CLI

升级比以前更容易了

根据 Mart Ganzevles最近的描述,每年为5亿用户提供服务的Blueweb项目在一天的工作时间内就从版本7升级到版本8,而当初从版本2升级到版本4则花费了30天。
这进一步证明了Angular CLI是一个多么伟大的工具,它可以将我们的生产力提升到我个人从未体验过的水平。 很难想象如果我们现在的工作没有它会有多困难。

Schematics

Angular Schematics 是一个你每天都在用的特性。比如:我确信你经常使用ng generate component my-component,这就是被整合在CLI中的一个Schematics。 不过,您可能不知道的是,您可以通过为经常重复的代码片段创建自己的Schematics来提高工作效率。

Builders

生成器允许您扩展或扩充现有命令。例如:您可以创建一个构建器来使用Jest和Cypress而不是Jasmine和Protractor来执行测试,或者使用不同的Linter。

新的令人兴奋的功能

在写这篇文章的时候,Angular最近发布的版本8具有各种改进和功能。
没有什么能影响我们如何使用框架,这在大多数时候都是好消息,但是框架的不断改进,使Angular的项目越来越小越来越块,改善了本来就已经很优秀的开发体验,以及几乎完整的新渲染器。

差分加载

差分加载的概念比它的名字所表示的要简单。简单来说,编译器会生成两个打包文件:一种支持拥有所有现代功能特性的浏览器,不需要任何polyfill;另一种支持旧版本的浏览器。
最新版本的浏览器会加载先进版本的打包文件,需要polyfill的旧版本浏览器加载另一种旧版打包文件。
因为大多数用户倾向于使用最新的浏览器,所以这是一种很大的胜利,我们只需要将旧版本的打包文件发送给一小部分用户。

Web Workers

你可能已经听说过Web Workers,所以我们会省略这部分的介绍。不过,您可能不知道的是,由于最新版本的发布,将Web Workers与Angular集成变得多么容易。可以查看一下这个文档

CDK

CDK是Angular组件团队发布的一组工具。他们使用 Angular Material提供了一部分摘要,但在样式方面不是显性的。
例如你可以直接使用:

  • Drag and Drop
  • Auto-resizable text area
  • Overlay for your popups
  • Virtual Scrolling

CDK是非常有用的,因为大多数应用程序可以使用完成得很好的常用功能,而不必使用完整、膨胀、特别的组件。Angular Material i非常棒,但你可以实现你自己的组件只是使用由CDK提供的积木。

Ivy渲染器

Ivy是一个非常令人兴奋的新进展中的开发,将作为第三渲染器被集成在Angular中。现在还无法使用,因为还没有默认启用,但是你可以在版本7中选择引入并使用它。它将在版本9中默认启用。
我们可以对Ivy期待些什么?

  • 更小的体积
  • 可调式模版
  • 更快的打包速度,更快的测试
  • 很多bug修复 下面是我在Chrome控制台中放置断点时的屏幕截图:

如您所见,ngforof指令为我们提供了作为值传递的信息。

移动端的Angular

Ionic

Ionic是一个移动应用框架,但它的核心组件确是用Stencil写的,它提供了你可以使用Angular或者其他框架开发的文档。

NativeScript

NativeScript 是一个类似于React Native的框架,用于构建移动应用。尽管它们也为Vue和纯JavaScript提供支持,但它还是为Angular提供了深度的集成。我并没有很多的使用经验,而且相对于同等水平的React Native,我个人并不推荐它,但如果你是一个移动开发这,可以尝试一下。

测试

Jasmine & Protractor

他们并不需要介绍,Jasmine & Protractor和测试框架默认集成在Angular中。他们测试、更新,在Angulaer中效率惊人。

Jest & Cypress

由于Angular CLI提供了新的自定义构建器,因此可以使用Jest和Cypress测试Angular。 Jest是一个基于Jasmine的单元测试框架,在Facebook上开发。它实际上是用于测试React项目的框架,并且因其速度而广受欢迎。总的来说,很多人喜欢它而不是Jasmine,所以如果是你,你现在就可以使用它了!
Cypress是一个备受推崇的E2E测试框架,它得到了很多人的喜爱,这是有充分理由的。它不依赖于Selenium或WebDriver,允许在命令日志中传输时间,允许网络流量控制,并保证不会随机失败的结果更加一致。

Angular测试库

Angular测试库是以用户为中心的方式测试UI组件的一组实用程序。
这意味着该库鼓励您永远不要以编程方式使用组件,并通过执行用户将要执行的操作来测试行为。
例如你永远不会写:

myComponent.onClick();

但是,您将模拟用户自然会进行的单击操作。

const { getByText, click } = await render(CounterComponent, {
    componentProperties: { counter: 5 }
});
click(getByText('+'));

状态管理

NgRx

NgRx是一个以Redux为灵感的状态管理器,并经常在Angular社区中使用。就像它的名字表示的,它严重依赖于RXJS流。

NGXS

NGXS是一个可选的库,它还将类似Redux的状态管理引入到Angular中。相对于NgRx,NGXS为了减少样板文件,NGXS大量使用类和装饰器,并且如果类是你的事情,这方面可能是影响你二选一的重要因素。

Akita

Akita是由Datorama 公司提供的一个给予Rxjs的状态管理库,相比于前两个,它还可以被用在非Angular项目中,这使得你的代码有很高的复用性。

Just… RxJS?

根据您是否喜欢Redux库或者您的项目是否需要状态管理库,您仍可以构建用RxJS存储状态的服务!

UI组件库

Storybook

Storybook并不是一个UI组件库,而是一个工具,它支持你创建相互隔离的UI组件,并用很简单的方式展示所有的组件和他们的变化。
这是一个很棒的工具,我很长一段时间以来都很羡慕React开发人员,但现在我们可以使用它,很难不推荐使用它。

Angular Material

著名的 Angular Material 回归,并在新版本的Angular中带来一系列精美的UI组件设置。

Angular的后端相关

Firebase

FireBase是Google拥有的应用程序开发平台。最后,基于流数据的RXJS观测数据的强大功能发布了一个类库 Angular Fire ,使之与Angular无缝融合。

GraphQL

你可能认为只有在reatc社区才会对GraphQL很欢迎...你可能是错的。 Apollo library 也可以在Angualr中使用,如果你希望使用GraphQL,它可以很好的替代Firebase。

NestJs

NestJs是一个构建服务端应用的node web框架。就像你在例子中看到的,它受到Angular很多核心概念的启发,比如:Modules、Controllers、Pipes等等。如果你喜欢Angular,你也会喜欢NestJs。
如果你使用 Nx Workspaces,使用angular和nestjs设置完整的堆栈应用程序只需要一个命令了!

最后

总的来说,Angular拥有难以置信的高质量以及丰富的生态。
当然,我还没有提到我欣赏的几十个库和工具,然而,这个文章已经到结尾了。我希望这篇文章可以给你一个Angular当前状态的概括,以及可能为你的下一个项目提供动力的可能性。
如果您需要任何说明,或者您认为有什么不清楚或错误,请留言!
如果您喜欢这篇文章,请在MediumTwitter上关注我,了解更多关于Angular、RXJS、TypeScript等的文章!