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 · WWC 2023

7:10 min

Building framework-less architectures with native custom web components

Christian Liebel

Christian Liebel · WWC 2022

5:00 min

Building and documenting UI components in isolation

Emma Britnor

Emma Britnor · WWC 2024

1:52 min

Building isolated UI elements using standard web components

Lucien Immink · WWC 2023

1:25 min

The main promise of UI component libraries

Filip Rakowski · WWC 2023

5:01 min

Designing flexible and reusable component APIs

Emma Britnor

Emma Britnor · WWC 2024

More from WeAreDevelopers LIVE

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

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail

about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

World Congress 2026 North America

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

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

World Congress 2026 North America

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

World Congress 2026 North America

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

World Congress 2026 North America

AI-Driven API Design

Mike Amundsen

Author, Adviser, Trainer

Mike Amundsen

World Congress 2026 North America

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

WWC 2025 • 12 months ago

Building a framework-independent component library

Tobias Scholz

Extending HTML with Web Components thumbnail

WWC 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

WWC 2024 • almost 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

WWC 2023 • almost 3 years ago

Building a component library for modern challenges

Filip Rakowski

Accessibility with Web Components thumbnail

WWC 2023 • almost 3 years ago

Accessibility with Web Components

Manuel Mauky

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

WWC Europe 2026 • about 1 month ago

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

Jennifer Wjertzoch

Related articles

CH

Chris Heilmann

Declarative Design and a fresh take on collaboration with developers

Getting designers and developers on the same page can be tough for digital product teams. Things get especially tricky when the focus is just on fixing little things here and there instead of looki...

about 1 year ago

Illustration showing how developers and designers can work on the same project together

CH

Chris Heilmann

Dev Digest 133 - Back to Front

News and ArticlesWeAreDevelopers LIVE WebDev Day is on Wednesday, 18/11/2024. Learn about Design-first APIs for UI components, the JavaScript event loop, the Secret sauce behind pattern matching an...

almost 2 years ago

Dev Digest 133 - Back to Front

BR

Benjamin Ruschin

The HTML Elements That You’re Probably Over-Engineering

As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that...

9 months ago

HTML elements mocked up with their code

DC

Daniel Cranney

How to Avoid Over-Engineering

In today’s software development world, the demand for designing applications that are both robust and easy to maintain is more pressing than ever. Many developers encounter the architectural chaos ...

over 1 year ago

A series of code blocks with 'X's on showing they are incorrect, with one CSS block shown as the correct answer.

From learning to earning

Jobs that call for the skills explored in this talk.

Senior Product UI Designer

Berlin, Germany

Expert €75k–90k HTML Data Analysis Interaction Design

20 days ago • Verified

Staff Frontend Engineer

SMG Swiss Marketplace Group

Belgrade, Serbia

Senior Web Designer, Growth

Expert Remote A/B Testing Data Analysis Software as a…

20 days ago • Verified

Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City

SMG Swiss Marketplace Group

Ho Chi Minh City, Vietnam

about 1 month ago

Junior Frontend Engineer

Berlin, Germany

Starter €60k–75k NestJS ReactJS Backend

Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions

Wietmarschen, Germany

Remote HTML Backend AngularJS