Write once, use anywhere: Framework agnostic design systems with web components

The rapid development of web APIs (keyword project Fugu) has increasingly closed the gap that existed between progressive web apps (PWA) or hybrid development approaches and native apps. Visually, they are also barely distinguishable from native apps. However, when it comes to animations, native apps have always been one step ahead thanks to the availability of native animation APIs. Until now, complex animations such as container transforms were practically impossible to realise in web apps without immense effort.
That's right. They WERE.
This gap can now also be closed thanks to the new View Transition API and Scroll-Driven Animations. And the best thing about it: everything is done almost exclusively using CSS.
Curious? Then Sascha Lehmann from Thinktecture will give you an overview of the new APIs, how you can use them effectively in your project and where their limits lie.

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