Design Systems: Walking the Line Between Flexibility and Consistency

Walking the Line Between Flexibility and Consistency in Component Libraries

Siddharth Kshetrapal

Why Paid UI Components Aren’t Evil

Building a Custom Component Library – Fast

TJ VanToll

Introducing React View

Vojtech Miksu

Accessible Component System Through Customization

Maya Shavin

Maintaining a Component Library at Scale

Great Migrations: Upgrading a Component Library at Scale

Joran Quinten

Components, Patterns and sh*t it’s Hard to Deal with

Marco Cedaro

Taking Component Driven One Step Further

Debbie O'Brien

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

Thomas Findlay

Building Cross-Platform Component Libraries for Web and Native with React

Perttu Lähteenlahti

Tooling and Processes for Managing GraphQL at Scale

Mark Larah

Putting the Graph In GraphQL With The Neo4j GraphQL Library

William Lyon

Towards a Standard Library for JavaScript Runtimes

James Snell

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

My Accessibility Journey: the Quest for an Accessible Component Library

Asaf Shochet Avida

Developing and Driving Adoption of Component Libraries

Logan Ralston

Lachlan Bradford

6 Levels of Reusability

Michael Thiessen

Scalable Forms in Vue

Justin Schroeder

Building Pixel-Perfect UI Components Using CSS Variables

Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI

Sam Sycamore

Siriwat (Jun) Kunaporn

Off with Their Heads: Rise of the Headless Components

Omry Nachman

Game Development with ReactJS, CSS, and React Three Fiber

Jorge Rubiano

PrimeVue | The Next-Gen UI Component Library

Çağatay Çivici

Build Your Own Component Library, With `Shadcn-vue`

Zernonia Kong

Node Congress

Node Congress 2022

You can check the slides for James' talk <a href="https://drive.google.com/file/d/13gAh3Pw8u5fA2lIFwLoYuwB7hheBD67F/view?usp=sharing">here</a>. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Advanced

React Advanced Conference 2021

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue.js Live Conference

Vue.js Live 2024

Master the art of making your components highly reusable. The 6 Levels of Reusability show us how we can progressively make our components more and more reusable — as needed — and include powerful patterns and tools to help us reuse our code more easily.

Discover the art of creating scalable forms in Vue using FormKit — ideal for teams with complex form-heavy projects. This talk delves into strategies for decomposing forms into smaller, composable components, simplifying development, and enhancing team efficiency.

PrimeVue is a popular UI Component library for Vue 3 featuring over 80 components,  unstyled mode with Tailwind CSS presets, pass-through properties, design-agnostic theming, icons, blocks, and templates.PrimeVue is one of the most popular UI libraries in the Vue ecosystem. The talk begins with an overview of the feature set and dives into the detail for each of the content points below; - Overview- Best Practices of UI Component Development- Component Suite- Pass Through API- Design Agnostic Theming- Unstyled Mode- Tailwind CSS Presets- Icons/Blocks/Templates- Figma to Theme Generation- Roadmap

<div>In case you are unaware, shadcn (creator of `ui.shadcn`) created a new way for devs to build component libraries. Instead of a usual component library, where you are limited to the component styling, props, or events designed by the author, you now have the capability to modify the components to suit your needs.</div><div>Quote from the shadcn himself, "It's a collection of re-usable components that you can copy and paste into your apps."</div><div> </div><div>In this talk, I will be showcasing the power of this approach, walking through how to customize it, and why it has gained such a popularity in the recent months.</div>

JS GameDev Summit

JS GameDev Summit 2023

In this talk, I will share my experience in game development using ReactJS/CSS. We will explore how to make the most out of the component management provided by this library, along with the capabilities of CSS for creating an appealing user interface. Additionally, we will uncover how to leverage the React Three Fiber library to create games with a 3D experience.

React Summit

React Summit 2023

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.

CSS variables have become so sophisticated in recent years that they now enable us to do things that aren't possible with JavaScript. In this lightning talk, I'll explain how MUI's engineers are leveraging the power of CSS variables in our new React component library, Joy UI, to deliver components that automatically adapt their style and structure to the context in which they're rendered.

JS Nation

JSNation 2023

Most current UI libraries provide great user experience with a vast of components. But when it comes to heavy customization, and non-standard scenarios, especially for E-Commerce, they become hard to manage, scale or even slow down performance. How to create a UI library that provides users the most possible freedom in customizing components, while keeping our performance and scalability to the fullest? How much accessible we can provide out of the box to our users? How much customization freedom is enough? That's what my talk's about.

This talk is about an example approach on how to organise maintenance across multiple teams, where we talk about how we came to this plan at Jumbo and what benefits it brings to the Developer Experience while being able to continuously deliver features to our customers. We're dealing with maintenance, ownership, adding small features, upgrading from Vue2 to Vue3 and the culture that supports this way of working.

Vue.js London 2023

At Jumbo Tech Campus we have a distributed model when it comes to our component library. The way we work on our shared codebase has helped is in migrating from Vue2 to Vue3 with the combined efforts of the entire frontend capacity.

React Advanced Conference 2022

Creating web applications can be challenging. Creating accessible ones - even more so. However the real challenge lies in maintaining accessibility in your project since it requires knowledge and skills beyond those of traditional web development. To make this happen, one must choose the proper tools to keep the accessibility level high when code gets refactored, monitor the accessibility status and test it automatically during CI. To tackle these challenges, I’ll introduce a different approach that intertwines accessibility into the gut of the web application by creating an accessible React components library. I’ll discuss the principles, tools and techniques I use to test and maintain the accessibility level over time, and provide you with the initial recipe to drive the accessibility change in your organization.

What makes a component library good? In order to create a component library that people want to use you need to navigate tradeoffs between extensibility, ease of use, and design consistency. This talk will cover how to traverse these factors when building a component library in React, how to measure its success, and how to improve adoption rates.

React Summit 2022

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.

Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

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.

GraphQL Galaxy

GraphQL Galaxy 2021

GraphQL exposes application data as a graph which can introduce challenges if your backend isn't graph-ready (think slow JOINs as a result of nested GraphQL queries and the dreaded n+1 query problem). The Neo4j GraphQL library enables developers to build GraphQL APIs backed a native graph database using only GraphQL type definitions. In this talk we'll see how to build a GraphQL API without writing any resolvers, add custom logic, and deploy to the cloud. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

In this talk, we'll cover the libraries, tooling and processes we use to roll out GraphQL to hundreds of developers at Yelp. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React &amp; React Native in combination. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let's face it React is a way of building component driven applications. So technically we are all doing component driven development. But are we. Are our components really isolated, composed and tested in isolation or are they still coupled together just a little bit!! Let's take a look at how you can really be component driven so you can build, scale and reuse React components across all your React applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Everyone has a pattern library or dreams about having one. We went through conversations and the codification of our visual dictionary and then we ended up with a beautiful living document.But what happens when we need to re-use our components and they don’t fit in the design? How do we re-use our patterns in slightly different use cases?We have all the tech to make a front end really modular, we have techniques and methodologies which enabled us avoiding the bad parts of the languages we use. Every part of the puzzle seems to be falling in the right place.Yet, sometimes we are struggling in handling the variations of our patterns in a reliable and maintainable way. Our codebase is getting filled with exceptions and overrides and refactoring of base patterns becomes impossible.Not a recipe for success, more of a way to frame the problem, identify some ideas we tried and re-discuss the way we approach componentisation. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit 2020

So you built a component library. Congrats! I am sure it is awesome but did you put the same effort into its documentation? Component libraries tend to have giant APIs, dozens of components, hundreds of props and thousands of permutations. That is a lot of information to unpack. We could make the documentation very long or... super interactive. We combined component previews, API documentation, props editing and code editing into a single seamless experience. You can quickly explore various settings of each component while watching the code write itself. This talk will show you how to leverage common tools and concepts such as Prettier, babel and AST transformations to build the documentation that can literally work for you. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

In this talk I’m going to convince you that paid UI components will solve all your problems, and that you should immediately give me all of your money. Maybe. Or perhaps I’ll draw on my experience working both on free and open source tools (jQuery, jQuery UI, NativeScript), as well as paid tools (Kendo UI, KendoReact), and discuss which type of tool makes sense depending on your team and needs. In any case the talk will go fast because lightning is in the title. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

JSNation Live

JSNation Live 2021

If your company is anything like the ones I’ve worked for, you have apps with seven different button designs, three different datepickers, and a bizarre collection of dropdowns that may or may not be accessible. A growing trend to deal with this inconsistency is to build a custom design system or component library. Essentially, you build The One Way™ to create a datepicker for your organization, and ask that the rest of your company to conform to your new system. But building a component library comes with a lot of challenges, like, which frameworks or libraries should you use (if any)? How do you make sure your components are accessible? And how to you distribute your components so your whole company can use them? In this lightning talk you’ll learn how to build a component library fast building on top of a library like Kendo UI. You’ll learn tips &amp; tricks on how to get up and running, how to customize components, and how to distribute components throughout your organization. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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&amp;A

#component library