【譯】 eBay 的速度與風範

文藺發表於2016-07-27

本文轉載自：眾成翻譯
譯者：文藺
連結：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 版本，併成功將其投入生產環境。

相關文章