倍受期待的Shopify官方無頭框架Hydrogen更新啦！

2349 閱讀 0 評論 1 點贊

在 2021 Shopify Unite 大會上，我們分享了 Hydrogen —— 由 Shopify 官方推出的基于 React 的框架，用于打造自定義店面的無頭框架產品。我們相信未來的在線電商應該是迅捷響應、個性化且動態(tài)化的，而 Hydrogen 將幫助我們有效實現(xiàn)這一愿景。

Hydrogen 現(xiàn)已開放使用開發(fā)者預覽版。將快速啟動環(huán)境與 Shopify 為商業(yè)而優(yōu)化的一系列強大組件相融合，Hydrogen 將幫助您以前所未有的速度構建獨特的自定義店面。

與全球數百萬商家的合作經驗告訴我們，無論客戶身在何處，線上電商都需要個性化和場景式的快速用戶體驗。這對開發(fā)人員來說是一個巨大的挑戰(zhàn)，他們在不同的技術堆棧之間做出取舍，并在響應速度和動態(tài)體驗之間進行權衡。Hydrogen 將各種技術結合在一起，使您能夠在不放棄性能的情況下構建動態(tài)體驗，從而簡化了這一過程。

我們正在將 Hydrogen 打造成 Shopify 的一站式解決方案，將兼顧業(yè)務、用戶體驗和開發(fā)人員體驗發(fā)揮到極致，利用我們的技術和商業(yè)專業(yè)知識，為開發(fā)人員提供簡單、快速、高效的服務。Hydrogen 是完全開源的，我們希望與您一起構建它。

試用開發(fā)者預覽版

為未來商業(yè)賦能

Hydrogen 的構建模塊使您能夠提供出色的商業(yè)體驗。流式服務端渲染（SSR）的組合解鎖了快速的首次渲染，React 服務器組件提供高效渲染后的狀態(tài)更新，內置緩存和數據獲取策略使商家能夠在實現(xiàn)最佳商業(yè)決策和保持良好用戶體驗之間取得平衡。

提供這些功能需要突破 React 和 Vite 的可能性邊界，并不斷迭代更新構建優(yōu)化的組件和開發(fā)人員工具。我們一直在與 React 核心團隊和 Google 的 Aurora 團隊密切合作，以實現(xiàn)這一目標。我們期待看到開發(fā)者社區(qū)的各類反饋，以幫助我們進一步改進產品。

有關 Hydrogen 架構的更多詳細信息，請查看我們的開發(fā)人員文檔。

開發(fā)人員文檔

簡化繁瑣配置流暢的開發(fā)體驗

我們堅信開發(fā)是的一個充滿創(chuàng)造力的、有趣的過程。通過使用 Hydrogen，您可以直接從設計環(huán)節(jié)進入快速構建環(huán)境，而無需花費時間在腳手架或配置上。

Hydrogen 包含一個入門模板，可讓您的店鋪在幾分鐘內實現(xiàn)一個隨即可用的完整在線商店功能。此模板初始化了一個與 Shopify 商店集成的項目的基本文件結構，因此您可以跳過設置，立即開始編碼。

Hydrogen 利用圍繞 Shopify 數據模型構建的即用型組件、鉤子和實用程序加速了開發(fā)過程，這些模型完成了大部分繁重的工作。這些部件直接與 Storefront API 集成以實現(xiàn)高效的數據獲取，節(jié)省了制作 GraphQL 查詢以與 Shopify API 或其他第三方數據源交互的時間。

組件的完全自定義，以及店面的外觀設計和使用感受是我們的Saas服務脫穎而出的基礎，這就是 Hydrogen 還使用 Tailwind CSS 來簡化和加速樣式化的原因。

在開發(fā)者使用過程中，由 Vite 提供支持的開發(fā)環(huán)境支持快速反饋循環(huán)、構建和模塊管理以及熱重載，這為開發(fā)人員提供了流暢的開發(fā)體驗。

幫助我們一起構建 Hydrogen

Hydrogen 開源的原因是：我們認同開放的互聯(lián)網精神，希望您能一同參與產品構建。您對架構、API 設計和開發(fā)使用體驗的反饋將幫助我們塑造產品框架和更新開發(fā)工具。在接下來的幾個月里，我們將繼續(xù)快速迭代，根據您的反饋持續(xù)改進 Hydrogen，并準備好為下一代在線商店的搭建全面賦能。

請參考以下入門指南：