Networking sold outSales open until 15.09 · 23:59--d --h --m --s

Personalisation

Performant Component through Customization

September 4, 2023 11:00 AM

Power Talk

🇬🇧 English

CMYK

About

Most current UI libraries provide great user experience with a vast number 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 customization freedom is enough? That's what my talk is about.

Talk by

Photo of Maya Shavin, Senior Software Engineer at Microsoft

Senior Software Engineer at Microsoft

Watch the full talk

Watch this WaysConf session, then continue with related talks or explore the current programme.

Explore the 2026 agenda More WaysConf recordings

From the recording

Talk in brief

In "Performant Component through Customization" at WaysConf 2023, Maya Shavin explores the design, architecture, and maintenance strategies required to build effective, high-performance UI component libraries. Drawing from her experience maintaining Storefront UI and working at Microsoft, Shavin breaks down the core properties of successful component libraries into visual and functional consistency across six foundational pillars: reusability, stylability, customizability, responsiveness, testability, and accessibility. She outlines five critical criteria for evaluating and engineering libraries: aligning with narrow target goals, balancing development and delivery performance, providing clean customizability through native CSS APIs instead of heavy preprocessor overrides, scaling structure by decoupling UI layout from state logic via custom hooks, and optimizing distribution through raw source packaging and comprehensive documentation.

Key takeaways

01
Define Specific Scope Over Generic Ambition
Attempting to build an all-encompassing library often leads to bloated, unmaintainable code. Target specialized domains—such as mobile-first e-commerce—to deliver tailored user experiences and maintainable architectures.
Watch from 8:18
02
Balance Development DX with Delivery Performance
Component library performance involves both developer experience during maintenance and runtime efficiency for end users. Clear code structures and tree-shakable delivery mechanisms ensure both maintainers and consuming applications remain fast.
Watch from 9:24
03
Leverage Native CSS Features for Styling
Relying on heavy preprocessor variables or complex CSS class overrides often creates build errors and maintenance headaches. Utilizing native CSS custom properties and modern browser features provides reliable customization without runtime overhead.
Watch from 13:47
04
Decouple Component State Logic from UI Presentation
Separating internal logic into custom hooks allows developers to customize visual presentations while reusing core state behaviors. This composable Lego-like architecture scales effectively across complex workflows such as checkout wizards and product galleries.
Watch from 16:41
05
Distribute Raw Source Code for Optimal Tree-Shaking
Shipping pre-bundled compiled JavaScript limits consuming applications from controlling bundle sizes and tree-shaking unused components. Package raw component source files so build pipelines can optimize imports and trim unnecessary overhead.
Watch from 19:22

Video chapters

1:02Pillars of Modern Component Libraries
Maya Shavin outlines the essential characteristics of component libraries, emphasizing reusability, responsiveness, and accessibility.
4:24Visual versus Functional Consistency
The discussion contrasts design system style guidelines with predictable user experience patterns across interface elements.
7:10Targeted Scope and Goal Definition
Shavin advocates for defining narrow project goals using Storefront UI as a mobile-first e-commerce case study.
9:24Development and Delivery Performance Aspects
The speaker contrasts internal code maintainability for contributors with runtime bundle size and tree-shaking for end users.
11:37Styling Strategies and Native CSS Customization
Modern CSS capabilities are presented as superior alternatives to heavy preprocessor setups and fragile class overrides.
16:22Modular Architecture and Logic Hooks
Decoupling state logic into custom hooks enables modular assembly of complex components like product galleries and checkout wizards.
18:35Package Distribution and Documentation Best Practices
Shavin compares pre-compiled bundling with raw source distribution and emphasizes actionable documentation for developers.

Read edited transcript highlights

These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.

Defining Core Pillars of Interface Component Libraries

A component library must go beyond basic UI widgets to deliver reusable, stylable, customizable, and responsive elements across diverse devices. Reusability allows a single component, such as a sidebar, to power menus or card containers interchangeably. Accessibility stands as the single most critical requirement, as interface barriers impact millions of users relying on assistive technologies or high-contrast display settings. Isolating components for automated testing ensures stability before deployment, providing both visual and functional consistency across applications.

Watch from 2:01

Establishing Clear Scope and Domain Focus

Building a broad component library that attempts to solve every possible use case usually results in an unmaintainable product. Instead, library creators should define narrow, opinionated goals. For instance, Storefront UI focused strictly on e-commerce applications, prioritizing mobile-first responsiveness and high customizability because commercial brands require distinct visual identities. Setting explicit boundaries during planning prevents over-engineering and aligns the library directly with user requirements.

Watch from 7:30

Navigating Utility and Functional Customizability

Component customization splits into visual utilities—such as spacing, colors, and typography—and functional behaviors like icon swapping and action handlers. Overriding deeply nested styling classes using preprocessors often breaks build setups or forces heavy reliance on override flags. Adopting native CSS features like CSS variables and native nesting solves styling challenges directly in the browser. For functional flexibility, exposing component slots covers most custom needs while preserving baseline accessibility defaults.

Watch from 11:40

Decoupling Application State from Visual Display

To achieve true architectural scalability, component libraries should separate state management logic from visual template rendering. Extracting behaviors into custom hooks or composables enables developers to plug business logic into custom UI components like Lego blocks. For example, a checkout wizard can combine step-navigation hooks with domain-specific payment APIs, allowing developers to swap UI presentation without rewriting underlying application workflows.

Watch from 16:22

Optimizing Package Distribution Methods

Delivering component libraries requires choosing between pre-bundled compiled JavaScript and distributing raw source files directly inside the package. Pre-bundled packages prevent fine-grained control over bundling and tree-shaking, frequently resulting in bloated client applications. Distributing raw source code grants consuming build tools direct access to individual files, allowing applications to import only necessary components and dramatically trim final JavaScript bundle sizes.

Watch from 18:40

Explore WaysConf 2026

View the agenda

Get tickets