见解

Maersk预订的全速前进

2022年1月25日

职业数字创新可持续性软件工程

在地球上运输货物容器是马士克物流业务的主要收入来源。随着共同的-19大流行助长了世界各地购买行为的改变，对Maersk的客户来说至关重要的是，将这些商品运送给客户是一个简单可靠的过程。

随着对集装箱物流的需求显着增加，我们的预订系统的可靠性不是完美的。我们在预订系统中对客户体验的关键衡量标准之一是该检索时间表和价格然后将其显示给客户的时间。18luck新利体育客户端下载该指标一直在增加，搜索时间平均超过30秒。这是等待搜索结果的大量时间，并且没有提供我们客户期望的不断护理，这是Maersk的核心价值。

2021年，马士克的工程团队现代化了面向客户的预订系统。目的是为预订旅程构建一个更可扩展的平台，减少响应时间，并将用户界面提高到Maersk.com其余的标准。
这项工作分为两个工作流 - 重建用户界面（UI）并现代化API。

重新创建Web应用程序

UI重建在项目开始时有四个目标：

将UI提高到Maersk.com平台标准
提高应用程序的一致性
提高应用程序的性能和弹性
改善核心网络生命值应用程序

平台标准

现代网络标准以快速的速度移动 - 与今天的工具集相比，现代的现代标准是古老的。在Backbonejs上建造的即将发出的预订UI就是这种情况，并且在创建时具有许多尖端的功能。

Maersk还与Times一起移动，并在VUEJS和Web组件上标准化，作为Web应用程序首选的生态系统。这种更改使我们通过使用更现代的JavaScript功能，更有效的构建系统并采用测试驱动的方法来创建我们的组件，从而使开发人员效率获得了巨大提高。这种方法和许多其他小变化导致了在应用程序的性能和弹性方面对客户体验的直接变化。

应用程序一致性

自2018年首次启动的第一个即时预订应用程序以来，马尔斯克的设计功能就已经大大成熟。该功能生产了Maersk Design系统，以帮助平台上的不同应用程序感觉到它们是一致的体验。设计系统还解决了应用程序的许多基本样式和用户体验（UX）问题，使我们可以专注于自己的Web应用程序的UX。它还可以使应用程序保持最新的最新外观和感觉，并有助于使体验更加一致，例如Sealand Maersk等其他运营商品牌。

当我们开始重建时，我们正在寻找改善UX的机会。有几项改进可以利用Maersk设计系统来帮助解决这些问题。例如，发现合适的实体是货运的一部分可能很尴尬。在传出应用程序中使用不同的搜索接口，具体取决于您正在搜索的角色。我们创建并标准化了一个“聚会查找器”组件，该组件使我们能够在整个应用程序中始终如一地进行搜索。

对于许多客户，在办公室的台式计算机上进行了预订集装箱物流。我们已经看到人们在移动设备和较小屏幕上寻找预订的人有所增加。新的预订UI采用移动优先的方法设计，因此UI在小屏幕上的性能和看起来与大型屏幕一样好。无论客户正在移动还是刚刚将预订申请移至侧面，它都会像大型监视器一样工作。

性能和韧性

上述所有因素都导致了应用程序的性能和弹性。使用公司中许多小组尝试和测试的代码和标准使我们有信心使用最新的工具和技术构建这些现代接口，重点是使预订本身复杂而不是基本组件的复杂性。这种方法帮助我们将UI代码库的尺寸降低到了上一个大小的75％，而JavaScript捆绑包在首次加载时从490KB到190KB。

我们的平台标准使我们能够为应用程序代码编写更好的测试。总共有3000多个单元测试在每个构建上进行，以帮助我们知道何时更改影响应用程序的其他部分。这些测试很快，需要不到60秒才能测试整个应用程序。这是500个端到端测试，使团队可以更快地测试和发布代码，为客户获得更多功能和修复。

核心网络生命值

为了达到其性能目标，该团队旨在改善我们的客户系统的用户体验，我们使用核心网络生命值指标。这些指标被Google用作搜索引擎排名信号，并作为Web应用程序整体性能的代理。Google收集有关Chrome浏览器的用户经验的数据，并将其作为Chrome UX报告。下图显示了这些指标，以及该应用程序的第75个百分点得分的标记。绿色意味着“良好”体验，琥珀“需要改进”，红色被认为是“糟糕的”。这对应用程序如何在现实世界中进行了合理的概述。

从...开始LCP（最大的内容涂料），在网页的最大部分要显示给用户的时间，新的预订应用程序能够在某些较慢的API提供响应之前呈现页面的较大部分。

上面的直方图显示了一个月在新的预订旅程和旧预订之旅中的LCP时间安排的分布。这些直方图使得旧的旅程分组非常快速的用户（很可能是机器人），但其发行最大的部分是宽阔的，并且具有长长的用户，经验缓慢。新预订的速度较窄得多，这表明大多数用户会收到快速的第一页加载。

深入研究统计数据，结果非常好：

中位数快47％ - 1.7秒
LCP在第75个百分位数为3.8
第95％的LCP减少了6.3秒
第95个百分位数的速度比旧应用程序的第90个百分位速度快

核心Web Vitals不仅是关于第一页的负载，累积布局偏移（CLS）衡量页面上有多少内容移动，并且第一输入延迟（FID）衡量应用程序对用户输入的响应速度。首先，好消息是，FID上的字段数据非常好，表明98％的用户的输入延迟低于100ms，而75％的用户的输入延迟为7毫秒。

CLS上的数据不太积极。尽管与即将卸下的预订应用程序相比，情况有所改善，但对于80％的用户来说，布局转移仍然很差。这是由于该页面分为两个部分，即标题，然后是主要的应用程序内容。这个单个布局偏移很大，尽管此后页面不会再次变化。这会产生一种可以的体验，但不是很好。我们将继续调查解决方案，并旨在改善该指标在即将到来的版本中。

这些巨大的性能提高和UX增强功能代表了我们客户预订体验的逐步变化。首页加载时间还有更多优化，我们在获得更多数据时正在确定。这些增强功能将在以后的版本中添加到应用程序中。

但是，如果找不到客户寻找的航行，则不会有太大的区别。

API的新架构

与UI重建的同时，每个API都是现代化的，并从我们的数据中心和云中移出。如前所述，搜索时间指标已逐渐达到不可接受的水平，需要一个新的方向才能使API扩展。

Maersk的平台标准在API区域也发生了变化，我们采用了一个反应性的，以事件为导向的架构。核心服务在发生某些事情时会产生事件，例如报价价格，而面向客户的微服务在准备好并向客户展示时会捡起这些事件。这不会在等待事件时消耗资源或阻止用户体验，并允许我们在负载下水平扩展服务。下图显示了如何通过不同时间通过不同服务传递数据将用户界面组成的。

选择帆船 - 密封派 — 图显示了事件驱动的系统如何通过微服务层进行多个服务，以实时反映在网站上。

此过程还使我们可以在用户旅程中进行某些检查以及如何向客户展示时进行重新访问。关键指标是在单击第一个继续按钮后尽快向客户提供时间表和价格18luck新利体育客户端下载。该团队发现了以前的API中耦合的少数请求，这些请求现在可以在UI中分开和组成，这要归功于现在已经存在的事件驱动的架构。下面的视频显示了在外向和新的预订体验上进行的相同搜索。