React Summit US

React Summit US 2023

Today's Talk is about Shopify Hydrogen and how it simplifies the development of headless Shopify stores. The Talk covers topics such as mixing Storyblok and CMS data, code and data manipulation in Hydrogen, creating products and collections, handling SEO, building a performance server-side cart, setting up and managing the cart, and displaying cart and raffle information.

Ready to take a thrilling ride into the world of headless e-commerce with Shopify Hydrogen? This cutting-edge solution, built on top of Remix, is the latest and greatest way to build high-performance online store. E-commerce is more important than ever, and providing a seamless customer experience is key. But building a platform that delivers can be daunting, even for experienced developers. With Hydrogen, you'll not only find it easier to build a top-of-the-line online store, but you'll also discover how much fun it can be! From creating collections and products to implementing a shopping cart, we'll show you how Hydrogen can take your developer experience to the next level.

Lightning Fast E-Commerce: Remix your Shop with Shopify Hydrogen

Alexandra Spalato

React Summit

React Summit 2023

Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.

Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components. We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.

Off with Their Heads: Rise of the Headless Components

Omry Nachman

Node Congress

Node Congress 2022

The Workshop covers the use of PlatformSH and Strapi for building and deploying decoupled applications. It explores setting up projects, configuring databases, middleware, and plugins. The workshop also covers building and deploying the application, syncing data, and exploring the site. It highlights the benefits of PlatformSH, such as isolated development environments and easy deployment of multi-app architectures. The workshop concludes with a discussion on handling drafts and implementing live previews.

Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly. Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site. Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Deploying a decoupled restaurant review site to production with Strapi and Platform.sh

Shedrack Akintayo

Chad Carlson

GraphQL Galaxy

GraphQL Galaxy 2021

WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.

Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance. With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web. <a href="https://www.colfayock.com/event-notes/graphql-galaxy-2021" target="_blank">Slides &amp; more</a> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Exploring the WordPress Graph with Next.js & WPGraphQL

Colby Fayock

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

You might have heard about Headless CMS. This new type of content platform gives us some benefits compared to a Monolithic CMS.We will talk about the key features of any Headless CMS and how we can integrate a headless platform into our React applications. We will focus on Storyblok, a headless CMS that offers a real-time Visual , a great feature for developers and content creators. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to View and React without a Head

Facundo Giuliani

JSNation Live

JSNation Live 2020

Frontity is a framework that combines WordPress and React to create modern user experiences. It is easy to use, SEO-friendly, and extensible. The framework has achieved great results for publishers, increasing page views, organic traffic, and user acquisition. Frontity Pro has served millions of page views worldwide and provides a seamless content management experience. Visit frontity.org to learn more and join the community.

In this talk, Pablo Postigo, co-Founder and CEO of Frontity, will give an introduction to the basics of Frontity Framework and talk about the main challenges when developing a React front-end for a headless WordPress site. In addition, he will share his insight on the future of JavaScript in the WordPress ecosystem and the story behind Frontity. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building React frontends for WordPress

Pablo Postigo

JSNation Live 2021

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>

Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer

Fabrizio Picca

React Summit Remote Edition

React Summit Remote Edition 2021

WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Scaling WordPress with Next.js

Headless CMSs offer freedom of choice in front-end frameworks and backend APIs, focusing on user experience and integration with third-party solutions. They provide a good developer experience and are an important part of the web ecosystem. A headless CMS allows project structuring, technology/API selection, and UI extension. Consider features like translation, workflow setup, content scheduling, editing experience, and integration capabilities when choosing a CMS.

Fabulous secret powers were revealed to me the day I discovered Jamstack and said "By the power of Headless, I have the power!" Find out the key features of any CMS and why the headless is the new buzzword, which everybody wants to use. I will take you on the journey through the land of headless CMS and show you why you should consider headless CMS for your next project. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

By the Power of Headless!

Samuel Snopko

This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.

When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#headless