WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Sep 18, 2024

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Treat your UI elements like backend services with design-first APIs. Defining clear contracts before coding unlocks seamless team collaboration, framework-agnostic longevity, and fully automated documentation.

Pause
Mute Enter Fullscreen
#1 about 5 min

Navigating workflow challenges in UI component development

Delays and knowledge gaps arise when web teams wait for centralized design system updates.

#2 about 4 min

Establishing APIs as communication contracts for components

Shared agreements on component interfaces prevent implementation failures and align developer expectations.

#3 about 4 min

Adopting a design-first and framework-agnostic component approach

Collaborating on component APIs before coding prevents framework lock-in and upgrade deadlocks.

#4 about 3 min

Leveraging web components for independent UI elements

Standardized shadow DOMs and slots securely encapsulate business logic and styling inside reusable web components.

#5 about 4 min

Standardizing API descriptions using custom elements manifests

Machine-readable JSON specification files provide tooling integration for frameworks and documentation displays.

#6 about 7 min

Building skeleton components to establish foundational API endpoints

Placeholder Lit components augmented with documentation blocks dynamically render interactive API playgrounds.

#7 about 3 min

Unlocking automation workflows for web component distribution

Manifest-driven automation effortlessly generates IDE completions, linting solutions, and wrapper code.

#8 about 3 min

Reviewing resources for web component workflow implementation

Essential starting points and repositories guide developers in adopting automated, design-first methodologies.

Matching moments

4:23 min

Building a framework-agnostic design system with web components

Manuel Mauky · World Congress 2023

7:10 min

Building framework-less architectures with native custom web components

Christian Liebel Christian Liebel · World Congress 2022

5:00 min

Building and documenting UI components in isolation

Emma Britnor Emma Britnor · World Congress 2024

1:52 min

Building isolated UI elements using standard web components

Lucien Immink · World Congress 2023

1:25 min

The main promise of UI component libraries

Filip Rakowski · World Congress 2023

5:01 min

Designing flexible and reusable component APIs

Emma Britnor Emma Britnor · World Congress 2024

More from WeAreDevelopers LIVE

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
5 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
10 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
10 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
17 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres thumbnail
7:41
18 days ago

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres

Chris Heilmann, Daniel Cranney

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
about 1 month ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

September 23, 2026 · 14:20–14:50

Stage 2

Build Interactive Copilot Experiences with Canvas Extensions

James Clancey

Principal Product Manager, GitHub

James Clancey
Open session

World Congress 2026 North America

September 25, 2026 · 12:20–12:50

Stage 9

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 23, 2026 · 10:00–17:00

Stage 14

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

Building a framework-independent component library thumbnail
19:46
World Congress 2025 • about 1 year ago

Building a framework-independent component library

Tobias Scholz

Extending HTML with Web Components thumbnail
41:54
World Congress 2022 • about 4 years ago

Extending HTML with Web Components

Rowdy Rabouw

Leveraging Storybook for Component Driven Development outside of your classic Component Library. thumbnail
25:32
World Congress 2024 • about 2 years ago

Leveraging Storybook for Component Driven Development outside of your classic Component Library.

Emma Britnor

Building a component library for modern challenges thumbnail
29:44
World Congress 2023 • about 3 years ago

Building a component library for modern challenges

Filip Rakowski

Accessibility with Web Components thumbnail
25:33
World Congress 2023 • about 3 years ago

Accessibility with Web Components

Manuel Mauky

Design Systems for the Machines - How to Make AI Understand Your UI thumbnail
24:30
World Congress 2026 Europe • about 2 months ago

Design Systems for the Machines - How to Make AI Understand Your UI

Jennifer Wjertzoch

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.