在 2021 Shopify Unite 大會(huì)上,我們分享了 Hydrogen —— 由 Shopify 官方推出的基于 React 的框架,用于打造自定義店面的無(wú)頭框架產(chǎn)品。我們相信未來(lái)的在線電商應(yīng)該是迅捷響應(yīng)、個(gè)性化且動(dòng)態(tài)化的, 而 Hydrogen 將幫助我們有效實(shí)現(xiàn)這一愿景。
Hydrogen 現(xiàn)已開放使用開發(fā)者預(yù)覽版。將快速啟動(dòng)環(huán)境與 Shopify 為商業(yè)而優(yōu)化的一系列強(qiáng)大組件相融合,Hydrogen 將幫助您以前所未有的速度構(gòu)建獨(dú)特的自定義店面。
與全球數(shù)百萬(wàn)商家的合作經(jīng)驗(yàn)告訴我們,無(wú)論客戶身在何處,線上電商都需要個(gè)性化和場(chǎng)景式的快速用戶體驗(yàn)。這對(duì)開發(fā)人員來(lái)說(shuō)是一個(gè)巨大的挑戰(zhàn),他們?cè)诓煌募夹g(shù)堆棧之間做出取舍,并在響應(yīng)速度和動(dòng)態(tài)體驗(yàn)之間進(jìn)行權(quán)衡。Hydrogen 將各種技術(shù)結(jié)合在一起,使您能夠在不放棄性能的情況下構(gòu)建動(dòng)態(tài)體驗(yàn),從而簡(jiǎn)化了這一過(guò)程。
我們正在將 Hydrogen 打造成 Shopify 的一站式解決方案,將兼顧業(yè)務(wù)、用戶體驗(yàn)和開發(fā)人員體驗(yàn)發(fā)揮到極致,利用我們的技術(shù)和商業(yè)專業(yè)知識(shí),為開發(fā)人員提供簡(jiǎn)單、快速、高效的服務(wù)。Hydrogen 是完全開源的,我們希望與您一起構(gòu)建它。

為未來(lái)商業(yè)賦能
Hydrogen 的構(gòu)建模塊使您能夠提供出色的商業(yè)體驗(yàn)。流式服務(wù)端渲染 (SSR)的組合解鎖了快速的首次渲染,React 服務(wù)器組件提供高效渲染后的狀態(tài)更新,內(nèi)置緩存和數(shù)據(jù)獲取策略使商家能夠在實(shí)現(xiàn)最佳商業(yè)決策和保持良好用戶體驗(yàn)之間取得平衡。
提供這些功能需要突破 React 和 Vite 的可能性邊界,并不斷迭代更新構(gòu)建優(yōu)化的組件和開發(fā)人員工具。我們一直在與 React 核心團(tuán)隊(duì)和 Google 的 Aurora 團(tuán)隊(duì)密切合作,以實(shí)現(xiàn)這一目標(biāo)。我們期待看到開發(fā)者社區(qū)的各類反饋,以幫助我們進(jìn)一步改進(jìn)產(chǎn)品。
有關(guān) Hydrogen 架構(gòu)的更多詳細(xì)信息,請(qǐng)查看我們的開發(fā)人員文檔。
簡(jiǎn)化繁瑣配置 流暢的開發(fā)體驗(yàn)
我們堅(jiān)信開發(fā)是的一個(gè)充滿創(chuàng)造力的、有趣的過(guò)程。通過(guò)使用 Hydrogen,您可以直接從設(shè)計(jì)環(huán)節(jié)進(jìn)入快速構(gòu)建環(huán)境,而無(wú)需花費(fèi)時(shí)間在腳手架或配置上。
Hydrogen 包含一個(gè)入門模板,可讓您的店鋪在幾分鐘內(nèi)實(shí)現(xiàn)一個(gè)隨即可用的完整在線商店功能。此模板初始化了一個(gè)與 Shopify 商店集成的項(xiàng)目的基本文件結(jié)構(gòu),因此您可以跳過(guò)設(shè)置,立即開始編碼。
Hydrogen 利用圍繞 Shopify 數(shù)據(jù)模型構(gòu)建的即用型組件、鉤子和實(shí)用程序加速了開發(fā)過(guò)程,這些模型完成了大部分繁重的工作。這些部件直接與 Storefront API 集成以實(shí)現(xiàn)高效的數(shù)據(jù)獲取,節(jié)省了制作 GraphQL 查詢以與 Shopify API 或其他第三方數(shù)據(jù)源交互的時(shí)間。
組件的完全自定義,以及店面的外觀設(shè)計(jì)和使用感受是我們的Saas服務(wù)脫穎而出的基礎(chǔ),這就是 Hydrogen 還使用 Tailwind CSS 來(lái)簡(jiǎn)化和加速樣式化的原因。
在開發(fā)者使用過(guò)程中,由 Vite 提供支持的開發(fā)環(huán)境支持快速反饋循環(huán)、構(gòu)建和模塊管理以及熱重載,這為開發(fā)人員提供了流暢的開發(fā)體驗(yàn)。
幫助我們一起構(gòu)建 Hydrogen
Hydrogen 開源的原因是:我們認(rèn)同開放的互聯(lián)網(wǎng)精神,希望您能一同參與產(chǎn)品構(gòu)建。您對(duì)架構(gòu)、API 設(shè)計(jì)和開發(fā)使用體驗(yàn)的反饋將幫助我們塑造產(chǎn)品框架和更新開發(fā)工具。在接下來(lái)的幾個(gè)月里,我們將繼續(xù)快速迭代,根據(jù)您的反饋持續(xù)改進(jìn) Hydrogen,并準(zhǔn)備好為下一代在線商店的搭建全面賦能。
請(qǐng)參考以下入門指南:
- 一鍵探索 Hydrogen

- Hydrogen 開發(fā)自定義店面使用教程

- 加入 Github 上的 Hydrogen 社區(qū),并在 repo 里分享您的反饋

- 填寫一個(gè)簡(jiǎn)短的調(diào)查來(lái)幫助我們了解您的體驗(yàn)

- 注冊(cè)下一屆合作伙伴全員大會(huì),這次由 Hydrogen 全面掌管!通過(guò)產(chǎn)品和工程團(tuán)隊(duì)了解最新情況,現(xiàn)場(chǎng)提交問(wèn)題,并查看 Hydrogen 演示
通過(guò) Shopify 合作伙伴計(jì)劃推動(dòng)業(yè)務(wù)增長(zhǎng)
無(wú)論您是提供網(wǎng)頁(yè)設(shè)計(jì)及開發(fā)服務(wù),還是希望為 Shopify 應(yīng)用商店構(gòu)建應(yīng)用程序,Shopify 合作伙伴計(jì)劃都會(huì)為您的成功奠定基礎(chǔ)。免費(fèi)加入并獲取收入分成機(jī)會(huì)、開發(fā)人員預(yù)覽環(huán)境和教育資源。
現(xiàn)在就來(lái)加入我們,注冊(cè)成為合作伙伴,成為下一個(gè)電商專家!
文章為作者獨(dú)立觀點(diǎn),不代表DLZ123立場(chǎng)。如有侵權(quán),請(qǐng)聯(lián)系我們。( 版權(quán)為作者所有,如需轉(zhuǎn)載,請(qǐng)聯(lián)系作者 )

網(wǎng)站運(yùn)營(yíng)至今,離不開小伙伴們的支持。 為了給小伙伴們提供一個(gè)互相交流的平臺(tái)和資源的對(duì)接,特地開通了獨(dú)立站交流群。
群里有不少運(yùn)營(yíng)大神,不時(shí)會(huì)分享一些運(yùn)營(yíng)技巧,更有一些資源收藏愛好者不時(shí)分享一些優(yōu)質(zhì)的學(xué)習(xí)資料。
現(xiàn)在可以掃碼進(jìn)群,備注【加群】。 ( 群完全免費(fèi),不廣告不賣課!)