编辑注： 电子商务等垂直领域的开发者已经开始采用 AMP，为他们的用户带来更快的体验，我们很高兴重点介绍他们的努力。
以下内容最初发布在 eBay 技术博客上，作者为 eBay 的首席工程师兼前端负责人 Senthil Padmanabhan。以下内容介绍了 Senthil 的团队如何开始使用 AMP，以及他们参与 AMP 项目的未来计划。
* * *
今年 eBay 的一项首要计划是为我们的用户提供引人入胜的浏览体验。在最近的采访中，Devin Wenig很好地概述了这对 eBay 的重要性。其理念是利用结构化数据和机器学习，让用户能够在整个价值范围内购物，其中一些用户可能希望获得大幅节省，而另一些用户可能希望关注畅销产品。
当我们开始设计体验时，我们的首要关注领域是移动网络。与许多其他组织类似，移动网络一直是我们增长最快的领域。我们希望首先在移动网络上推出新的浏览体验，然后是桌面和原生。
新的移动网络浏览体验的核心设计原则是保持简单、易访问和快速，非常快速。在前端方面，我们做了一些选择来实现这一点。
- 精简且易于访问 — 从一开始，我们就希望页面尽可能精简。这意味着将 HTML、CSS 和 JS 保持在最低限度。为了实现这一目标，我们遵循了模块化架构并开始构建原子组件。基本上，页面是由一堆模块组成的，而模块是由其他子模块构建的，依此类推。这种做法实现了最大的代码重用，进而大幅减少了资源（CSS 和 JS）的大小。此外，我们的样式库通过 CSS 强制执行可访问性 — 通过使用ARIA 属性来定义样式，而不仅仅是类名。这迫使开发人员从一开始就编写a11y 友好的标记，而不是事后才考虑。您可以在此处阅读更多相关信息。
- 使用平台进行编码 ——网络平台已演变为更适合开发人员的堆栈，我们希望利用这一方面——使用平台进行编码，而不是针对平台进行编码。这意味着我们可以减少对大型库和框架的依赖，并开始使用本机 API 来实现相同的功能。例如，我们尝试避免使用 jQuery 进行 DOM 操作，而使用本机 DOM API。同样，我们可以使用 polyfill 而不是 $.ajax 等。最终结果是加载速度更快的页面，并且对用户交互的响应速度也很快。顺便说一句，jQuery 仍加载在页面中，因为 eBay 平台的一些特定代码依赖于它，我们正在努力完全消除这种依赖性。
但我们的努力并没有就此止步。速度方面对我们来说至关重要，我们希望在速度方面做得更多。那时我们遇到了 AMP。
尝试 AMP
当我们开始为浏览进行最初的头脑风暴时，AMP 项目也宣布了。它似乎与我们自己关于如何呈现新体验的想法产生了很大的共鸣。虽然 AMP 更适合于基于发布者的内容，但它仍然是一个使用开放网络构建的开源项目。此外，新浏览体验的一部分流量将来自搜索引擎，这使得研究 AMP 更有希望。因此，我们迅速联系了 Google 的 AMP 人员，并讨论了除了普通移动网页之外，还为浏览体验构建 AMP 版本的想法。他们非常支持它。这一积极反应鼓励我们开始研究电子商务领域的 AMP 技术，并同时开发浏览器的 AMP 版本。
今天我们自豪地宣布，新浏览体验的 AMP 版本已上线，并且大约800 万基于 AMP 的浏览节点已在生产中可用。查看移动浏览器中的一些热门查询——例如 无人机摄像头 和 索尼 PlayStation。基本上，将 amp/ 添加到任何浏览 URL 的路径中都会呈现一个 AMP 版本（例如，非 AMP，AMP）。我们尚未从常规（非 AMP）页面链接所有这些页面。此步骤正在等待完成一些待处理的任务。目前，我们仅在移动网络中启用了这种新的浏览体验。在接下来的几周内，桌面网络体验也将推出。
那么，在电子商务领域实施 AMP 的体验如何？我们在下面重点介绍了一些我们的经验。
哪些效果不错？
- 最佳实践——AMP 的优点之一是，它最终是一系列用于构建移动网页的最佳实践。我们已经遵循其中一些实践，但采用情况分散在各个团队，每个团队都有自己的偏好。此举措帮助我们整合了列表，并将这些最佳实践纳入我们常规开发生命周期的一部分。这使得我们对 AMP 的方法更加自然，而不是强制功能。此举的另一个好处是，即使我们的非 AMP 页面也会变得更快。
- 代码分叉减少——这遵循上一条。由于我们开始遵循一些 AMP 最佳实践来构建常规页面，因此我们能够在非 AMP 和 AMP 浏览页面之间重用大多数 UI 组件。这导致代码分叉减少，否则会成为维护噩梦。话虽如此，在涉及基于 JavaScript 的组件时仍然存在一些分叉，我们仍在找出最佳解决方案。
- AMP 组件列表 — 尽管 AMP 项目最初更专注于基于发布者的内容和新闻提要，但 AMP 组件列表 仍然足以构建用于查看电子商务页面的基本产品。用户无法对商品执行操作（例如“添加到购物车”），但他们仍然可以获得稳定的浏览体验。好消息是该列表正在变得更好，并且每天都在增长。诸如 侧边栏、轮播 和 灯箱 等组件对于提供引人入胜的电子商务体验至关重要。
- 内部 AMP 平台 — 我们一直在考虑利用 AMP 生态系统进行我们自己的搜索，类似于 Google 处理 AMP 结果的方式。此计划处于讨论的非常早期阶段，但我们的搜索使用 AMP 技术的可能性非常有趣。
复杂的部分
- 基础设施组件 — 要将 eBay 页面发布到生产环境，许多基础设施组件会自动发挥作用。这些组件包括全局页眉/页脚、网站速度信标套件、实验库和分析模块。它们都包含一定数量的 JavaScript，这立即取消了它们在 AMP 版本中使用的资格。这增加了开发的复杂性。我们不得不分叉一些基础设施组件以支持 AMP 指南。在发布之前，它们必须经过严格的回归周期，这增加了延迟。此外，我们的默认前端服务器管道必须有条件地进行调整，以排除或交换某些模块。这是一个很好的学习曲线，随着时间的推移，我们还用更强大且可持续的解决方案取代了我们早期的快速破解。
- 跟踪 — AMP 通过其
amp-analytics组件提供用户活动跟踪。amp-analytics可以通过各种方式进行配置，但它仍然不足以满足 eBay 的细化跟踪需求。我们还执行诸如会话拼接之类的操作，这需要 cookie 访问权限。创建符合我们需求的amp-analytics配置正变得难以管理。我们需要对组件进行一些增强，我们希望尽快开发并提交给 项目。
下一步是什么？
我们很高兴与 Google 和参与 AMP 项目的所有其他人员合作，以缩小在 AMP 中启动成熟的电子商务体验方面的差距。我们已经创建了一个联合工作组来解决这一差距，我们将研究这些项目以及更多项目。
- 智能按钮 — 这些按钮使我们能够执行诸如“添加到购物车”和“立即购买”之类的操作，并支持身份验证。
- 输入元素 — 用户交互元素对于电子商务体验至关重要，无论是简单的搜索文本框还是复选框。
- 高级跟踪——如前所述，我们需要对 eBay 进行更细粒度的跟踪，因此我们必须找出实现它的方法。
- A/B 测试——这将启用 AMP 上的实验。
有了这些项目，电子商务的 AMP 很快就会开始浮出水面。
我们还将研究创建从 AMP 视图到常规页面视图的无缝过渡，类似于华盛顿邮报使用服务工作者所做的那样。这将使用户能够获得完整且愉悦的 eBay 体验，而无需切换上下文。
我们还被问到是否更关注网络而不是原生。答案是否定的。在 eBay，我们坚信网络和原生不会相互竞争。它们确实相互补充，并且组合生态系统对我们非常有效。我们很快将在我们的原生平台中推出这些浏览体验。
我们正在努力使 eBay 成为世界上第一个购物场所，这是朝着这个目标迈出的一步。感谢我的同事Suresh Ayyasamy，他合作实现了浏览节点的 AMP 版本，并成功将其推广到生产中。
——Senthil