原文作者:Senthil Padmanabhan
原文地址:http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/
中文翻译:文蔺
译文地址:http://www.wemlion.com/2016/browse-ebay-with-style-and-speed-ebay/
本文由 @文蔺 翻译，转载请保留此声明。
著作权属于原作者，本译文仅用于学习、研究和交流目的，请勿用于商业目的。

今年 eBay 的顶级举措之一是为我们的用户提供一个更好的浏览体验。在最近的一次采访中，Devin Wenig 对关于此事的重要性已经有了很棒的评论。我们的想法是利用结构化的数据和机器学习，让各种价值观不同的用户购物，这些用户中可能一些人偏好存钱，而另外一些人可能会关注像畅销品这样一些东西。

开始设计体验的时候，我们最先聚焦于移动 Web。和许多其他组织一样，移动 Web 已成为发展成长最高的产业点。我们希望先在移动 Web 中启动新的浏览体验，接下来是桌面电脑，以及原生 App。

移动 Web 新版浏览体验的核心设计原则是，简单，可访问，快，特快（simple, accessible, and fast, really fast）。就前端方面而言，我们已有许多可选项以达成目标。

  • 精简、可访问 —— 从一开始我们就希望页面越瘦越好。这意味着保持最少的 HTML、CSS、JS。为达成目标，我们遵循着模块化架构，并开始搭建原子化的组件。一个页面基本上就是一堆模块，模块又是由其他子模块搭起来的。这能够最大程度地实现代码复用，从而彻底地减少资源（CSS 和 JS）体积。除此之外，我们的样式库通过 CSS 强制使用可访问性（accessibility） —— 使用 ARIA 属性定义样式，而非仅仅使用类名。这迫使开发者一开始就编写 a11y 友好型的标记，而不是在事后再去考虑。你可以在这里读到更多。

  • 面向平台编码 —— Web 平台已变得到对开发者更友好了，我们希望可以利用这一方面 —— 面向平台编码，而非背向平台。这意味着，我们可以减少对大体积的库文件和框架的依赖，并开始使用原生 API 达到同样的目的。比方说，在 DOM 操作的时候，我们试着不使用 jQuery，而是使用原生的 DOM API。类似地，可以使用 fetch polyfill 替代 $.ajax，大致如此，不一而足。最终的结果就是页面加载更快，并且能更好地响应用户交互。顺带一句，jQuery 还是会被加载，因为某些针对 eBay 平台的特定代码还在依赖它，但我们正在努力以彻底移除此依赖。

不过，我们的努力并不止步于此。速度方面对我们来说至关重要，我们希望做更多关于速度的工作。因此我们使用了 AMP。

AMP 试验

AMP 项目差不多和我们开始对浏览体验头脑风暴同时启动。我们关于如何渲染新体验的想法，与它似乎产生了很多共鸣。虽然 AMP 更多地面向基于出版的内容，它依然是使用开放 Web 构建的开源项目。并且，新版浏览体验的流量的一部分是通过搜索引擎进行的，这使一探 AMP 更富希望。所以我们很快联系上 Google 的 AMP 人员，讨论在正常的移动 Web 页面之外构建 AMP 版本的想法。他们非常支持。积极的反应鼓舞了我们，我们开始探索电子商务世界中的 AMP 技术，并同时开始开发 AMP 版本。

现在我们可以骄傲地宣布，新浏览体验的 AMP 版本正在使用，生产环境中有大约 800 万基于 AMP 的节点可以使用。在移动浏览器中看下一些受欢迎的搜索内容：比如说，Camera Drones 和 Sony PlayStation。只需要在浏览的 URL 的路径后面加上 amp/，就会渲染出 AMP 版本（比如说，非 AMP 版本，AMP 版本）。目前，我们尚未将所有常规页面（非 AMP）链接到 AMP。这一步还在等待一些任务的完成。就当前来说，我们仅在移动 Web 上启用了该新版浏览体验。接下来几周，桌面端也会启用。

所以电商世界中实现 AMP 的体验究竟如何？我们总结了如下的一些经验。

工作很好的部分

  • 最佳实践 —— AMP 很好的一点是，最终所得到的是构建移动 Web 页面的最佳实践的系列组合。我们已经遵循了一些最佳实践，但采用是分散在不同团队之间的，每个团队都有自己的偏好。这样的起步，帮我们巩固了优化列表，并将这些最佳实践吸收到日常开发周期中。这使我们更加有机地使用 AMP，而不是迫不得已而为。另外一个好的副作用是，这甚至让我们的非 AMP 页面变快了。

  • 代码分叉更少 —— 这紧接着上一点。我们开始构建常规页面的时候，就遵循着 AMP 最佳实践，因此可以在非 AMP 页面与 AMP 页面之间复用大部分 UI 组件。这使代码分叉更少，不然的话维护起来绝对的噩梦。话虽如此，当涉及到基于 JavaScript 的组件的时候，还是会有一些分叉，不过我们正在寻找最佳解决方案。

  • AMP 组件列表 —— 虽然 AMP 项目最初关注更多的是基于出版的内容和新闻推送，AMP 组件列表对构建一个基本的电商产品查看页面还是绰绰有余。用户没办法在内容项目上操作（如“加入购物车”），但还是可以有很好的浏览体验。好消息是，这个列表正在不断优化、成长中。像 sidebar、carousel、lightbox 等这些组件，对良好的电商用户体验至关重要。

  • 内部 AMP 平台 —— 我们一直在考虑在搜索中利用 AMP 生态系统，类似于 Google 处理 AMP 的结果。这个计划尚处于很早的讨论阶段，不过很有意思。

复杂的部分

  • 基础组件 —— 将一个 eBay 页面投入生产环境中的时候，许多基础组件自动登场。这些组件有：全局的 header/footer，网站速度信标（现场速度信标套件），试验的库文件，以及统计模块等。它们中基本都有一些 JavaScript存在，这立刻让它们在 AMP 版本中无法使用。这给开发增加了复杂度。我们不得不 fork 一些基础组件，以支持 AMP。它们在发布前要经历严格的回归测试，这就会增加延时。此外，默认的前端服务器不得不根据条件调整，剔除或切换某些模块。学习曲线还好，而随着时间的推移，我们也将早期快速的 hack 已被替换为更健壮、可持续的解决方案。

  • 跟踪 —— AMP 为用户提供活动跟踪，通过其 amp-analytics 组件进行。amp-analytics 有好几种配置方式，但它还不能满足 eBay 的跟踪粒度。我们也一些像会话拼接（session stitching）这样的事情，这需要访问 cookie。为我们的需求专门写一个 amp-analytics 配置太慢了，而且不可控。我们需要组件层面的一些提升，希望很快能开发出来并提交给项目。

接下来

我们很高兴，能与谷歌和其他参与 AMP 项目的小伙伴们一起工作。我们已经创建了一个联合工作组以解决分歧，并且正在研究这些内容。

  • 智能按钮 —— 这些让我们可以在认证支持的前提下，完成“添加到购物车”“立即购买”这些的动作。

  • 输入框元素 —— 对电子商务来说，用户交互元素非常重要。它们可能是简单的搜索文本框或者复选框。

  • 提升的跟踪 —— 如前所述，eBay 需要粒度更小的跟踪，所以我们必须找到完成任务的办法。

  • A/B Test —— 这可以完成 AMP 项目的 A/B 测试。

随着这些内容的发展，电子商务中的 AMP 会很快浮出水面。

我们也正在研究从 AMP 视图无缝切换到普通视图的办法，这有点像华盛顿邮报使用 Service Workers 所做到的。这将让 eBay 用户有更加完整、愉快的体验，无需切换上下文。

也有一些人向我们提问，Web 是否比 Native 获得了更多的青睐？答案是否。在 eBay中，我们坚信 Web 与 Native 并非互相竞争的关系。实际上，这两者是互补的，组合的生态系统工作得很好。我们会很快在 Native 平台上启用这些浏览体验。

我们正在通往使 eBay 成为全球购物首选地的路上，本文提及的尝试只是其中一小步。感谢我的同事 Suresh Ayyasamy，他和我一起实现了 eBay 的 AMP 版本，并成功将其投入生产环境。

原文作者：Senthil Padmanabhan
原文地址：http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/
本译文仅用于学习、研究和交流目的，转载请保留原文出处