2019的Angular

写在前面

做者：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当前状态的归纳，以及可能为你的下一个项目提供动力的可能性。
若是您须要任何说明，或者您认为有什么不清楚或错误，请留言！
若是您喜欢这篇文章，请在Medium 或Twitter上关注我，了解更多关于Angular、RXJS、TypeScript等的文章！