Web Components w design systemach – dlaczego warto je wybrać

Design systemy stały się standardem w większych projektach. Dzięki nim zespoły pracują spójnie i mają jedno miejsce, w którym trzymają komponenty oraz decyzje projektowe. Problem w tym, że większość tych systemów powstaje w konkretnym frameworku – React, Vue czy Angularze. To trochę tak, jakby budować uniwersalne narzędzie, a potem zamykać je w jednym narzędziu.

Paradoks design systemów

Założenie było proste: stworzyć coś, co da się wykorzystać w dowolnym projekcie. W praktyce jednak komponenty często żyją tylko wewnątrz jednego ekosystemu. Jeśli chcesz ich użyć, musisz być na tym samym frameworku. W innym przypadku pozostaje pisanie wszystkiego od zera.

To nie do końca jest design system. To biblioteka komponentów pod konkretny framework.

Web Components rozwiązują ten problem. Bazują na standardach przeglądarki – custom elements i shadow DOM – i działają niezależnie od tego, jaki framework aktualnie używasz.

Dlaczego Web Components mają sens

Web Components nie są modne. Nie dają też efektownego wow przy prezentacjach. Ale za to naprawdę rozwiązują kilka kluczowych problemów.

Przede wszystkim są framework-agnostic. Działają w React, Vue, Svelte, Astro i w czystym JavaScript. Nie musisz decydować się na jeden stos technologiczny tylko dlatego, że Twój design system tego wymaga.

Po drugie, pracujesz bezpośrednio z platformą webową. Bez dodatkowych warstw abstrakcji, bez zależności od aktualnych trendów. Tylko HTML, CSS i JavaScript – rzeczy, które będą działać także za kilka lat.

Po trzecie, prawdziwa przenośność. Komponent nie jest „Reactowy” ani „Vue’owy”. Jest po prostu przyciskiem, kartą lub modalem. I powinien działać wszędzie tak samo.

Prostsze znaczy lepsze

W przypadku Web Components nie chodzi o maksymalną moc. Chodzi o minimalizm.

Nie trzeba wprowadzać reaktywności czy złożonych mechanizmów zarządzania stanem. Komponent ma spełniać swoją podstawową funkcję. Przycisk powinien być przyciskiem. Modal – modalem. Gdy komponenty są zbyt „inteligentne”, szybko zaczynają ciągnąć za sobą logikę biznesową i zależności,这使得 sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie sie network