摘要：本文轉(zhuǎn)載自眾成翻譯譯者文藺鏈接原文今年的頂級(jí)舉措之一是為我們的用戶提供一個(gè)更好的瀏覽體驗(yàn)。這意味著保持最少的。這些組件有全局的，網(wǎng)站速度信標(biāo)現(xiàn)場(chǎng)速度信標(biāo)套件，試驗(yàn)的庫(kù)文件，以及統(tǒng)計(jì)模塊等。它們?cè)诎l(fā)布前要經(jīng)歷嚴(yán)格的回歸測(cè)試，這就會(huì)增加延時(shí)。

本文轉(zhuǎn)載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/912
原文：http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/

今年 eBay 的頂級(jí)舉措之一是為我們的用戶提供一個(gè)更好的瀏覽體驗(yàn)。在最近的一次采訪中，Devin Wenig 對(duì)關(guān)于此事的重要性已經(jīng)有了很棒的評(píng)論。我們的想法是利用結(jié)構(gòu)化的數(shù)據(jù)和機(jī)器學(xué)習(xí)，讓各種價(jià)值觀不同的用戶購(gòu)物，這些用戶中可能一些人偏好存錢(qián)，而另外一些人可能會(huì)關(guān)注像暢銷(xiāo)品這樣一些東西。

開(kāi)始設(shè)計(jì)體驗(yàn)的時(shí)候，我們最先聚焦于移動(dòng) Web。和許多其他組織一樣，移動(dòng) Web 已成為發(fā)展成長(zhǎng)最高的產(chǎn)業(yè)點(diǎn)。我們希望先在移動(dòng) Web 中啟動(dòng)新的瀏覽體驗(yàn)，接下來(lái)是桌面電腦，以及原生 App。

移動(dòng) Web 新版瀏覽體驗(yàn)的核心設(shè)計(jì)原則是，簡(jiǎn)單，可訪問(wèn)，快，特快（simple, accessible, and fast, really fast）。就前端方面而言，我們已有許多可選項(xiàng)以達(dá)成目標(biāo)。

精簡(jiǎn)、可訪問(wèn) —— 從一開(kāi)始我們就希望頁(yè)面越瘦越好。這意味著保持最少的 HTML、CSS、JS。為達(dá)成目標(biāo)，我們遵循著模塊化架構(gòu)，并開(kāi)始搭建原子化的組件。一個(gè)頁(yè)面基本上就是一堆模塊，模塊又是由其他子模塊搭起來(lái)的。這能夠最大程度地實(shí)現(xiàn)代碼復(fù)用，從而徹底地減少資源（CSS 和 JS）體積。除此之外，我們的樣式庫(kù)通過(guò) CSS 強(qiáng)制使用可訪問(wèn)性（accessibility） —— 使用 ARIA 屬性定義樣式，而非僅僅使用類(lèi)名。這迫使開(kāi)發(fā)者一開(kāi)始就編寫(xiě) a11y 友好型的標(biāo)記，而不是在事后再去考慮。你可以在這里讀到更多。

面向平臺(tái)編碼 —— Web 平臺(tái)已變得到對(duì)開(kāi)發(fā)者更友好了，我們希望可以利用這一方面 —— 面向平臺(tái)編碼，而非背向平臺(tái)。這意味著，我們可以減少對(duì)大體積的庫(kù)文件和框架的依賴(lài)，并開(kāi)始使用原生 API 達(dá)到同樣的目的。比方說(shuō)，在 DOM 操作的時(shí)候，我們?cè)囍皇褂?jQuery，而是使用原生的 DOM API。類(lèi)似地，可以使用 fetch polyfill 替代 $.ajax，大致如此，不一而足。最終的結(jié)果就是頁(yè)面加載更快，并且能更好地響應(yīng)用戶交互。順帶一句，jQuery 還是會(huì)被加載，因?yàn)槟承┽槍?duì) eBay 平臺(tái)的特定代碼還在依賴(lài)它，但我們正在努力以徹底移除此依賴(lài)。

不過(guò)，我們的努力并不止步于此。速度方面對(duì)我們來(lái)說(shuō)至關(guān)重要，我們希望做更多關(guān)于速度的工作。因此我們使用了 AMP。

AMP 項(xiàng)目差不多和我們開(kāi)始對(duì)瀏覽體驗(yàn)頭腦風(fēng)暴同時(shí)啟動(dòng)。我們關(guān)于如何渲染新體驗(yàn)的想法，與它似乎產(chǎn)生了很多共鳴。雖然 AMP 更多地面向基于出版的內(nèi)容，它依然是使用開(kāi)放 Web 構(gòu)建的開(kāi)源項(xiàng)目。并且，新版瀏覽體驗(yàn)的流量的一部分是通過(guò)搜索引擎進(jìn)行的，這使一探 AMP 更富希望。所以我們很快聯(lián)系上 Google 的 AMP 人員，討論在正常的移動(dòng) Web 頁(yè)面之外構(gòu)建 AMP 版本的想法。他們非常支持。積極的反應(yīng)鼓舞了我們，我們開(kāi)始探索電子商務(wù)世界中的 AMP 技術(shù)，并同時(shí)開(kāi)始開(kāi)發(fā) AMP 版本。

現(xiàn)在我們可以驕傲地宣布，新瀏覽體驗(yàn)的 AMP 版本正在使用，生產(chǎn)環(huán)境中有大約 800 萬(wàn)基于 AMP 的節(jié)點(diǎn)可以使用。在移動(dòng)瀏覽器中看下一些受歡迎的搜索內(nèi)容：比如說(shuō)，Camera Drones 和 Sony PlayStation。只需要在瀏覽的 URL 的路徑后面加上 amp/，就會(huì)渲染出 AMP 版本（比如說(shuō)，非 AMP 版本，AMP 版本）。目前，我們尚未將所有常規(guī)頁(yè)面（非 AMP）鏈接到 AMP。這一步還在等待一些任務(wù)的完成。就當(dāng)前來(lái)說(shuō)，我們僅在移動(dòng) Web 上啟用了該新版瀏覽體驗(yàn)。接下來(lái)幾周，桌面端也會(huì)啟用。

所以電商世界中實(shí)現(xiàn) AMP 的體驗(yàn)究竟如何？我們總結(jié)了如下的一些經(jīng)驗(yàn)。

最佳實(shí)踐 —— AMP 很好的一點(diǎn)是，最終所得到的是構(gòu)建移動(dòng) Web 頁(yè)面的最佳實(shí)踐的系列組合。我們已經(jīng)遵循了一些最佳實(shí)踐，但采用是分散在不同團(tuán)隊(duì)之間的，每個(gè)團(tuán)隊(duì)都有自己的偏好。這樣的起步，幫我們鞏固了優(yōu)化列表，并將這些最佳實(shí)踐吸收到日常開(kāi)發(fā)周期中。這使我們更加有機(jī)地使用 AMP，而不是迫不得已而為。另外一個(gè)好的副作用是，這甚至讓我們的非 AMP 頁(yè)面變快了。

代碼分叉更少 —— 這緊接著上一點(diǎn)。我們開(kāi)始構(gòu)建常規(guī)頁(yè)面的時(shí)候，就遵循著 AMP 最佳實(shí)踐，因此可以在非 AMP 頁(yè)面與 AMP 頁(yè)面之間復(fù)用大部分 UI 組件。這使代碼分叉更少，不然的話維護(hù)起來(lái)絕對(duì)的噩夢(mèng)。話雖如此，當(dāng)涉及到基于 JavaScript 的組件的時(shí)候，還是會(huì)有一些分叉，不過(guò)我們正在尋找最佳解決方案。

AMP 組件列表 —— 雖然 AMP 項(xiàng)目最初關(guān)注更多的是基于出版的內(nèi)容和新聞推送，AMP 組件列表對(duì)構(gòu)建一個(gè)基本的電商產(chǎn)品查看頁(yè)面還是綽綽有余。用戶沒(méi)辦法在內(nèi)容項(xiàng)目上操作（如“加入購(gòu)物車(chē)”），但還是可以有很好的瀏覽體驗(yàn)。好消息是，這個(gè)列表正在不斷優(yōu)化、成長(zhǎng)中。像 sidebar、carousel、lightbox 等這些組件，對(duì)良好的電商用戶體驗(yàn)至關(guān)重要。

內(nèi)部 AMP 平臺(tái) —— 我們一直在考慮在搜索中利用 AMP 生態(tài)系統(tǒng)，類(lèi)似于 Google 處理 AMP 的結(jié)果。這個(gè)計(jì)劃尚處于很早的討論階段，不過(guò)很有意思。

基礎(chǔ)組件 —— 將一個(gè) eBay 頁(yè)面投入生產(chǎn)環(huán)境中的時(shí)候，許多基礎(chǔ)組件自動(dòng)登場(chǎng)。這些組件有：全局的 header/footer，網(wǎng)站速度信標(biāo)（現(xiàn)場(chǎng)速度信標(biāo)套件），試驗(yàn)的庫(kù)文件，以及統(tǒng)計(jì)模塊等。它們中基本都有一些 JavaScript存在，這立刻讓它們?cè)?AMP 版本中無(wú)法使用。這給開(kāi)發(fā)增加了復(fù)雜度。我們不得不 fork 一些基礎(chǔ)組件，以支持 AMP。它們?cè)诎l(fā)布前要經(jīng)歷嚴(yán)格的回歸測(cè)試，這就會(huì)增加延時(shí)。此外，默認(rèn)的前端服務(wù)器不得不根據(jù)條件調(diào)整，剔除或切換某些模塊。學(xué)習(xí)曲線還好，而隨著時(shí)間的推移，我們也將早期快速的 hack 已被替換為更健壯、可持續(xù)的解決方案。

跟蹤 —— AMP 為用戶提供活動(dòng)跟蹤，通過(guò)其 amp-analytics 組件進(jìn)行。amp-analytics 有好幾種配置方式，但它還不能滿足 eBay 的跟蹤粒度。我們也一些像會(huì)話拼接（session stitching）這樣的事情，這需要訪問(wèn) cookie。為我們的需求專(zhuān)門(mén)寫(xiě)一個(gè) amp-analytics 配置太慢了，而且不可控。我們需要組件層面的一些提升，希望很快能開(kāi)發(fā)出來(lái)并提交給項(xiàng)目。

我們很高興，能與谷歌和其他參與 AMP 項(xiàng)目的小伙伴們一起工作。我們已經(jīng)創(chuàng)建了一個(gè)聯(lián)合工作組以解決分歧，并且正在研究這些內(nèi)容。

智能按鈕 —— 這些讓我們可以在認(rèn)證支持的前提下，完成“添加到購(gòu)物車(chē)”“立即購(gòu)買(mǎi)”這些的動(dòng)作。

輸入框元素 —— 對(duì)電子商務(wù)來(lái)說(shuō)，用戶交互元素非常重要。它們可能是簡(jiǎn)單的搜索文本框或者復(fù)選框。

提升的跟蹤 —— 如前所述，eBay 需要粒度更小的跟蹤，所以我們必須找到完成任務(wù)的辦法。

A/B Test —— 這可以完成 AMP 項(xiàng)目的 A/B 測(cè)試。

隨著這些內(nèi)容的發(fā)展，電子商務(wù)中的 AMP 會(huì)很快浮出水面。

我們也正在研究從 AMP 視圖無(wú)縫切換到普通視圖的辦法，這有點(diǎn)像華盛頓郵報(bào)使用 Service Workers 所做到的。這將讓 eBay 用戶有更加完整、愉快的體驗(yàn)，無(wú)需切換上下文。

也有一些人向我們提問(wèn)，Web 是否比 Native 獲得了更多的青睞？答案是否。在 eBay中，我們堅(jiān)信 Web 與 Native 并非互相競(jìng)爭(zhēng)的關(guān)系。實(shí)際上，這兩者是互補(bǔ)的，組合的生態(tài)系統(tǒng)工作得很好。我們會(huì)很快在 Native 平臺(tái)上啟用這些瀏覽體驗(yàn)。

我們正在通往使 eBay 成為全球購(gòu)物首選地的路上，本文提及的嘗試只是其中一小步。感謝我的同事 Suresh Ayyasamy，他和我一起實(shí)現(xiàn)了 eBay 的 AMP 版本，并成功將其投入生產(chǎn)環(huán)境。