React Advanced

React Advanced 2021

The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.

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>

Design Systems: Walking the Line Between Flexibility and Consistency

Siddharth Kshetrapal

React Summit US

React Summit US 2025

Matt Sikathian emphasizes the importance of supporting right-to-left layouts in web development and the challenges faced in implementing Arabic scripts effectively. Adapting UI to right-to-left reading aligns with users' cognitive patterns, with CSS advancements showing promise in meeting diverse language needs. The unique considerations of Arabic script in UI design, technical adjustments necessary for Arabic typography, and handling bi-directional layout challenges using direction-agnostic approaches are discussed. The talk also covers enhancing React for logical CSS properties, building UI tools with icon mirroring, and streamlining icon management and automation for improved developer workflow.

When DeepL added Arabic—its first RTL language—it wasn’t just a styling problem, it was a design systems challenge. This talk will go deep on logical CSS, platform-agnostic icon mirroring and automation, soft enforcement strategies for design consistency, and how to wield influence across hundreds of engineers with minimal headcount. This isn’t a story about building components—it’s about wiring them together at scale, with smart defaults, localization and directional and empathy.

Design Systems and UI in a Bi-directional World

Matt Seccafien

TechLead Conference

TechLead Conference 2025: AI in Orgs

Workshop Event: Genetic AI Chaos to Clarity. Staff Software Engineer Expert in Agentic AI Microservices. Evolution from Monolith to Microservices Challenges. Layering AI Agents on Microservices Challenges. AI Agents Evolution and Determinism Challenges. Challenges of AI Agents in Industry Adoption. Setting Boundaries for AI Agents. Setting Boundaries and Policies for AI Agents. Setting Boundaries and Instructions for LLMs. Memory Management and Policy Guidance for LLMs. Guidance for Autonomous Agents and Data Management. Solving API Caching Issues with Autonomous Agents. Challenges in AI Agents' Failure Scenarios. Addressing Incident Response and Boundary Patterns. Establishing Boundaries and Fallback Mechanisms. Designing Agent Governance and Orchestrator. Governance for AI Agent Boundaries. Company Use Cases and Automation Initiatives. AI Tools Implementation for Workflow Automation.

Overview:        AI adoption brings system complexity, especially when autonomy, orchestration, and cloud-native microservices collide. Based on my published research and enterprise experience, this workshop breaks down the complexity of deploying agentic systems responsibly. This workshop is aimed at senior engineers who are navigating cloud-native architectures while introducing autonomous AI components, without a clear blueprint.Contents:1. The New Complexity Stack    a) Microservices, AI, and third-party code generators    b) Where system chaos starts and why it escalates 2. Understanding Agentic AI Behavior    a) Autonomy, memory, and hallucination risk    b) Real-world examples from financial decision support 3. Design Patterns for Clarity    a) Guardrails for system observability    b) Tradeoffs: orchestration vs code generation 4. Scalability Without Burnout    a) What senior engineers must lead: governance, ethics, reliability     b) Designing systems that scale safely under load 5. Takeaways    a) Agentic adoption roadmap    b) How to test and monitor non-deterministic AI    c) Alignment with team velocity and business outcomes

From Chaos to Clarity: Managing Agentic System Complexity in Cloud-Native FinTech

Sibasis Padhi

React Day Berlin

React Day Berlin 2024

Thank you all for welcoming me here. I am giving a remote talk on testing. The community here is warm and amazing. I hope Marin does well and we hope to see him soon. Six years ago, I joined a big tech company working on improving UX and UI. We released the UX improvement to 60 million users, but overlooked leveraging the design system. Recognizing the importance of the design system, I reached out to the design system manager to address the issue. I proposed solving meeting fatigue and defined my role as an internal developer advocate. Challenges in shipping code for developers and building credibility were discussed. The importance of fostering open communication, supporting users, and expanding workshops was emphasized. Continuing conversations through office hours and release demos improved adoption. Streamlining code updates and celebrating advocacy were key strategies. The speaker now runs a developer tools company called Tool Space.

How does a design system win over product developers and designers? Everyone wants to ship new features, but they don't know why they should adopt your components and follow your guidelines. Let’s solve this, and turn apathy into excitement. We’ll explore the many ways to attract attention to your design system, elevate its place in your product, and build a thriving community around your work.

What Makes a Design System Win

Will Klein

React Summit US 2024

Welcome to Beyond 1.0, a talk about scaling and maintaining design systems. A design system is a collection of reusable components, principles, constraints, and best practices governed by clear standards. We have expanded our design system over six and a half years to include over 70 components and support over 50 developers. To maintain a maintainable code base for your design system, enforce a singular code style across your entire code base through a linter. Use Next.js for a comprehensive and custom design system documentation site built with Markdown. We've improved our design system documentation by using react.gen typescript to dynamically parse out component props, allowing for more interactive and maintainable documentation.

Yay you just launched v1.0 of your design system but now what? Launching a design system can seem like an easy task but maintaining it is what will get you. In this talk we'll discuss how your design system should mature with your company by building an extensible documentation site, thinking beyond the code, collecting component usage statistics, and much more!

Beyond 1.0 - Lessons Learned and Things to Do After 1.0 Release of a Design System

Ameer Sami

JSNation US

JSNation US 2024

In this talk, the speaker introduces web workers and discusses how they can handle large processing on the client side. Examples, benchmarks, and tradeoffs are provided. The benefits of using web workers are discussed, and a demo project using VanillaJS and the live server extension of VS Code is showcased. The speaker demonstrates how to use web workers to prevent the main thread from getting blocked during large operations. The process of creating a web worker file and moving functions to it is explained. The speaker also shows how to handle messages and perform operations with web workers. The final remarks include contact information and an invitation to check out the speaker's YouTube channel for React courses and articles.

In this talk I will bring an overview how we handle with large process on Client Side (WebApp Applications)  using Web Api called Web Worker. I'm going to bring a view of a use case that I had to apply web workers and the advantages it brought in heavy processing, called “Rinha Front end” on Brazil, an challenge where we had to process Json files of various sizes just using the client side and without affecting the user experience and blocking the use of the application. So I this talk I will bring a simple case where using pure Javascript and how to use Web Workers to process out of the main thread and block our interactions with the page.  We will create a simple application using vanilla JS and I will introduce you this feature.

Web Workers: Handling Heavy Processing on the Client Side

Kevin Uehara

In this talk, you'll learn about the problem with internationalizing software and how the Lake Exchange Control System solves it. Internationalizing software involves adapting it for different markets and demographics, which includes design, translations, and currencies. The goal is to enable any software company to go global in a day. The challenge lies in the coordination required among developers, designers, translators, and other stakeholders. The current process involves a complex pipeline and manual processes for translation hand-off. The key to solving this challenge is an interoperable file format and a change control system called Lix, which allows for collaboration and automation. Lix will have a public pre-release on December 16th, followed by the .inlang file specification in Q1 2025.

Every developer knows that i18n is painful. We found the curing pill in the form of version control.  We'll talk about:  - what's the *actual* problem with i18n? - how to solve the orchestration problem? - demo e2e collabroation between devs, designers, and translators

inlang - Using Version Control to Solve i18n

Samuel Stroschein

Hello and welcome to this talk about scaling accessibility. The web was created with accessibility in mind, we just need to utilize it to create accessible web applications. Digital accessibility is about creating applications that are accessible for everyone, regardless of disability. WCAG stands for Web Content Accessibility Guidelines, which provide a baseline for web accessibility. To scale up accessibility, an organization-wide approach is crucial, including management support, a person with final responsibility for accessibility, and inclusion of accessibility in all processes. Collaboration and consistent design elements are key to preventing the release of inaccessible features. Internal researching, testing, and monitoring are essential to ensure accessibility. Challenges with WCAG requirements and audits exist, as not all issues are shown and sample sizes can lead to missed issues. Auditing and fixing in a cycle doesn't work for larger organizations, so accessibility should be checked in every step. An accessibility certificate and the feedback loop help build knowledge within teams and ensure ongoing accessibility. The talk concludes with a summary of previous topics and an invitation for further discussion.

How does a big organization become accessible? Let’s talk about a11y scaling strategies. To find out how to become accessible, and stay accessible.

Scaling a11y

Tim Damen

Today's Talk focuses on implementing virtual scrolling to improve performance and flexibility of lists. The process involves computing the height of the viewport, scroll position, and individual list item height. By rendering only the elements within the viewport, the initial page load and scrolling performance are enhanced. Various optimization techniques are discussed, including memoization, binary search, and delayed rendering. These techniques significantly improve scrolling performance and provide a better user experience. Additional techniques such as using skeletons, element pooling, and functional purity can further optimize rendering. Advanced techniques, like moving elements within the pool and using content visibility, yield substantial performance improvements. However, content visibility is better suited for large pages with few large sections. Overall, the Talk offers valuable insights into virtual scrolling and its limitations.

Virtual scrolling is a clever way to reduce rendering overhead, and is especially helpful as the complexity of websites increases. Although there are many plug-and-play libraries which support virtual scrolling in various frameworks, rolling your own is surprisingly easy. In addition, this allows one to maximally optimize each viewport for its content, unlocking additional performance savings. In this talk, you will learn how to create a flexible virtual scrolling viewport from scratch, and make it performant using concepts from functional programming. We will be following an implementation of a virtual scrolling viewport using web components from start to finish, including variable element heights, skeletons, asynchronous child component rendering. We will then optimize it using memoization, wrapping more-performant imperative constructs in a functional layer, and using element recycling to significantly reduce render churn when using stateless child components. Finally, we will touch on the state of the art in virtual DOM rendering, and how this approach compares to the use of the new `content-visibility` CSS property.

Fast, Flexible Virtual Scrolling With Functional Programming

Adam Niederer

Hello everyone. I'd like to start off by telling you a story about a guy named Dan. He's a mechanic and his job is fixing spaceships. Dan is a metaphor for all of us developers. Let's talk about monorepos as you've probably guessed from the title. I'll start off by talking about polyrepos, what they do well, but also where they fall short. Then I'll talk about monorepos and what issues they solve, as well as why you need good monorepo tooling, especially at scale. A Monorepo is a single repository containing multiple distinct projects with well-defined relationships. It allows teams to work together in a unified manner. Monorepos help with velocity, safety, and mobility. Monorepos can be adopted incrementally and good tooling can help with running tests. CI time is now coupled to the size of the change made, rather than the size of the monorepo. By generating a task graph from the project graph, we can optimize the build process by parallelizing and scheduling tasks. NX offers a solution by distributing tasks across multiple agents, allowing for time and cost optimization. Visit monorepo.tools or nx.dev to learn more and achieve focus and contentment like Dan.

Building a monorepo is like flying a spaceship: many people work together to make sure things don't go up in flames. In this talk we'll go over tools, techniques and best practices to help us put out fires and stay on course throughout our intergalactic journey. Disclaimer: attending this talk probably doesn't qualify you to fly spaceships!

Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos

Max Kless

Hello, I'm Vitor Norton, a developer advocate at SuperViz. I'm passionate about connecting people, highly dependent on my productivity tools, and love the idea of working anywhere in the world. Working remotely is a top priority, but we also don't want to feel alone. Let's explore some examples of companies that have addressed this issue: Gather Town, Miro, and Microsoft Teams. Collaborative components enable real-time collaboration by synchronizing participants' actions. The mouse pointers component utilizes a room concept to synchronize mouse positions. Channels and WebSockets are used for real-time data synchronization. CR-DTS is a conflict-free data-related type used to handle counter conflicts in collaborative environments.

Figma, Google Docs, Miro, and several other tools allow you to see in real time what a person is doing, but how? In this talk, you’ll get to know the concept of event-brokers, pubsub design pattern, web sockets. We will unravel these features and understand how to make them.

Breaking the Code Behind Realtime Collaboration With Websockets

Vitor Norton

Today's Talk introduces Graphi, a declarative dataflow programming environment for AI. It emphasizes the importance of asynchronous APIs and deep programming environments in the era of AI. The JavaScript version of OpenAPI enables easier handling of multiple asynchronous calls. Declarative dataflow programming improves efficiency and async/await simplifies calling asynchronous API functions. To further optimize asynchronous programming, a dataflow approach is recommended. Graphi allows building conversational graphs and handling cyclic dataflow. It offers advantages like parallelism, resultability, and scalability. Graphi introduces new concepts like nested graphs and distributed computing. It is an open-source project actively being improved and welcomes contributions.

Because of the availability of various AI services and open source LLMs, we are now able to build very sophisticated "agentic" applications. Managing concurrently running multiple AI agents and controlling data-flow among them is quite difficult in traditional Promise or async/await programming. We propose a "data-flow programming" style along with a reference open-source implementation, GraphAI (https://github.com/receptron/graphai).

Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments

Satoshi Nakajima

Hi, I'm Jerdot, a technical lead at AWS Safegate. Today, I'll discuss event-driven architecture and the potentials of real-time event-driven systems in JavaScript. We'll explore JavaScript runtimes, the event loop, and the queues involved. Event-driven architecture involves producing, detecting, consuming, and reacting to events. It is used in microservices, IoT systems, and real-time data processing. Tools like event emitters and WebSockets are used to simplify building event-driven applications. Connection management is crucial, and RabbitMQ and MQTT are popular message brokers. Performance optimization can be achieved by using high-performing message brokers, deploying producers and brokers close together, and considering fault tolerance. Message processing should include storing messages until successfully processed, handling events multiple times with unintended side effects, and using automatic retries and dead letter queues for transient failures.

In today's fast-paced digital world, real-time event-driven applications are at the heart of delivering dynamic and responsive user experiences. This session will delve into the technical intricacies and immense potential of building such applications using JavaScript. Together, we will explore the core concepts of event-driven architecture (EDA) and its implementation in JavaScript. Key topics will include a technical overview of the event loop and non-blocking I/O, WebSockets, and Message Brokers. We will further our journey with a look at how to apply these technologies into different use cases such as live data feeds, and collaborative applications while ensuring low latency and fault tolerance.

Unlocking the Potential of Real-Time Event-Driven Applications With JavaScript

Jarred Utt

React Advanced 2024

Let me walk you through introducing design system into mature codebase loosely based on Clio. Mature codebase challenges: inconsistent components and styling, multiple color palettes, and inconsistent design patterns. Working in siloed squads led to difficult maintenance, slow onboarding, and disjointed user experience. Design system squad realized the need for a plan and data to guide them. We need data to guide us. A React scanner library enabled us to crawl through the code base and understand the components used. Technologies like GitHub Actions, Redshift, and Count were used to store and query the data. The script involved running a scanner, configuring it, and sending the data to Redshift via Fivetran. ReaRscanner provided the pattern for processing data. We collected and sorted data on component usage and imports to identify pain points and track trends. Collaboration was a challenge, so we engaged teams through surveys, office hours, and extensive documentation. Our goal is to achieve over 60% adoption of the design system. We worked on keeping a single source of truth in our design system. Zero Height is our platform for storing component documentation, integrating tools like storybook and Figma, and ensuring alignment across design and code. Design systems are more than components and tokens; they create a shared language and process that facilitate teamwork and alignment.

Introducing design system into mature codebase. Let me walk you through our challenges, very useful tools to understand your current situation, tools to measure the impact of design system work, tools to make it happen.

Introducing Design System Into Mature Codebase

Kasia Jastrzebska

C3 Dev Festival

C3 Dev Festival 2024

Design systems are accelerators for development and every web or app developer will come in close contact with them. The design system maturity model simplifies the stages of maturity from Nebula to Supernova. Building a full-fledged design system requires close collaboration between designers and developers, a clear vision and strategy, and strong governance. Continuous improvement and evolution are essential for a mature design system, as well as aligning the design system with business goals and accommodating changes in organizational structure. Documentation and culture compatibility play a crucial role in the success of a design system.

Design systems are inevitable! They play a pivotal role in web development, enabling teams to achieve consistency, scalability, and efficiency.Join us for an insightful and entertaining talk that dives into the world of design systems and their evolution within tech organizations. In this session, we'll explore and try to validate a design systems maturity model, offering practical guidance at different stages of growth. We'll share lessons learned and expert advice on how to adapt your approach to fit your needs. Why does this matter? Implementing and maturing a design system can be complex as organizations evolve. By understanding the different maturity levels, you'll be empowered to make informed decisions.

From Nebula to Supernova: Design System Maturity Models

Joran Quinten

React Day Berlin 2023

Today's Talk focuses on applying product-making principles to design systems, emphasizing prioritization, MVPs, and metrics. It highlights the importance of understanding user needs and business goals through research and data collection. The Talk also emphasizes the iterative process of building components, gathering feedback, and iterating based on user validation. Lastly, it stresses the significance of measuring progress with metrics to track usage and adoption, and to demonstrate the impact of design system efforts.

You've planted the seeds of your design system. Maybe you've built out a few components and set up a basic Storybook. But where do you go from here? It can be easy to let your inner perfectionist take over and try to cover every scenario and edge case, especially when referencing established design systems. However, a more effective approach is to treat your design system as a product that grows and evolves with your users. Ultimately, its value lies in the problems it solves and the needs it meets. In this talk, I’ll explore how to apply product thinking principles to your design system, interweaving examples from my own experience as a design system engineering lead.

Applying Product Thinking Principles to your Design System

Raymond Luong

React Summit US 2023

Managing complexity in large React applications is a challenge, as it tends to grow exponentially over time. Component composition is a key technique that allows for flexibility in React applications, but too much composition can make components harder to use. Managing complexity and reducing cognitive load is crucial, and strategies such as controlling abstraction evolution and minimizing information needed for simple changes can help. Simplicity is difficult, but important in slowing down the growth of complexity.

The project started out great—the team was motivated, moving fast, and shipping features ahead of schedule. But little by little, complexity found its way in. Implementing small changes takes forever now, tech debt is piling up at an alarming rate, and everyone is losing confidence that the project will ever get done. Welcome to the messy middle.  Taking examples from real-world projects that shipped way too late, we'll explore the symptoms and causes of complexity in large React applications, and we'll share tips and strategies for dealing with it before it takes over your codebase.

The Messy Middle — Navigating Complexity in Large React Applications

Maxi Ferreira

React Advanced 2023

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

Karen discusses measuring the coverage of a design system using React Scanner. The tool helps analyze code and extract component details, allowing for the measurement of component usage and identification of patterns. The analysis also reveals anti-patterns in the design system consumption. By restructuring components, data-driven decisions can be made to optimize component usage at a route level and address anti-patterns.

Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system.  The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system. - Introduction to  react-scanner- Measuring Component Usage- Identifying Native HTML elements and Styled Components- Showing Tree structure of Page in terms of Components- Highlighting Anti Patterns- Benefits / Use Cases for this tool

Measuring Coverage of React Design System

Karan Kiri

Today's Talk explores how AI can empower developers to write better React code and automate the process of converting Figma designs into code. It discusses the use of heuristics to convert Figma designs into working HTML code and the potential of AI in generating better CSS class names. The Talk also highlights the importance of generating code that follows team conventions and automating design and code updates. Finally, it emphasizes the benefits of using large language models to automate tasks and improve developer productivity.

What if we could generate production-ready React components (including props, responsiveness, CSS styling, TypeScript typings, and more) from Figma designs, automatically? This seemingly impossible task is becoming a reality thanks to the latest advancements in AI (such as ChatGPT). In this talk, we’ll discuss some of the techniques we are using at Anima to automate the boring parts of frontend development, generating React components from Figma designs. We’ll cover some algorithmic techniques, processes and deep-learning based approaches that could help you speed up your day-to-day frontend work.

Figma to React With AI, Are We There Yet?

Federico Terzi

Accessibility goes beyond screen readers and semantic HTML, and it's important to consider the needs of neurodivergent individuals. Cognitive impairments pose unique challenges, and COGA provides valuable guidelines for designing for cognitive accessibility. Customization, error tolerance, and compatibility with browser extensions are crucial in improving user experience. The NHS design system prioritizes functionality and has proven effective in handling emergencies. Understanding user needs and advocating for change within the tech industry are essential for creating a more accessible web.

Did you know that approximately 1 in 7 people are neurodivergent? Within that group there is an entire spectrum of people whose brains process information differently. However, as frontend engineers we often forget to take these idiosyncrasies into account, or choose to simply apply industry standards such as WCAG 2.1 AA without digging deeper. In this talk, Steph shares some of the ways you can create better web experiences for the neurodivergent.

Thinking Differently About a11y – Accessible Website Design for the Neurospicy

Stephanie Shaw

JS Nation

JSNation 2023

The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

React Day Berlin 2022

This Talk discusses the development of a cross-platform design system architecture. It explores different approaches and proposes a unified API that works across web and native platforms. The Talk covers techniques for resolving files and declarations, configuring bundlers, and testing for both web and native platforms. It also highlights the bundling of TypeScript types and handling accessibility for different platforms.

When we want to build a “cross-platform mobile app” the answer always is React Native but what if you want to build a “cross-platform app” that runs across mobile and browser? Here’s where React Native falls short. react-native-web is trying to bridge this gap to some extent but the primary requirement is to write your code in React Native which gets converted to the web, but that itself has a bunch of downsides and the biggest one being - forcing mobile app developers to understand how browsers work. In this talk, I’ll share how we are building a true cross-platform architecture without using react-native-web for our design system at Razorpay.

The Sorcery of Building a Cross Platform Design System Architecture

Kamlesh Chandnani

React Advanced 2022

This workshop provides an overview of RapidUI development in React, covering topics such as design systems, component libraries, CSS in JS, theming, atomic design, and style systems. It emphasizes the importance of using pre-existing design systems and component libraries, as well as considering legacy code and balancing convention and configuration. The workshop also explores the use of style components and emotion for styling legacy codebases, implementing themes with style components, and utilizing advanced features like variants and the style system. It concludes with insights on planning and building a component library, extending existing libraries, and using tools like Storybook and Chromatic for collaboration and deployment.

In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library. We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on. Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

Richard Moss

Today's Talk discusses the importance of a good component API and the balance between rigidity and flexibility. The demo showcases the gradual evolution of a component's configurability while maintaining ease of use. Measuring the effectiveness of a component library involves factors like adoption rate and component coverage. Collecting data and embracing breaking changes are crucial for continuous improvement. Ensuring consumers are updated and on the cutting edge is a responsibility of the library provider.

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.

Developing and Driving Adoption of Component Libraries

Logan Ralston

Lachlan Bradford

React Summit

React Summit 2022

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.

Build a Design System with React and Tailwind CSS

Shruti Balasa

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

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.

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

Octopus Energy introduced design systems to address challenges in maintaining brand identity, accessibility, and developer experience. They built a component library using design guidelines and accessibility best practices, following Bradfrost's atomic design methodology. They used TypeScript, Jest, Versal, and Storybook for building and testing the library. The design system is an ongoing project that evolves with the product and business over time.

I will walk through the process of my team introducing design system to our company's web applications that are built separately in different countries - UK, US, Germany, Spain and Japan. After that, I will add a practical guide to set up a design system for a project.

Introducing Design System to Multinational Web Apps

Alison Yoon

This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.

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.

Walking the Line Between Flexibility and Consistency in Component Libraries

React Finland

React Finland 2021

Remember Atomic Design? It's been a while since we started talking about Design Systems. They're supposed to solve our interfaces inconsistencies issues, as a single source of truth. But do you know well how to build and use them, from a developer perspective? Here's your ultimate guide to Design Systems, for Devs! From the fundamentals of Design Tokens definition, to how to build advanced versatile layouts. You'll learn all best practices, tips &amp; tricks, components splicing strategies, from this comprehensive step--step handbook talk. Never be lost again in front of a creating Design System from scratch! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems of a Down: Steal this Guide!

m4dz 

React Summit Remote Edition

React Summit Remote Edition 2021

This Talk explores the core components of design systems, their benefits and challenges, as well as the importance of having a design system for products. It also discusses the concept of a design language and its role in creating a design system. The section on building a design language and component library emphasizes the significance of selecting options for a design language and creating reusable components. The section on building and scaling design systems highlights the benefits of design systems and the challenges involved in building and scaling them. It also mentions the changing mindset towards recognizing the value of design systems in the competitive space.

In this talk, Taley'a will be discussing how design system enables the consistency among the products, you will explore the core components of the design system, along with the key benefits and challenges while building the design system. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#design systems