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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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