Shopify Hydrogen:為「動態電商」而生的前端框架

語言: CN / TW / HK

「時光不負,創作不停,本文正在參加2021年終總結徵文大賽


前天,Shopify 釋出了 Hydrogen 的開發者預覽版。這項技術第一次亮相是在今年的 Shopify Unite 大會上的最後,Shopify CEO Tobias 親自上手,坐在電腦前,演示了一段如何使用 React.js 打破現有 Shopify theme 的限制,開發一個高度定製化的店鋪介面。在國內,我們稱之為「店鋪裝修」。

tobi.webp

在演示裡,Tobi 使用這個叫 Hydrogen(氫氣)的技術框架,實現了一個可以被 360 度拖拽的、多顏色組合 3D 模型的展示功能,效果非常酷炫。

3d-model-color-switch.gif

「有趣」,有多重要?

在這段演示中,Tobi 不止一次的提到,這個新技術多麼有趣(FUN)。

他也提出了一個觀點:I think fun is really underrated in business(我認為「樂趣」在商業中被嚴重低估了)。

fun.webp

接下來他講的這一段故事,看得我熱淚盈眶。

他回顧在 17 年前,他學習了一門很有趣的程式語言 Ruby,並把賭注押在 Ruby on Rails 框架來寫 Shopify 的程式碼,無論是在當年還是現在,Ruby 都是一門非常小眾的語言,但是它的特點就是和英語寫法很像,自稱是程式設計師最好的朋友,雖然犧牲了執行效率,但是極大的提高了開發效率。

ruby.webp

他做這個選擇,是因為他從 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。

lcf.webp

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 來賺錢。

liquid.jpg

但是開發一個 Shopify theme 的成本卻不低,尤其是 React.js 和 Vue.js 這樣的現代前端框架流行起來之後,瞭解並熟悉 Liquid 語法的 UI 開發者越來越少。

同時,Liquid 的效能也一直不是很理想,雖然 Shopify 近幾年對 Storefront 渲染引擎做了很多優化,包括把 Storefront 渲染引擎從 Rails 巨石應用裡面解耦出來,也用 C 語言寫了 Liquid 擴充套件庫。但是由於動態渲染引擎依舊需要在 Shopify 的北美伺服器完成,所以依舊有著很大的優化空間。

Hydrogen 的第一個「快」,是頁面載入快

那麼就必須先解決渲染引擎的效能問題。

  1. 邊緣計算 Edge computing:渲染引擎在就近的邊緣段節點做計算
  2. 流式服務端渲染 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 來幫你實現獨一無二的設計樣式,非常適合電商這個場景。

202111101652.gif

再加上 Hydrogen 整合好的 Shopify API 元件庫,讓你只需要關注樣式和功能,高速迭代。

最重要的是,這一套技術棧在現在的前端人才市場裡,基本上每個開發者都會,不存在招人難的問題。

Hydrogen 的第三個「快」,是全球化部署快

新一代全球邊緣計算部署平臺 Oxygen(氧氣),將在明年年初推出。

當代碼推到倉庫的那一刻,就開始在全球所有的邊緣節點伺服器部署新的程式碼變更,還支援分支預覽,開發體驗直接拉滿!

541636553687_.pic_hd.jpg

說了那麼多,來感受一下 Hydrogen 到底有多快吧!→ https://shopify.supply

寫在最後

雖然是一篇介紹技術的文章,但更多也是為了讓更多人瞭解海外電商的趨勢。從技術視角去看,以為技術也是為了解決商業難題的。某個技術方向的出現,側面也反映了行業在面臨著怎樣的挑戰。

最後,希望「Make business more FUN」這顆種子可以在更多人的心裡萌芽。Respect!