本文转载自：众成翻译
译者：文蔺
链接：http://www.zcfy.cc/article/912
原文：http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/
本年 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 版本，并胜利将其投入临盆环境。
