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 Components

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

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

Write once, use anywhere Framework agnostic Design Systems with Components

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

• 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 Components

Web Components P Write once, use anywhere Framework agnostic Design Systems with 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 Components

How they are declared Custom Elements Write once, use anywhere Framework agnostic Design Systems with 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 Components

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

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

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

Beispielanwendung animieren

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

Input Element A naive first try… Usage Write once, use anywhere Framework agnostic Design Systems with 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 Components

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

Use the power of slotting / Contentprojection A second approach … Usage Write once, use anywhere Framework agnostic Design Systems with 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 Components

Beispielanwendung animieren

Everything at a glance Do’s & Don’ts Write once, use anywhere Framework agnostic Design Systems with 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 Components

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