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