Shopify Hydrogen,快速打造自定义电商网店

Shopify Unite大会上,我们分享了Hydrogen——由Shopify官方推出的基于React的框架,用于打造自定义店面的无头框架产品。未来的在线电商应该是迅捷响应、个性化且动态化的, 而Hydrogen将帮助我们有效实现这一愿景。

Hydrogen现已开放使用开发者预览版,具有快速启动环境,与Shopify为一系列商业优化强大组件相融合。你能以前所未有的速度构建独特的自定义电商店面。

与全球数百万商家的合作经验告诉我们,无论客户身在何处,线上电商都需要个性化和场景式的快速用户体验。这对开发人员来说是一个巨大的挑战,他们在不同的技术堆栈之间做出取舍,并在响应速度和动态体验之间进行权衡。Hydrogen将各种技术结合在一起,能在不放弃性能的情况下构建动态体验,从而简化了这一过程。

我们正将Hydrogen打造成Shopify的一站式解决方案:兼顾业务和用户体验,并将开发人员体验发挥到极致。利用我们的技术和商业专业知识,为开发人员提供简单、快速、高效的服务。Hydrogen是完全开源的,我们希望与你一起构建它。

试用开发者预览版

开发者预览版

为未来商业赋能

Hydrogen 的构建模块使您能够提供出色的商业体验。流式服务端渲染 (SSR)的组合解锁了快速的首次渲染,React 服务器组件提供高效渲染后的状态更新,内置缓存和数据获取策略使商家能够在实现最佳商业决策和保持良好用户体验之间取得平衡。

提供这些功能需要突破React和Vite的可能性边界,并不断迭代更新构建优化的组件和开发人员工具。我们一直在与React核心团队和Google的Aurora团队密切合作,以实现这一目标。我们期待看到开发者社区的各类反馈,以帮助我们进一步改进产品。

有关 Hydrogen 架构的更多详细信息,请查看我们的开发人员文档

开发人员文档

开发人员文档

简化繁琐配置 流畅开发体验

我们坚信开发是的一个充满创造力的、有趣的过程。通过使用Hydrogen,你可以直接从设计环节进入快速构建环境,而无需花费时间在脚手架或配置上。

Hydrogen包含一个入门模板,可让您的店铺在几分钟内实现一个随即可用的完整在线商店功能。此模板初始化了一个与 Shopify 商店集成的项目的基本文件结构,因此您可以跳过设置,立即开始编码。

Hydrogen利用围绕Shopify数据模型构建的即用型组件、钩子和实用程序加速了开发过程,这些模型完成了大部分繁重的工作。这些部件直接与 Storefront API 集成以实现高效的数据获取,节省了制作GraphQL查询以与Shopify API或其他第三方数据源交互的时间。

组件的完全自定义,以及店面的外观设计和使用感受是我们的Saas服务脱颖而出的基础,这就是 Hydrogen还使用 Tailwind CSS 来简化和加速样式化的原因。

在开发者使用过程中,由Vite提供支持的开发环境支持快速反馈循环、构建和模块管理以及热重载,这为开发人员提供了流畅的开发体验。

帮助我们一起构建Hydrogen

Hydrogen 开源的原因是:我们认同开放的互联网精神,希望你能一同参与产品构建。你对架构、API 设计和开发使用体验的反馈将帮助我们塑造产品框架和更新开发工具。在接下来的几个月里,我们将继续快速迭代,根据你的反馈持续改进 Hydrogen,并准备好为下一代在线商店的搭建全面赋能。

请参考以下入门指南: 

一键探索 Hydrogen
  • Hydrogen开发自定义店面使用教程 
Hydrogen 开发自定义店面使用教程
      Github 上的 Hydrogen 社区
        填写一个简短的调查来帮助我们了解您的体验

           注册下一届合作伙伴全员大会

          通过Shopify合作伙伴计划推动业务增长

          无论你是提供网页设计及开发服务,还是希望为Shopify应用商店构建应用程序,Shopify合作伙伴计划都会为你的成功奠定基础。免费加入并获取收入分成机会、开发人员预览环境和教育资源。

          现在就来加入我们,注册成为合作伙伴,成为下一个电商专家

          注册成为合作伙伴

          Shopify Hydrogen常见问题

          什么是Shopify Hydrogen?

          Shopify Hydrogen是由Shopify推出的React框架工具,它包含一个入门模板,可在几分钟内搭建一个完整在线商店,并具有个性化的高性能响应式功能。它的预置组件涵盖就基本电商功能,能和第三方应用集成;并具有高定制性,开发人员可根据品牌特色创建独特的网站体验。

          Shopify Hydrogen有什么特点?

          • 使用映射到 Storefront 和客户帐户 API 资源的商业组件
          • 利用集成开发环境内的lint工具、TypeScript和IntelliSense支持进行高效搭建
          • 边缘渲染,以获得更快的性能、灵活的缓存和内置的SEO
          • 集成第三方应用程序,使用任何React框架构建,并可在任何地方托管
          • 通过Shopify的全球分布式托管层Oxygen,提供推送部署支持

          Shopify Hydrogen有中文界面吗?

          Shopify Hydrogen有中文的简体和繁体界面。