11/13/2024 - 16:30

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

There are plen­ty of them out there. No, we’re not talk­ing about front-end frame­works, but ready-made com­po­nent libraries such as “Angu­lar Mate­r­i­al”, “Ion­ic”, “MUI”, “TUI”, “Mud­Bla­zor” and many more. They all try to make our lives as devel­op­ers eas­i­er and pro­vide us with reusable com­po­nents. Depend­ing on the library, they are frame­work-depen­dent or inde­pen­dent, some­times bet­ter, some­times worse to cus­tomize. This is why it is not uncom­mon in the enter­prise envi­ron­ment for com­pa­nies to decide to cre­ate their own libraries accord­ing to their needs. If dif­fer­ent front-end frame­works or CMS sys­tems are also to be oper­at­ed with them, there is no get­ting around them. Web Components.

In this ses­sion, Sascha Lehmann from Think­tec­ture will show you how you can build high­ly cus­tomiz­able and light­weight web com­po­nents with the help of “Lit”, what pit­falls you need to watch out for when archi­tect­ing the library, how you can learn from estab­lished libraries and how you can achieve the high­est pos­si­ble com­pat­i­bil­i­ty by using the APIs that the brows­er gives us.

Learning objectives

  • Why and when should you use Web Components?
  • What are Web Components and how do they work?
  • Effective structuring of Web Component projects based on a design system
  • How do I cut components effectively?

Level

Basic

Prior knowledge

Basic knowledge in web development
Unbenannter Mann
Sascha Lehmann works as a consultant at Thinktecture AG and is an expert in the Angular and UI/UX environment. He helps customers with their challenges and projects on a daily basis. Of course, he doesn't just like to keep his knowledge to himself, but also passes it on to others with great dedication in order to pass on his passion for web development to them. Follow Sascha on LinkedIn and on X.