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

本文轉載自：眾成翻譯
譯者：文藺
鏈接：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 更多地面向基于出版的內容，它依然是使用開放 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 版本，并成功將其投入生產環境。