Die Anforderungen an Web-Anwendungen sind in den letzten Jahren gestiegen: Sie müssen in der Regel in unterschiedlichen Bildschirmgrößen nutzbar sein – bei optimaler Darstellung auf allen Endgeräten. Bei UEBERBIT entwickeln wir maßgeschneiderte Web-Applikationen mit sehr guter User Experience. Regelmäßig beschäftigen wir uns deshalb mit der Frage, wie wir unsere individuellen und auch visuell anspruchsvollen Lösungen effizient entwickeln können. Als technologieübergreifend einsetzbar und besonders wertvoll erachten wir Tailwind CSS und Web Components. 

Tailwind CSS: Effiziente und flexible Entwicklung

In unserem Frontend Development hat sich Tailwind CSS bereits etabliert. Anders als herkömmliche CSS-Frameworks wie etwa Bootstrap bringt Tailwind keine vorgefertigten Module mit, die überarbeitet werden müssen, sondern eine umfangreiche Bibliothek an Utility-Klassen. Diese ermöglichen eine schnelle und flexible Entwicklung mit beliebigen Farben, Abständen und Schriftgrößen für grenzenlose Gestaltungsfreiheit. Die CSS-Eigenschaften (Properties) lassen sich klar definieren und wiederverwenden, sodass immer ein einheitliches Erscheinungsbild gewährleistet ist. Vordefinierte (und anpassbare) Breakpoints vereinfachen das responsive Styling.

Tailwind erspart verschiedene Arbeitsschritte in der Frontend-Entwicklung, wie etwa den häufigen Wechsel zwischen HTML-Template und CSS-Datei. Code kann wiederverwendet werden und ungenutzte Stylesheets werden automatisch entfernt.

Fazit: Die Technologie ist äußerst nützlich wenn es darum geht, spezifische Designwünsche umzusetzen. Bei UEBERBIT kommt Tailwind CSS inzwischen in nahezu allen Projekten zum Einsatz.

Web Components: Modular und wiederverwendbar

Eine weitere spannende Sammlung von Webtechnologien aus der Frontendentwicklung sind Web Components. Diese ermöglichen es Entwicklern, wiederverwendbare Bausteine zu entwickeln, welche später für die Umsetzung verschiedener Websites eingesetzt werden können. Web Components können auf Änderungen reagieren, zum Beispiel wenn sich die Attribute oder der interne Zustand des Elements ändern. Dies garantiert eine reibungslose Aktualisierung der Oberfläche. Aus diesem Grund bieten sich Custom Elements besonders bei der Entwicklung interaktiver Komponenten an. 

Mithilfe von Lifecycle Hooks kann außerdem das Verhalten der Elemente zu verschiedenen „Lebenszyklusphasen“ bestimmt werden. 

Die sogenannten Custom Elements ermöglichen es, neue, benutzerdefinierte HTML-Elemente zu erstellen, die dank der nativen Unterstützung durch die Browser in verschiedenen Systemen wie TYPO3, Drupal, Vue oder Vanilla JavaScript eingesetzt werden können. Dies erlaubt sofortige UI-Aktualisierungen ohne externe Frameworks, was eine flüssige technologieübergreifende Nutzererfahrung gewährleistet.

Ein weiterer Vorteil ist die Modularität. Jede Komponente funktioniert für sich isoliert, und kann ohne großen Aufwand in verschiedenen Projekten eingesetzt und getestet werden. Über die Attribute und vordefinierte Slots kann der initiale Zustand konfiguriert werden, was das Testen verschiedener Varianten einer Komponente vereinfacht. 

Fazit:  Web Components erleichtern die Entwicklung von Websites durch wiederverwendbare Bausteine, die modular, flexibel und in verschiedenen Systemen nutzbar sind. Die automatische Aktualisierung der Oberfläche bei Änderungen des internen Zustands unterstützt zudem die Erstellung reaktiver Komponenten. Zum Einsatz kamen diese bspw. bereits bei der Entwicklung dynamischer Komponenten für eine Plattform von Commerz Real.

Mehr Leistungsfähigkeit, bessere UX 

Die Kombination von Tailwind CSS und Web Components bietet zahlreiche Vorteile sowohl für die Performance als auch für die User Experience von Websites. Beide Technologien optimieren unterschiedliche Aspekte der Webentwicklung und ergänzen sich dabei hervorragend.

• Performance: Die Kombination von Tailwind CSS und Web Components sorgt für kleinere Dateigrößen, schnelles Rendering, effiziente Nutzung von Ressourcen und weniger Overhead. Dies führt zu schnelleren Ladezeiten und einer insgesamt besseren Performance der Website.
• User Experience: Eine bessere Performance und Interaktivität sorgen für eine einheitlich gute Nutzererfahrung. Dieser Aspekt ist nicht zuletzt auch SEO-relevant: UX ist nachweislich ein entscheidender Faktor für das Suchmaschinen-Ranking. 

Tailwind CSS und Web Components stellen im Frontend Development eine wertvolle Ergänzung der Frontend-Entwicklungstools dar. Sie tragen zu schlanken, gut strukturierten und leistungsstarken Websites bei, die auch die Nutzerinnen und Nutzer überzeugen.

Über die Autoren

Dominik Thurau und Matti Svensson

Dominiks Schwerpunkte bei UEBERBIT sind TYPO3 sowie die Entwicklung von Apps und Online-Shops.

Matti ist bei UEBERBIT spezialisiert auf die Frontend-Entwicklung mit Drupal und TYPO3. Tailwind CSS schätzt er für seine Flexibilität und Effizienz.

Foto: Pexels