Bitwarden 贡献文档
⮐ Bitwarden Contributing Documentation我的博客联系我
  • 关于
  • 入门
    • 概述
    • 工具
    • 服务器
      • 设置指南
      • 高级服务器设置
      • 数据库
        • MSSQL
        • 实体框架
      • 事件日志
      • Ingress 隧道
      • SCIM
      • 自托管指南
      • 系统管理门户
      • 单点登录 (SSO)
        • 本地 IdP
        • Okta
      • 故障排除
      • 用户机密
      • 公共 API
    • 网页客户端
      • 网页密码库
        • WebAuthn
      • 浏览器端
        • 生物识别解锁
        • Firefox 隐私模式
      • 桌面端
        • Mac App Store Dev
        • Microsoft Store
        • Native Messaging Test Runner
        • 更新测试
      • CLI
      • 故障排除
    • 移动端
      • Android
        • F-Droid
      • iOS
      • .NET MAUI (legacy)
        • Android
        • iOS
        • watchOS
    • SDK
      • 内部 SDK
      • Secrets Manager
        • Integrations
          • Kubernetes
    • 业务 App
      • 目录连接器
        • JumpCloud
        • OpenLDAP Docker 服务器
      • Key Connector
      • Splunk App
  • 贡献
    • 贡献
    • 代码样式
      • =Android & Kotlin
      • Angular & TypeScript
      • C#
      • =Rust
      • T-SQL
      • =Swift
      • Tailwind
    • 数据库迁移
      • 进化数据库设计
    • 提交签名
    • 拉取请求
      • =贡献审查程序
      • 分支
      • 代码审查
      • UI 审查 - Chromatic
    • 无障碍
    • 依赖管理
    • 功能标记
    • 模板存储库
    • 测试
      • =数据库集成测试
      • 负载测试
      • 单元测试
        • 命名约定
        • 测试结构
    • 修改用户机密
  • 架构
    • 架构
    • 架构决策记录 (ADR)
      • 0001 - Angular Reactive Forms
      • 0002 - Public API for modules
      • 0003 - Adopt Observable Data Services for Angular
      • 0004 - Refactor State Service
      • 0005 - Refactor Api Service
      • 0006 - Clients: Use Jest Mocks
      • 0007 - Manifest V3 sync Observables
      • 0008 - Server: Adopt CQRS
      • 0009 - Composition over inheritance
      • 0010 - Angular Modules
      • 0011 - Scalable Angular Clients folder structure
      • 0012 - Angular Filename convention
      • 0013 - Avoid layered folder structure for request/response models
      • 0014 - Adopt Typescript Strict flag
      • 0015 - Short Lived Browser Services
      • 0016 - Move Decryption and Encryption to Views
      • 0017 - Use Swift to build watchOS app
      • 0018 - Feature management
      • 0019 - Adoption of Web Push
      • 0020 - Observability with OpenTelemetry
      • 0021 - Logging to Standard Output
      • =0022 - Authorization
      • =0023 - Identifying Integrated Clients
    • 移动客户端架构
      • =Android
      • =iOS
        • =推送通知故障排除提示
      • =.NET MAUI (legacy)
        • =概述
        • watchOS
    • =SDK 架构
      • =数据模型
      • =依赖
      • Password Manager
        • Web
          • =互操作性
      • =Secrets Manager
      • =服务器绑定
      • =版本控制和破坏性更改
    • 网络客户端架构
      • 概述
      • 数据模型
      • 表示层
        • Angular
        • CLI
      • =依赖注入
      • 服务层
        • Vision
        • 实现
    • 服务器架构
    • 深度剖析
      • 身份验证
        • 双重身份验证
      • =授权
      • =浏览器自动填充
        • 收集页面详细信息
        • 生成并执行填充脚本
        • 表单提交检测
        • Shadow DOM
        • =内联自动填充菜单
      • Captcha
      • =只读数据库副本
      • 事件日志
      • =FIDO2 和通行密钥
        • =凭据
        • =操作
        • =命名惯例
        • =实现
          • =提供程序
            • =浏览器扩展
          • =依赖方
            • =用于解密的通行密钥
        • =术语表
      • 推送通知
        • 移动端推送通知
        • 其他客户端推送通知
      • =SSH 密钥和代理
        • =SSH 代理
      • =状态提供程序框架
        • =派生状态
    • =安全
      • =定义
      • =原则
        • =P01 - 锁定的密码库是安全的
        • =P02 - 半受损设备密码库的有限安全性
        • =P03 - 完全损坏的系统没有安全性
        • =P04 - 控制密码库数据的访问权限
        • =P05 - 将安全漏洞的影响降至最低
      • =要求
由 GitBook 提供支持
在本页
  • 命名 (ADR-0012)
  • 按功能组织 (ADR-0011)
  • 可观察对象 (ADR-0003)
  • 响应式表单 (ADR-0001)
  • 轻量化组件
  • 组合优于继承 (ADR-0009)
  1. 架构
  2. 网络客户端架构
  3. 表示层

Angular

上一页表示层下一页CLI

最后更新于1年前

对应的

对于 Bitwarden,我们使用 Angular 作为我们的客户端框架。在继续阅读之前建议对 Angular 有一个基本的了解,如果不确定请参考官方 或 。我们也尽力遵循 。

本文档旨在涵盖我们所遵循的最佳实践。它们中的大部分最初是基于不同的 ADR,虽然尽管 ADR 擅长描述原因,但它们提供了次优的阅读体验。

命名 ()

我们遵循 Angular 风格指南中的部分。更具体地说,使用破折号来分隔描述性名称中的单词,并使用点来分隔名称和类型。

我们使用以下由 建议的常规后缀:

  • service - 服务(在 Bitwarden,此类型表示抽象服务)

  • component - Angular 组件

  • pipe - Angular 管道

  • module - Angular 模块

  • directive - Angular 指令

在 Bitwarden,我们还使用了更多的类型:

  • .api - API 模型

  • .data - 数据模型(用于序列化域模型)

  • .view - 视图模型(解密域模型)

  • .export - 导出模型

  • .request - API 请求

  • .response - API 响应

  • .type - 枚举

  • .service.implementation - 抽象服务的实现

类名也应使用后缀作为其类名的一部分。例如,服务实现被命名为 FolderServiceImplementation,请求模型被命名为 FolderRequest。

摘要比实现更频繁地被引用,摘要使用简化类型,而实现必须指定它们是实现,例如,.service 用于摘要,.service.implementation 用于植入。

文件夹结构应按功能以分层方式组织。功能又由团队拥有。下面是一个简化的文件夹结构,可能与当前结构有所不同。

在示例中,我们有一个团队 auth,它具有单一的紧急访问功能。紧急访问功能由服务、一些组件和一个管道组成。该功能进一步细分为 view 功能,用于处理查看其他用户的密码库。

core 和 shared 目录不属于某一个团队,但而归平台团队所有。core 和 shared 模块是 Angular 中的标准概念,core 包含了在整个应用程序中使用的单例服务,shared 包含了大量重复使用的组件。

apps/web/src/app/
├─ core/                         // Core services vital to the web app
|  ├─ services/
|  |  ├─ web-platform-utils.service.ts
│  ├─ shared.module.ts
│  ├─ index.ts
├─ shared/                       // Shared functionality usually owned by platform
│  ├─ feature/                   // Feature module
│  ├─ shared.module.ts
│  ├─ index.ts
├─ auth/                         // Auth team
│  ├─ shared/                    // Generic components shared across the team
│  ├─ emergency-access/          // Feature module
│  │  ├─ access-type.pipe.ts
│  │  ├─ ea.module.ts
│  │  ├─ ea-routing.module.ts
│  │  ├─ ea.service.ts           // Service encapsulating all business logic
│  │  ├─ ea.component.{ts,html)
│  │  ├─ dialogs/                // Dialogs used by the root component.
│  │  ├─ view/                   // Logical group of components for viewing ea vault
│  │  ├─ index.ts
│  ├─ index.ts                   // Public interface that can be used by other teams
├─  app.component.ts
├─ app.module.ts

之前,我们手动实现了一个事件系统,用于发送基本消息,告诉其他组件重新加载它们状态。这很容易出错,并且难以维护。

// Example component which displays a list of folders
@Component({
  selector: "app-folders-list",
  template: `
    <ul>
      <li *ngFor="let folder of folders$ | async">
        {{ folder.name }}
      </li>
    </ul>
  `,
})
export class FoldersListComponent {
  folders$: Observable<FolderView[]>;

  constructor(private folderService: FolderService) {}

  ngOnInit() {
    this.folders$ = this.folderService.folderViews$;
  }
}

提供对底层表单的对象模型的直接、显式访问。与模板驱动的表单相比,它们更加强大:更具可扩展性、可重用性和可测试性。如果表单是您的应用程序的关键部分,或者您已经在使用响应式模式构建应用程序,请使用响应式表单。

https://angular.io/guide/forms-overview#choosing-an-approach

轻量化组件

组件应该很薄,只包含渲染视图所需的逻辑。所有其他逻辑都属于服务。这样,行为几乎相同但视觉上看起来截然不同的组件就可以通过共享相同的服务来避免代码重复。服务往往也比组件更容易测试。

由于 Bitwarden 的多客户端特性,我们有很多共享组件,这些组件的行为在客户端之间略有不同。传统上,这是使用继承来实现的,但是随着应用程序的不断发展,这导致了难以使用的大型组件以及多级继承树。

为了避免这种情况,组件应该被分解成逻辑上独立的部分。不同的客户端应该通过自定义页面级组件来使用共享组件。

可以理解的是,当不同的客户端使用不同的 CSS 框架时,要正确实现这一点是很困难的,在所有内容都正确迁移到 Bootstrap 之前,这意味着每个客户端都将有一个扩展通用登录组件的登录组件。不过,它应该只暴露特定于客户端的模板。

按功能组织 ()

我们努力遵循 Angular 风格指南中的 部分。

可观察对象 ()

我们目前正处于使用 向响应式数据层迁移的过程中。这主要是指组件订阅状态服务,如 FolderService,并在数据发生变化时持续获得更新。这可以确保组件始终保持最新。

响应式表单 ()

我们几乎只使用 ,而不是模板驱动表单。Bitwarden 组件库就是为了与响应式表单集成而设计的。

组合优于继承 ()

下图展示了报告如何通过将列表提取到共享组件中来共享逻辑。而不是组织组件直接扩展基本报告页面组件。有关更多详细信息,请参阅读。

官方页面地址
Angular 文档
Angular 入门
Angular 风格指南
ADR-0012
命名
Style-02-01
ADR-0011
应用程序结构和 NgModules
ADR-0003
RxJS
ADR-0001
Angular Reactive 表单
ADR-0009
重构的 PR