Shopify Hydrogen：爲「動態電商」而生的前端框架
前天，Shopify 發佈了 Hydrogen 的開發者預覽版。這項技術第一次亮相是在今年的 Shopify Unite 大會上的最後，Shopify CEO Tobias 親自上手，坐在電腦前，演示了一段如何使用 React.js 打破現有 Shopify theme 的限制，開發一個高度定製化的店鋪界面。在國內，我們稱之爲「店鋪裝修」。
視頻鏈接：https://www.youtube.com/watch?v=FPNZkPqUFIU
在演示裏，Tobi 使用這個叫 Hydrogen（氫氣）的技術框架，實現了一個可以被 360 度拖拽的、多顏色組合 3D 模型的展示功能，效果非常酷炫。
「有趣」，有多重要？
在這段演示中，Tobi 不止一次的提到，這個新技術多麼有趣（FUN）。
他也提出了一個觀點：I think fun is really underrated in business（我認爲「樂趣」在商業中被嚴重低估了）。
接下來他講的這一段故事，看得我熱淚盈眶。
他回顧在 17 年前，他學習了一門很有趣的編程語言 Ruby，並把賭注押在 Ruby on Rails 框架來寫 Shopify 的代碼，無論是在當年還是現在，Ruby 都是一門非常小衆的語言，但是它的特點就是和英語寫法很像，自稱是程序員最好的朋友，雖然犧牲了運行效率，但是極大的提高了開發效率。
他做這個選擇，是因爲他從 Ruby 和 Ruby on Rails 那裏獲得了很多靈感和樂趣，代碼寫得飛起。也是它們支撐了他走過那些最艱苦難熬的日子，如果沒有它們，今天的 Shopify 也不會存在。
他在結尾的時候說，
I guess what I really learned along the way is that fun is actually good for business, the most creative things in the world are created by talented people, then they are having fun solving problems together.
我想我一路走來真正學到的是：樂趣其實對商業是有好處的。世界上最有創意的東西是由有才華的人創造的，然後他們一起享受解決問題的樂趣。
我本人是在 2013 年的時候在大三學習編程，同年也是因爲「有趣」而自學的 Ruby 和 Ruby on Rails，後面在法國創業做了個外賣平臺，也是用的 Ruby on Rails 搭建的，所以我很能體會 Tobi 對這個技術的熱愛。
「動態電商」？
回到正題，電商本就應該是「動態」的，不是嗎？
Dynamic commerce 這個概念，類似淘系電商的千人千面。可是爲什麼 Shopify 要強調它呢？
其實 Shopify 面臨的問題和國內的電商平臺還不太一樣。來自世界各地的買家和賣家，用着各式各樣的語言、貨幣、稅率和支付方式在進行交易。
而且沒有了平臺流量的加持，獨立站賣家還得每天想着各種辦法去引流，把網站做的又好看又快，服務好每一位消費者。
總結成一句話，就是打造差異化（動態）和提供極致的購買體驗（快）。
「動態」和「快」很難兼得
快不快，直接影響商家的 GMV。
當你打開一個網頁的時候，
你覺得等了好久還沒看到內容，你就關了。
你看到內容了，但是似乎點了按鈕沒反應，你也關了。
這些都是造成轉化率降低的原因。
這裏需要介紹兩個重要的 Web 指標，LCP 和 FID。
Largest Contentful Paint (LCP) ：最大內容繪製，測量加載性能。爲了提供良好的用戶體驗，LCP 應在頁面首次開始加載後的 2.5 秒內發生。
First Input Delay (FID) ：首次輸入延遲，測量交互性。爲了提供良好的用戶體驗，頁面的 FID 應爲 100 毫秒或更短。
簡單來說：「等了好久看不到內容」，就是 LCP 太長；「點了按鈕或是搜索沒反應」，就是 FID 太長。
造成 LCP 太長的原因有很多，除了直接和技術相關的原因，還受到地理位置和網絡條件的影響。
Shopify 的服務器和數據庫在北美，一個身在亞洲的買家訪問了 Shopify 的網站，這個請求需要去到北美的服務器，從數據庫取出商品數據渲染，再返回給亞洲的買家展示。如果這個買家用的是 3G 網絡，那更是慘不忍睹。
當然實際上的請求鏈路並不完全像我說的一樣。
爲了解決地理位置的問題，可以用 CDN 在邊緣節點（edge node）緩存渲染好的靜態 HTML 頁面以及 JS / CSS / 圖片等靜態資源，這樣亞洲的買家下一次訪問這個店鋪的時候，就會在他就近的服務器，比如香港節點，直接返回頁面內容給他。
同時，通過減小 JS 等靜態資源的打包體積，來解決用戶網絡條件差的問題。
靜態化可以讓加載速度變快，但...
一個店鋪裏可能就有成百上千個 SKU，賣家每天也需要在後臺頻繁更改着商品標題、圖片、價格。展示給買家的頁面總不能一直都是幾個小時前緩存的那一份吧？
讓電商更「動態」也更「快」
Shopify Hydrogen 就是爲了解決以上這些問題而生。
首先，什麼是 Shopify Hydrogen？Shopify 官方對它的解釋原話是：
It is a front-end web development framework used for building Shopify custom storefronts. It includes the structure, components, and tooling you need to get started so you can spend your time styling and designing features that make your brand unique.
https://hydrogen.shopify.dev/
粗暴的翻譯一下：Hydrogen，用於構建無頭電商的 Shopify 綁定框架（只綁定適用於 Shopify）。它是一個用於構建 Shopify 定製店面的前端 Web 開發框架。它包括你需要的項目結構、組件和開發工具，以便你可以把時間花在設計樣式和功能上，使你的品牌獨一無二。
本質上，是通過提供更棒的開發者體驗，來讓開發者搭建速度更快的動態電商。
Shopify 的店鋪界面是由一種基於 Ruby 的模版引擎 Liquid 進行動態渲染的，它是 Shopify CEO Tobi 在 2008 年開源的項目。它讓開發者可以編寫一些動態邏輯來控制頁面上展示的數據，這讓很多設計師和開發者可以通過 Shopify theme 來賺錢。
但是開發一個 Shopify theme 的成本卻不低，尤其是 React.js 和 Vue.js 這樣的現代前端框架流行起來之後，瞭解並熟悉 Liquid 語法的 UI 開發者越來越少。
同時，Liquid 的性能也一直不是很理想，雖然 Shopify 近幾年對 Storefront 渲染引擎做了很多優化，包括把 Storefront 渲染引擎從 Rails 巨石應用裏面解耦出來，也用 C 語言寫了 Liquid 擴展庫。但是由於動態渲染引擎依舊需要在 Shopify 的北美服務器完成，所以依舊有着很大的優化空間。
Hydrogen 的第一個「快」，是頁面加載快
那麼就必須先解決渲染引擎的性能問題。
-
邊緣計算 Edge computing：渲染引擎在就近的邊緣段節點做計算
-
流式服務端渲染 Streaming Server-side rendering：無需等待渲染完全完成，就讓瀏覽器儘快接收到頁面數據
對於那位在亞洲的 3G 網絡手機端買家來說，
他訪問頁面的請求被就近的香港節點處理到，
取到數據，開始渲染，
不用等待渲染完成，就能流式返回渲染了一部分的頁面。
在這樣的渲染模式下，在全球任何一個地方的買家，都有可能在一秒內打開任何一個基於 Hydrogen 技術的 Shopify 店鋪網站。
這個看上去很完美，但是一直無法實現的能力。通過 React.js 的 Streaming SSR 能力以及類似 Vercel 和 Netlify 這樣提供邊緣計算能力（edge computing）的平臺，將會變成可能。
Hydrogen 的第二個「快」，是開發效率快
原來，改一行代碼，都需要重新打包（bundle），如此反覆。
而搭載了 Vite.js 作爲打包工具的 Hydrogen，底層是基於 ES Modules 的新一代 bundleless 編譯器，只編譯不打包，相比 bundle 模式要快 90% 以上。現在一眨眼的功夫，你改的樣式就自動更新到瀏覽器上了，用起來非常之爽。
同時選用了具備 Streaming SSR 能力的 React.js 作爲基礎庫，有着最龐大的前端社區生態，有大把現成的組件，幫開發者輕鬆實現任何一個酷炫的交互功能。
樣式則用了最近非常火的 TailwindCSS，沒有先入爲主的預定樣式，而是提供豐富的 utilities class 來幫你實現獨一無二的設計樣式，非常適合電商這個場景。
再加上 Hydrogen 集成好的 Shopify API 組件庫，讓你只需要關注樣式和功能，高速迭代。
最重要的是，這一套技術棧在現在的前端人才市場裏，基本上每個開發者都會，不存在招人難的問題。
Hydrogen 的第三個「快」，是全球化部署快
新一代全球邊緣計算部署平臺 Oxygen（氧氣），將在明年年初推出。
當代碼推到倉庫的那一刻，就開始在全球所有的邊緣節點服務器部署新的代碼變更，還支持分支預覽，開發體驗直接拉滿！
這次的開發者預覽版也放出了一個體驗版店鋪，點擊下面的【原文鏈接】，來感受一下 Hydrogen 到底有多快吧！
寫在最後
雖然是一篇介紹技術的文章，但更多也是爲了讓更多人瞭解海外電商的趨勢。從技術視角去看，以爲技術也是爲了解決商業難題的。某個技術方向的出現，側面也反映了行業在面臨着怎樣的挑戰。
最後，希望「Make business more FUN」這顆種子可以在更多人的心裏萌芽。Respect！
歡迎加我的個人微信號，或者 Shopify Hunt 微信公衆號，獲得最前沿的跨境電商科技產業資訊！
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fH4dAQl3BckpfA2jrZwJ1w