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

There are plenty of them out there. No, we're not talking about front-end frameworks but ready-made component libraries such as "Angular Material", "Ionic", "MUI", and many more. They all try to simplify our lives as developers and provide us with reusable components. Depending on the library, they are framework-dependent or independent, sometimes better, sometimes worse for customization.

This is why it is not uncommon for companies to create their libraries according to their needs in the enterprise environment. If different front-end frameworks or CMS systems are also to be operated with them, there is no way around them—Web Components.

In this session, Sascha Lehmann from Thinktecture will show you how you can build highly customizable and lightweight web components with the help of "Lit," what pitfalls you need to watch out for when architecting the library and how you can achieve the highest possible compatibility by using the APIs that the browser gives us.

Transcript

1. Write once, use anywhere Framework agnostic Design Systems with Web Components Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉  Write once, use anywhere Framework agnostic Design Systems with Components
3. What is the problem? Write once, use anywhere Framework agnostic Design Systems with Components
4. DEV Team Product / POC Write once, use anywhere Framework agnostic Design Systems with Components
5. Write once, use anywhere Framework agnostic Design Systems with Components
6. DEV Team Product UX Team Write once, use anywhere Framework agnostic Design Systems with Components
7. • 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
8. Web Components P Write once, use anywhere Framework agnostic Design Systems with Components
9. … 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
10. How they are declared Custom Elements Write once, use anywhere Framework agnostic Design Systems with Components
11. 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
12. Vanilla or Library? Write once, use anywhere Framework agnostic Design Systems with Components
13. Frameworks Libraries Write once, use anywhere Framework agnostic Design Systems with Components
14. Structure projects Write once, use anywhere Framework agnostic Design Systems with Components
15. Beispielanwendung animieren <Demo/>
16. Cutting components Architecture Write once, use anywhere Framework agnostic Design Systems with Components
17. Input Element A naive first try… Usage Write once, use anywhere Framework agnostic Design Systems with Components
18. 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
19. “Never reimplement what the Browser already implements for you!” Write once, use anywhere Framework agnostic Design Systems with Components
20. Use the power of slotting / Contentprojection A second approach … Usage Write once, use anywhere Framework agnostic Design Systems with Components
21. 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
22. Beispielanwendung animieren <Demo/>
23. Everything at a glance Do’s & Don’ts Write once, use anywhere Framework agnostic Design Systems with Components
24. • 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
25. Sascha Lehmann sascha.lehmann@thinktecture.com Thank you very much! @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 