企业中的 Angular 开发

有一些帖子教你如何开发 Angular 应用程序，但其中一些缺少我将在这里提到的一些技巧。

如果您想观看西班牙语版 Angular for Enterprise 的演讲：https://www.youtube.com/watch?v= l5j9jVKNYf8&t=499s

Angular for Enterprise 视频（分步）：
https://www.youtube.com/playlist?list =PL-G5r6j4GptEQExoIURbVmWso_pKL3RZK

Angular for Enterprise 文章（分步）：
https://dev.to/thisdotmedia/angular-libraries-with-nx-for-enterprise-apps-395h

仅供参考：其中一些技巧可以用于任何类型的企业应用程序，而不仅仅是角度应用程序。

我不会详细介绍如何应用每个技巧或工具。我只会总体介绍它们，以便您开始在 Angular 企业项目中应用它们。

请记住，所有提到的技巧都不是强制性的，但可以帮助您的团队编写更清洁、更好、更具可扩展性的应用程序。

内容结构

- 类型
- SASS
- 状态管理
- 库
- Monorepos
- 企业版 NPM
- 延迟加载
- 组件
- 组件库 -
使用 RxJS 进行反应式编程 -
编译
- 设计系统
- 使用 Bazel 的 Angular
- VS Code 工具

打字

使用 TypeScript 进行输入

在开发像企业应用程序这样大型应用程序时，需要大量开发人员，因此，编写代码非常重要。这可以帮助开发人员避免错误，并更快地理解代码库。

所以...停止使用

any

请停止它！

Typescript 实体
- 类 -
枚举
- 接口（和类型）

不要做：

     tasks$: any;

做：

   tasks$: Observable<Task[]>;

萨斯

是时候用 SASS 增强你的 CSS 了。使用 SASS，你将更加遵循 DRY 原则，这意味着你不会重复代码。你的 CSS 代码将更加结构化、简洁、可读性更强。

当使用 CLI 创建新的 Angular 项目时，它会询问您“您想使用什么样式表格式？”，请选择 SCSS。

如果您想开始使用 SASS，请访问官方文档：

https://sass-lang.com/guide。

状态管理

处理应用程序的状态非常重要。通过处理应用程序的状态，您将获得以下一些好处：

- 更好的性能：
Angular 使用状态时的工作方式是，数据更新可以依靠存储的片段流经您的组件。

- 集中式不可变状态：
位于应用程序内部中心位置的状态。

节省时间：
想象一下，你有一个工作流程非常复杂的应用程序，你需要在表单中写入大量数据并点击多个按钮。借助 Redux Dev Tools 这样的工具，你可以在应用程序中进行时间旅行，这样你无需重复所有工作流程来测试你的应用；你只需跳转到特定时间点即可。

易于测试：
所有状态更新均在纯函数 Reducer 中处理。纯函数测试起来非常简单，因为它简单input in易用assert against output。

很多人不喜欢使用状态管理工具，所以他们决定只使用 RxJS 和服务。如果你的数据流非常顺畅，可能不需要使用前面提到的一些工具来处理状态，但本质上你等于在重复造轮子。如果你要这么做，不妨使用一个数百万开发者都在使用的工具。

图书馆

如果您在一家大公司工作，那么需要共享多段代码的可能性非常高。那么，为什么要让您的工程师重写现有代码呢？借助 Angular 库，您可以通过在整个组织内创建可共享的代码（例如组件、服务等）来避免这种情况。库可以让您的应用程序避免代码不一致和不同的标准，并帮助您的公司节省成本。

如何创建库？
https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

企业版 NPM

讨论完 Angular 库之后，您可能会想：如何在我的组织内共享它们？

NPM 为企业应用提供了解决方案。您的公共 NPM 包将保持私密，并且仅对您的组织可见/可用。

要了解有关 NPM Enterprise 的更多信息，请访问：https://www.npmjs.com/products/enterprise

Monorepos

在处理企业应用程序时，Angular 库并不是一切都很完美。

-每次共享存储库中发生新的更改时，您都需要转到使用此库的所有项目并更新其 NPM 包
-每个共享库都需要有自己的 CI/CD 工作流
-每个 CI/CD 工作流都应该处理更改的版本控制
-角度项目的不同 NPM 包可能不匹配，这可能导致应用程序损坏
-通常，跨多个应用程序和库进行更改更加困难，因为这些都在它们自己的存储库中

如果您正在进行企业项目，建议将代码组织成更大的部分，例如通用服务、UI 组件等。感谢 Nrwl 团队，我们可以在 Angular 项目中使用 Nx 处理 monorepos 时实现这一点。

延迟加载

得益于延迟加载，我们可以显著提升应用程序的性能。想象一下，你有一个庞大的企业应用，你不希望它加载太久。否则，用户会失去理智，最终停止使用你的应用。延迟加载可以通过按需加载 ngModule 来帮助我们实现更佳的应用性能。延迟加载 Angular 应用的一些优势如下：

- 初始加载时引导时间性能高
- 模块根据其功能分组（功能模块） -
初始加载时下载较小的代码包 -
通过导航到路线激活/下载代码模块

如果您想了解有关延迟加载的更多信息，请查看官方 Angular 文档或这篇精彩的文章/教程。

https://angular.io/guide/lazy-loading-ngmodules

https://blog.bitsrc.io/boost-angulars-performance-by-lazy-loading-your-modules-ca7abd1e2304

成分

创建 Angular 应用程序时，我建议您创建两种组件：智能组件和愚蠢组件。

智能组件是唯一能够通过依赖注入 (DI) 和数据源访问服务的组件。哑组件将被视为纯函数，因此不会产生任何副作用（即传入或传出数据）。

我可以使用带有状态管理的智能/哑组件吗？

是的，您可以在使用 NgRx 等工具进行状态管理时应用智能和愚蠢组件的概念。

当使用智能组件和哑组件时，你肯定会需要使用 Input() 和 Output() 在组件之间进行通信。有人问我：我的组件应该链接多远？我尽量将它们保持在上一层和下一层。在某些特殊情况下，你可能会使用 Input() 和 Output() 进行上两层和下两层的组件通信，但请尽量避免这种情况。

如果您想了解有关智能和愚蠢组件的更多信息，请查看此链接：
https：//medium.com/@jtomaszewski/how-to-write-good-composable-and-pure-components-in-angular-2-1756945c0f5b

组件库

在开发企业级 Angular 应用程序时，经常会犯一些错误，例如不遵循标准和公司惯例。实现应用程序一致性的一种方法是使用以下组件库：

PrimeNG：http://primefaces.org/primeng/#/
角度材质：https://material.angular.io/
NgBoostrap：https://ng-bootstrap.github.io/#/home
恩格-佐罗：https://ng.ant.design/docs/introduce/en
NgSemantic：https://ng-semantic.herokuapp.com/#/

我个人认为，对于企业级应用来说，PrimeNG 是最佳选择。它拥有超过 80 个组件，可以通过 CSS 轻松定制，而且业内多家公司都在使用 PrimeNG，这意味着它得到了社区的良好支持。

设计系统

你可能会想：自定义组件怎么样？再次强调，保持公司的标准、设计和应用程序的一致性非常重要。如果你的公司没有专门的 UX/UI 设计师，那么了解一下设计系统将是一个不错的起点，可以帮助你保持应用程序设计的一致性。

以下是一些很棒的资源：

-语义 UI：https://semantic-ui.com/
-PrimeNG：https://www.primefaces.org/designer/primeng
-材料设计：https://material.io/design/
-Polaris Shopify： https: //polaris.shopify.com/
-Ant 设计：https://ant.design/

使用 RxJS 进行响应式编程

是时候开始在 Angular 应用程序中进行响应式思考了。我们有一个很棒的库叫做 RxJS，它可以帮助我们实现这一点。

在企业项目中，你可能会遇到从多个相互依赖的来源收集数据的情况，或者需要大量使用多个可观察对象来实现响应式编程。如果是这种情况，我建议你使用可观察对象时采用声明式方法。

声明式方法的好处：
- 利用 RxJs 可观察对象和运算符的强大功能
- 有效地组合流
- 轻松共享可观察对象
- 随时对用户的操作做出反应

要了解有关反应式编程的更多信息，我建议您参加以下课程：
https://www.pluralsight.com/courses/rxjs-angular-reactive-development

在开发 Angular 项目时，如果必须使用 Promise，我会尝试将其转换为可观察对象。这样做是因为我希望我的应用尽可能地具有响应性。在一些特殊情况下，我不会将 Promise 转换为可观察对象。

要了解有关 Observables 和 Promises 的更多信息：
https://medium.com/@mpodlasin/promises-vs-observables-4c123c51fe13

https://stackoverflow.com/questions/50269671/when-to-use-promise-over-observable

汇编

Ivy 是新一代 Angular 编译器。Ivy 可以帮助您优化打包大小、减少重新构建时间、提高运行时性能、增强向后兼容性等等。

Angular 与 Bazel

感谢 Google 团队，我们现在拥有了一款名为 Bazel 的出色工具。Bazel 允许我们使用同一个工具来构建和测试后端和前端。

Bazel 还能帮助您的组织进行持续集成，并缩短构建时间。Bazel 只构建必要的代码，因为它采用了缓存策略，只编译已更改或新增的代码。

了解有关 Bazel 的更多信息：
https://blog.ninja-squad.com/2019/05/14/build-your-angular-application-with-bazel/

https://bazel.build/

VS 工具

从业几年后，我注意到拥有相同的环境设置可以帮助我们避免合并冲突，并拥有一致的代码库，尤其是在与不同团队的多个开发人员合作时。

以下 VS Code 插件将帮助您的团队开发下一个 Angular 项目。

-Angular 代码片段（版本 8）
-Angular 控制台
-Angular Schematics
-Prettier
-TS Lint
-自动重命名标签-突出
显示匹配标签
-HTML 代码片段
-HTML 中 CSS 类名的 IntelliSense
-JavaScript（ES6）代码片段
-RxJs 代码片段
-将 JSON 粘贴为代码

还有更多吗？

如果您对如何帮助团队在企业项目中取得成功有任何其他建议，请添加一些评论，我会将它们添加到文章中。

文章来源：https://dev.to/thisdotmedia/angular-development-in-enterprise-1c03