Skeleton Design 理念在 Angular 应用开发中的具体应用一例

简介: Skeleton Design 理念在 Angular 应用开发中的具体应用一例

Skeleton Design 这个概念,想必前端开发人员比较熟悉,而普通的 App 用户,可能甚至都没有听说过,但实际上我们每个人,每天几乎都会受益于这个设计理念。

Skeleton Design 在一些国内技术社区的技术博客里,通常被称为骨架屏设计,是一种用户界面设计策略。骨架屏设计不是一种具体的基于某种编程语言的技术,而是一种设计理念,旨在改善用户体验。通用的骨架屏设计,在页面内容完全加载前,会显示一个包含页面主要布局和元素位置的空白版本。这种方式能够让用户在等待页面加载的过程中,有一个直观的感知,知道接下来会出现什么内容,减少用户的等待焦虑感。

我目前工作在一个使用 Angular 开发的电商 Storefront 开源项目上,项目的 Github 地址如下,项目代号为 Spartacus.

Spartacus B2B 功能模块里,正常的 Cost Centers 列表显示如下:

在这些 Cost Center 的数据从后台取回来之前,页面显示是这样的:

大家注意到上图一行行灰色的横条吗?这就是一种典型的 Skeleton Design 理念在 Angular 应用里的实现。这种灰色的横条显示,主要目标就是提供一个视觉提示,让用户知道他们可以期待什么类型的信息。

如上图所示,骨架屏通常使用灰色调的占位符来表示正在加载的元素,这种设计方式提供了一种平滑的用户体验,使用户觉得网页的加载更快,更流畅。

试想一下,在用户网络接入速度比较慢,或者后端 API 响应速度比较慢的情况下,如果没有 Skeleton Design 这种设计,那么用户需要在页面加载完成后才能看到完整的内容。特别是在笔者负责开发的 Spartacus 这种电商应用领域内,超过3秒的页面等待就很可能会导致用户的不耐烦,甚至导致他们关闭网站。通过使用骨架屏设计,开发者可以立即显示一个页面的概要,把用户在等待时的注意力分散开,从而提高用户的参与度和用户体验。

本文余下部分,介绍 Spartacus 骨架屏设计的详细技术实现。

从 Spartacus 源代码的 list.service.ts 的实现源代码能看出,幽灵数据就是一个 length 属性值为10的空数组。

/**
   * The ghost data contains an empty list of objects that is used in the UI
   * to render the HTML elements.
   *
   * This list contains 10 items, so that the ghost will show 10 rows by default.
   */
  protected ghostData = { values: new Array(10) } as EntitiesModel<T>;

在 Chrome 开发者工具里,能观察到这些幽灵数据具有对应的 CSS class,这使得它们具有灰色矩形的视觉外观:

Cost Center 表格显示的数据最终通过 list.service.ts 从 SAP Commerce Cloud 后台取出,取数逻辑通过 Angular 响应式编程库 RxJS的 pipe 方法驱动:第 101 行 switchMap 操作符里的箭头函数,输入参数 pagination 包含了去 Commerce Cloud 取数据使用的分页设置,函数体 this.load 发送 HTTP 请求,消费 Commerce Cloud 的 OCC API.

而第 102 行的 startWith 操作符,语义上相当于给 pipe 驱动的 Observable 流赋上一个初始值,该初始值即为 length 属性为10的空数组。

/**
   * Loads the data by delegating to the `load` method, which must be implemented
   * in specific implementations of this abstract class.
   *
   * The load method is streamed from the `pagination$` stream, which is initialized
   * with default pagination and structure drive properties.
   */
  getData(...args: any): Observable<EntitiesModel<T> | undefined> {
    return this.pagination$.pipe(
      // we merge any configured pagination from the table structure
      switchMap((pagination) =>
        this.getStructure().pipe(
          map((config) => ({ ...pagination, ...config.options?.pagination }))
        )
      ),
      switchMap((pagination) => this.load(pagination, ...args)),
      startWith(this.ghostData)
    );
  }

startWith 是一个非常有用的 RxJS 操作符,它的主要作用是在 Observable 序列开始之前插入一个指定的元素。这意味着,当你订阅一个 Observable 时,startWith 操作符会立即发出它的参数,然后继续发出 Observable 的值。

例如,我们有一个 Observable,它将发出一个数字序列:

const numbers$ = of(1, 2, 3, 4, 5);

我们可以使用 startWith 操作符在这个数字序列开始前插入一个数字 0:

const numbersWithZero$ = numbers$.pipe(startWith(0));

现在,当我们订阅 numbersWithZero$ 时,它会首先发出 0,然后发出 1, 2, 3, 4, 5。

这种功能在很多情况下都非常有用。例如,在 Angular 中,我们可能会用到 HttpClient 服务来从服务器获取数据。这个过程是异步的,所以我们会使用 RxJS 来处理它。但在数据到达之前,我们可能想要显示一些默认的数据或者加载指示器。这时,startWith 就能派上用场。

// 从服务器获取用户数据,但在数据到达之前,显示一个空的用户对象
const user$ = this.http.get<User>('api/users/1').pipe(
  startWith({id: null, name: 'Loading...'})
);

在这个例子中,user$ 是一个 Observable,它将发出从服务器获取的用户数据。但在数据到达之前,它会先发出一个包含 id: nullname: 'Loading...' 的对象。这样,我们就可以立即更新界面,显示一个加载指示器,然后当真实的数据到达时,再更新为真实的数据。

回到本文的例子,从运行时序来说,任何消费 getData 函数返回的 Observable 对象的 Angular UI 组件,都会先显示 startWith 设置的初始值,即幽灵数据。待从 Commerce Cloud 后台加载的真实数据返回给浏览器之后,组件自动刷新并显示这些真实的业务数据。

总结

本文首先介绍了 Skeleton Design 设计理念的引入初衷和旨在解决的用户体验,接着以 Spartacus Storefront B2B 页面为例,介绍了 Angular 应用里采用 Skeleton Design 改善页面加载用户体验的例子,希望对 Angular 同行有参考作用。

相关文章
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
30 2
|
3月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
22 0
|
5天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
11 1
|
1月前
|
开发框架 前端开发 安全
Angular:构建现代Web应用的终极选择
Angular:构建现代Web应用的终极选择
19 0
|
2月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
3月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
42 0
|
3月前
|
缓存 JavaScript 前端开发
Angular PWA 应用什么情况下会出现 504 error
Angular PWA 应用什么情况下会出现 504 error
50 0
|
3月前
|
网络协议 JavaScript
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
22 0
|
3月前
|
缓存 JavaScript 中间件
如何在 Angular 应用中发起 HTTP 302 redirect
如何在 Angular 应用中发起 HTTP 302 redirect
27 0
|
3月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
36 1