Write once, use anywhere Framework agnostic Design Systems with Web Components Sascha Lehmann @derLehmann_S Consultant

Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/ Write once, use anywhere Framework agnostic Design Systems with Web Components

What is the problem? Write once, use anywhere Framework agnostic Design Systems with Web Components

DEV Team Product / POC Write once, use anywhere Framework agnostic Design Systems with Web Components

Write once, use anywhere Framework agnostic Design Systems with Web Components

DEV Team Product UX Team Write once, use anywhere Framework agnostic Design Systems with Web Components

UX Team Write once, use anywhere Framework agnostic Design Systems with Web Components We need our own, customized UI library

• Is there a company-wide regulation as to which framework is used, or can each team decide freely according to developer composition/experience? • Are there any external service providers or agencies on board? • Are there CMS systems that also need to be supplied? • Etc. What questions need to be asked? Write once, use anywhere Framework agnostic Design Systems with Web Components

Web Components Write once, use anywhere Framework agnostic Design Systems with Web Components

Design Systems Write once, use anywhere Framework agnostic Design Systems with Web Components

• A collection of experiences (Do’s and Don’ts) • Pattern & Component Library • Styleguide (The foundation of the design process) • Design language What is a Design System Write once, use anywhere Framework agnostic Design Systems with Web Components

• Visual consistency within on (or many) application(s) • Common basis for product owner, marketing, design and development • Create an interface between design & development • Quicker implementation of new features What are the goals? Write once, use anywhere Framework agnostic Design Systems with Web Components

Which ones do exist? Write once, use anywhere Framework agnostic Design Systems with Web Components

What does it consist of? Write once, use anywhere Framework agnostic Design Systems with Web Components Tokens md.sys.color.primary md.sys.color.on-primary md.sys.typescale.display-l md.sys.typescale.display-s Typography Display Headline Title Body Colors Primary Secondary Tertiary Background Elevations 0dp 1dp 2dp 3dp States enabled disabled Layout Gaps Margins Paddings Border-Radius Motion Design

Web Components Write once, use anywhere Framework agnostic Design Systems with Web Components

… but based on existing standards No web standard of its own… Custom Elements ES Modules Shadow DOM HTML Templates Write once, use anywhere Framework agnostic Design Systems with Web Components

How they are declared Custom Elements Write once, use anywhere Framework agnostic Design Systems with Web Components

document node node node Shadow Host Shadow DOM Shadow Root node node node Shadow DOM Write once, use anywhere Framework agnostic Design Systems with Web Components

Vanilla or Library? Write once, use anywhere Framework agnostic Design Systems with Web Components

Frameworks Libraries Write once, use anywhere Framework agnostic Design Systems with Web Components

Structure projects Write once, use anywhere Framework agnostic Design Systems with Web Components

Beispielanwendung animieren

Cutting components Architecture Write once, use anywhere Framework agnostic Design Systems with Web Components

Input Element A naive first try… Usage Write once, use anywhere Framework agnostic Design Systems with Web Components

Downsides A naive first try … • We "hide" or encapsulate everything in the component • This results in poor maintainability • Configuration must be controlled via many inputs • The shadow DOM makes accessibility more difficult • Frameworks do not automatically recognize the component as a form element • We lose the browser default behavior Write once, use anywhere Framework agnostic Design Systems with Web Components

“Never reimplement what the Browser already implements for you!” Write once, use anywhere Framework agnostic Design Systems with Web Components

Use the power of slotting / Contentprojection A second approach … Usage Write once, use anywhere Framework agnostic Design Systems with Web Components

Benefits A second approach … • The „native“ HTML elemets remain in the light DOM ✓ Default behavior of elements remains ✓ Accessebility can be guaranteed ✓ No fremework specific wrappers needed • Higher flexibility ✓ No „input-hell“ ✓ Easier maintanance ✓ Component defines the structure Write once, use anywhere Framework agnostic Design Systems with Web Components

Beispielanwendung animieren

Everything at a glance Do’s & Don’ts Write once, use anywhere Framework agnostic Design Systems with Web Components

• Check the project environment in detail at the beginning • Decide on a library or framework • Familiarize yourself with the basic technology • Set up a clean project structure • Keep components small and lightweight • Use slotting / content projection to increase flexibility • Lively exchange with UI/UX team • Don’t reimplement what the browser already implements for you • Encapsulate everything in the component • Mixing several responsibilities in one component • Being driven by project preassure Do’s Don’ts Write once, use anywhere Framework agnostic Design Systems with Web Components

Sascha Lehmann [email protected] Thank you very much! @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/