在 2021 Shopify Unite 大会上,我们分享了 Hydrogen —— 由 Shopify 官方推出的基于 React 的框架,用于打造自定义店面的无头框架产品。我们相信未来的在线电商应该是迅捷响应、个性化且动态化的, 而 Hydrogen 将帮助我们有效实现这一愿景。
Hydrogen 现已开放使用开发者预览版。将快速启动环境与 Shopify 为商业而优化的一系列强大组件相融合,Hydrogen 将帮助您以前所未有的速度构建独特的自定义店面。
与全球数百万商家的合作经验告诉我们,无论客户身在何处,线上电商都需要个性化和场景式的快速用户体验。这对开发人员来说是一个巨大的挑战,他们在不同的技术堆栈之间做出取舍,并在响应速度和动态体验之间进行权衡。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 开发自定义店面使用教程
- 加入 Github 上的 Hydrogen 社区,并在 repo 里分享您的反馈
- 填写一个简短的调查来帮助我们了解您的体验
- 注册下一届合作伙伴全员大会,这次由 Hydrogen 全面掌管!通过产品和工程团队了解最新情况,现场提交问题,并查看 Hydrogen 演示
通过 Shopify 合作伙伴计划推动业务增长
无论您是提供网页设计及开发服务,还是希望为 Shopify 应用商店构建应用程序,Shopify 合作伙伴计划都会为您的成功奠定基础。免费加入并获取收入分成机会、开发人员预览环境和教育资源。
现在就来加入我们,注册成为合作伙伴,成为下一个电商专家!