React Advanced

React Advanced 2023

The Workshop covered various topics including building a homepage with Hydrogen and Storyblok, querying data using storefront.query and storefront.mutate, building collection indexes and details, adding items to the cart and displaying cart data, connecting Storyblok and adding a development server, setting up environments and creating page routes, using Storyblok and creating page components, personalizing the homepage based on user behavior, integrating Storyblok with Shopify components, and closing remarks.

I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation

Building High-Performance Online Stores with Shopify Hydrogen and Remix

Alexandra Spalato

React Summit

React Summit 2023

React Bricks is a CMS with visual editing based on React components that allows for visually editable content blocks called Brics. It offers flexibility for various media types and supports features like side edit props, validation, and collaboration. React Bricks also provides advanced features like data bindings, custom page types, and the ability to consume external data. It is compatible with any framework, offers enterprise-level features, and has future developments in progress.

- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

Matteo Frana

Remix Conf Europe

Remix Conf Europe 2022

Today's Talk discusses the new frontier of e-commerce at the edge, focusing on headless commerce and the benefits it offers. The edge, an intermediate server, can improve website loading by rendering HTML on the server and reducing latency. Venger, an open-source headless e-commerce framework, is introduced as a solution to cache API responses at the edge and improve performance. The Venger online shop demonstrates excellent performance, highlighting the benefits of headless and edge computing in e-commerce.

In this talk I'll explore the evolution of e-commerce infrastructure from traditional co-located servers to the new frontier of serverless and edge computing, and how modern developer tools like Remix and Vendure fit in.

The New Frontier: E-Commerce at the Edge 

Michael Bromley

React Advanced 2022

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 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 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>

Build a Custom Storefront on Shopify with Hydrogen

Matt Seccafien

Cathryn Griffiths

Vue.js Live Conference

Vue.js London Live 2021

This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.

Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Storefront + Vendure = Fullstack Open Source Ecommerce

Jakub Andrzejewski

React Finland

React Finland 2021

How Contentful helps you to manage all the data in a headless e-commerce website.

Contentful and headless

Nidhi Kumari

JSNation Live

JSNation Live 2021

The Workshop on JAMstack e-commerce introduces the concept of JAMstack and headless commerce, highlighting their benefits in enhancing the shopping experience. The workshop covers the process of building a static products page using the headless commerce architecture and Commerce Layer. It also explores configuring the application, adding product details and variants, and working with the UI. Troubleshooting authentication issues and the process of creating orders are also addressed. The workshop concludes by emphasizing the advantages of the headless commerce architecture and providing additional resources for building storefronts.

Digital commerce has changed, and there is an increasing demand for faster and kite efficient solutions. In this workshop, you'll learn about the evolution of ecommerce and how Jamstack and headless commerce evolves shopping experiences on the web. We will explore the basics of headless commerce building a minimal Jamstack ecommerce product page with static content, HTML5, CSS, and Javascript. Finally, we will integrate Commerce Layer for headless commerce capabilities and deploy our application to Netlify. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Jamstack eCommerce 101

Bolaji Ayodeji

React Summit Remote Edition

React Summit Remote Edition 2021

This workshop focuses on launching an e-commerce experience on Next.js and Netlify, using the useShoppingCart library for shopping cart functionality. The workshop covers project setup, dynamic routes, integration with Stripe, Netlify functions, and authentication. It also explores theme UI, Netlify features, and Netlify forms. The presenter mentions the availability of a Gatsby version of the workshop and highlights Next.js Commerce as a template for integrating with popular e-commerce tools. Overall, the workshop provides a comprehensive overview of building an e-commerce site using Next.js and Netlify.

Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

E-commerce on the Jamstack with NextJS and Netlify

Nick DeJesus

Jennifer Grey and Hanna Chen, front-end developers at Shopify, hosted a React pre-conference workshop on building a Shopify app with React and Node. The workshop covered creating a basic app in Shopify, using React components designed by Shopify, and accessing store data. They also discussed using the Shopify app CLI, harnessing the power of Polaris for an integrated UI experience, and using AppBridge for communication. Overall, participants learned how to build a Shopify app and enhance it with functionalities using AppBridge and Polaris.

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Shopify App with React & Node

Jennifer Gray

Hanna Chen

Welcome to the workshop on faster media and faster websites. We will cover core web vitals, tools for measurement, and web performance best practices. Optimizing asset delivery, utilizing CDNs, and resizing assets to the exact size are key considerations. Cloudinary provides techniques for media optimization, treating media as code, and using delivery URLs with transformations. Image optimization for retina displays and commercial use cases are also discussed.

As eCommerce all around the world has shifted to a predominantly online-first platform the need to provide a high performance website to your users has significantly increased. And on top of that, google has announced that as of May 2021 Core Web Vitals will have a direct impact on page rankings and SEO making web performance even more significant. Come learn the basics of web performance and how it relates to media. Using a simple React based ecommerce app in conjunction with a media optimizing product, you can learn how to deliver the optimal format and fidelity, potentially improving your page rankings. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Faster media = faster websites

Marissa Masangcay

Pramod Shenoy

Akshay Ranganath

Commerce Layer is an Atlas Commerce platform that provides global shopping capabilities. It offers a range of endpoints for managing various aspects of e-commerce. Modular architecture, like the one used by Commerce Layer, offers benefits such as flexibility, scalability, security, omnichannel capabilities, and future-proofing.

In this lighting talk Fabrizio will go through the main highlights of CommerceLayer, comparing the headless approach to the traditional "monolithic" ecommerce platforms. We will speak about security, performances and scalability. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#e-commerce