Off with Their Heads: Rise of the Headless Components

Rate this content
Bookmark

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.

Omry Nachman
Omry Nachman
25 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to Headless Components

Short description:

I'm Omri, the CTO for Kodaks, a Wix company. Today, I'll be discussing Headless Components, their importance, how to utilize them effectively, and popular options. We'll also share our experience at Kodaks. Components are efficient for app development, but there's a lot of work involved, especially for menus. Many of us use component libraries like Material UI and Ant Design to simplify the process.

I'm Omri, I'm the CTO for Kodaks. Kodaks is a Wix company building awesome tools for developers, and I'm going to be talking about Headless Components. What they are. Why you should care. How to best utilize them. We are going to go over some popular options and see it by example and of course I'm going to share our experience at Kodaks.

The reason I chose this topic is that I see a great opportunity here to exploit a gap in the market in a way that will help all of us. Shameless plug, Kodaks is out, it's free, it's an open beta since Christmas. You can follow along in the link in GitHub. If you're using desktop, it's an IDE, it's not really for phones. The way it works is you edit react components visually and in isolation and it's a great, very effective way to edit your components.

Components are great, that's why we all use them. But we get paid to build apps, right? Components are just a very efficient way of doing that. By the way, this is the only reference to AI, so my gift to you is like ten minutes without AI. Back to our app, we want to build something like a Google docs clone and there is a ton of work. In that work, there is this menu thing. It's a pretty basic menu. And if we're feeling very naive, we might say something like, how hard can it be, right? It's the HTML and CSS is trivial. It has open and closed states, a bunch of items. Items go click, the end. Except for some secondary behaviors like little things, like, you know, z-indexing, accessibility, resizing, pinching, scrolling, focus, keyboard navigation. Well, it's actually a lot of work. And this is not even stuff that's on the spec, right? This is just stuff we need to do to ship quality products. And I guess that's the reason many of us use component libraries. Either you build your own over the years, which you roll over from one project to the next. Or you use an open source or commercially available ones. We have Material UI, Ant Design. It's a big spectrum. Some of them are really good. They all have the same premise.

2. The Customizability Wall and Solving Problems

Short description:

Learners talk and you'll be able to develop good looking UI very quickly. But there is this problem with all of them, right? I call it the customizability wall. And here is the anatomy of the customizability wall. You promise your product manager a bespoke business logic accessible through a beautiful, unique design. And your design and your component library of choice are having a fight. So just by show of hands, we're here smashed into this customizability wall. And already we see that there is a problem. The data structure doesn't take an icon for the group, and we can see that indeed nothing changed. But for some reason, we can't add it to the group, and we're kind of stuck. Like, can we solve this problem? Of course, we can. We can reverse engineer and design.

Learners talk and you'll be able to develop good looking UI very quickly. And the good ones really do deliver on that performance. But there is this problem with all of them, right? I call it the customizability wall. And you smash into it pretty late in the project when you find that your table and your multi-select don't feel or don't look the same.

And here is the anatomy of the customizability wall. You promise your product manager a bespoke business logic accessible through a beautiful, unique design. And your design and your component library of choice are having a fight. And if you work like me, this is especially frustrating because you see it very late in the game because I like to build fast UI to kind of get the point of the business logic across to the client, do some iterations and then do the fit or finish only on the features that are actually going to be shipped.

So just by show of hands, we're here smashed into this customizability wall. All right. So for the lucky few that didn't raise your hand, let me show you an example. And I'm going to be using Codex to show the examples. So this is our IDE and this is the expected behavior. This menu is from AntDesign. It's a really good component library. It's highly customizable. And what we can see here is that the menu has a submenu and the items can be grouped. And my design calls for an icon in group A. We're going to just recycle this icon here. So let me grab it. And this is the data that generates the menu. I'm just going to copy and paste it. Beautiful. And already we see that there is a problem. The data structure doesn't take an icon for the group, and we can see that indeed nothing changed. Just to get the point across, I can add it to the actual subitems. Right? You can see the icon. But for some reason, we can't add it to the group, and we're kind of stuck. Like, can we solve this problem? Of course, we can. We can reverse engineer and design.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
You can check the slides for James' talk here.
Full-stack & typesafe React (+Native) apps with tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Top Content
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means. 2) staleTime is your best friend I've seen a bit of confusion about how to use React Query as a state manager, so I'll explain why setting staleTime is mostly all you need 3) parameters are dependencies This is important to understand to show the boundaries between client state and server state, and is essential when doing state management with React Query I will then end with a note on "separation of concerns" and about the tradeoffs of just calling `useQuery` wherever you need it in your component tree.
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Workshops on related topic

Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
React Summit 2023React Summit 2023
137 min
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
Top Content
WorkshopFree
Sam Sycamore
Siriwat (Jun) Kunaporn
2 authors
Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.
Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&A
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
Best Practices and Patterns for Managing API Requests and States
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
Node Congress 2022Node Congress 2022
134 min
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
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.