React Advanced

React Advanced 2022

Hydrogen and server components are being used by big merchants in production sites to build headless storefronts quickly. React 18 introduces server components that allow for interactive rendering without adding anything to the bundle. However, not all libraries are compatible and data fetching can slow down the site, but React provides suspense to handle heavy components. Server components offer great encapsulation and fast rendering via HTML, and the future of headless is promising with technologies like Edgeworkers and hosting platforms like Oxygen. Shopify is hiring and offers a demo shop with server components at addogen.new.

Shopify's Hydrogen framework has been released with an early version of React's server components. In this talk I will discuss: * What is Hydrogen? * What are server component and how are we using them? * How are they different than client and shared components? * How are server side rendering and server components different? * I'll also show examples in the wild After the talk I hope the attendees will understand the Hydrogen framework and React server components better.

Hydrogen: An Early Look at Server Components in the Wild

Daniel Rios Pavia

Hydrogen is Shopify's opinionated way of building a custom storefront, providing a great developer experience and fast site performance. It uses React server components for rendering and comes with built-in components and tools. The workshop covered file-based routing, querying with GraphQL, building a product display page, adding cart functionality, and rendering cart data. Hydrogen allows for quick app setup, easy customization, and no development maintenance, making it an efficient tool for building custom storefronts.

Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image &amp; description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.

Build a Product Page with Shopify’s Hydrogen Framework

David Witt

React Summit

React Summit 2022

This workshop introduces Shopify's Hydrogen, a React-based framework for building headless storefronts. Hydrogen offers fast client-side rendering, flexible caching, and a simplified development process. It uses file-based routing and allows for dynamic routes. The workshop covers querying the Storefront API with GraphiQL, using GraphQL queries in Hydrogen, and accessing product details. It also demonstrates the use of the product options provider, the cart provider, and the add to cart button. Hydrogen is recommended for larger merchants and provides scalability and flexibility for building e-commerce stores.

Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.

Building custom storefronts on Shopify with Hydrogen

Abe Haskins

Megan Majewski

React Advanced 2021

Hydrogen is an opinionated React framework and SDK for building fast and dynamic Shopify-powered custom storefronts. With Hydrogen, developers can leverage compilers to easily compose common operations and improve developer experience. The framework focuses on image performance, request caching, server-side rendering, and React server components. It also provides auditing for accessibility, security, web vitals, and framework violations. The Hydrogen CLI offers a powerful and fun developer experience for bootstrapping, enforcing best practices, ongoing maintenance, and testing.

Call it "kickstarting", "scaffolding", "bootstrapping" or simply "typing words in a terminal and getting files to start with", this is often the first opportunity for a framework to either delight or disappoint developers. How easily can they get up and running, can they extend it with their ideal toolchain and how well will it scale? In this talk we'll explore the limitations of current solutions and examine the ways we set out to improve the developer onboarding experience of Shopify's new Hydrogen React framework and SDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Forest for the (Abstract Syntax) Trees

Matt Seccafien

Hydrogen is a web development framework optimized for building custom storefronts powered by Shopify. It provides a collection of components, hooks, and utilities that handle heavy lifting and allow for highly customizable storefronts. Hydrogen components are headless and provide sensible defaults. The workshop covers topics such as querying for product data, building product pages, and customizing elements using Render Props. It also explores cart functionality and the ability to generate custom responses, such as PDF catalogs.

Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#hydrogen