Next Level Karriereseite bei VEGA Grieshaber mit Web Components
Lesezeit: 2 Min
Nachdem wir Weltmarktführer VEGA Grieshaber mit unserem agilen Software Twin begeistern konnten, ging es für uns nun an das nächste Projekt mit dem Sensoren-Hersteller: Die Karriereseite. Gleichzeitig wollten wir uns auch mal wieder challengen, also entschieden wir uns, eine neuere Webtechnologie anzuwenden, „Web Components“. Was für uns dabei die Herausforderung war? Bis dato hatten wir noch nie mit Web Components gearbeitet, es war also absolutes Neuland für uns. Also schlüpfen wir in unsere Kolumbus-Stiefel und ließen die Tastaturen heiß laufen.
Der Case – eine neue Webtechnologie soll her
Der Weltmarktführer aus dem Schwarzwald, VEGA Grieshaber wollte für seine Karriereseite etwas Neues. Der Bereich Webtechnologie sollte umgedacht werden, neu gedacht werden. Unsere Aufgabe: Ein Designsystem bauen, das bei VEGA überall eingesetzt werden kann, sei es Karriereseite oder Homepage. Außerdem sollte das neue Designsystem in die bestehende Sitecore Experience Platform integriert werden. Es sollte höchst dynamisch sein und gleichzeitig die SEO-Funktionalität beibehalten. Aufgrund dieser Voraussetzungen haben wir uns für die Webtechnologie „Web Components“ entschieden.
Web Components: Maximale Flexibilität, wiederverwendbar & technisch modern
Web Components sind ein moderner Web-Standard, um komponentenbasiert wiederverwendbare Elemente fürs Web zu entwickeln. Einfacher gesagt: mit Web Components lassen sich Bausteine erstellen, die beispielsweise in einem CMS-System zusammengefügt und mit Inhalten angereichert werden können, wie einheitliche Schriftgrößen oder Schriftarten. Jeder Baustein besteht aus eigenem HTML, CSS und JavaScript und ist damit überall einsetzbar.
Die Vorteile im Überblick:
Standardisierung
Da Web Components standardisiert sind, ist es möglich, sie überall zu verwenden. So können sie sowohl in älteren Technologien wie MVC (Model View Controller) eingesetzt werden, aber auch in modernen Frameworks wie Angular, React oder Vue.js. Darüber hinaus werden Web Components von allen aktuellen Browsern unterstützt.
Wiederverwendbarkeit & Unabhängigkeit
Einmal entwickelt können Web Components an ganz unterschiedlichen Stellen wiederverwendet werden. Durch Shadow DOM ist es außerdem möglich, vollständig isolierte bzw. eigenständige (abgekapselte) Komponenten zu bauen, d. h. man ist nicht davon abhängig, wie und ob sie miteinander funktionieren.
Zeitersparnis
Aufgrund des Responsive Designs passen sich die Komponenten der Bildschirm- oder Gerätegröße an, ohne dass zusätzliches Markup geschrieben werden muss.
SEO-Funktionalität
Durch Trennung von funktionalem und inhaltlichem Markup sind Web Components bestens für SEO geeignet.
Da Web Components alle Voraussetzungen erfüllen konnten, die uns VEGA Grieshaber gestellt hatte, lag es für uns auf der Hand, dass wir damit arbeiten werden.
Unser Fazit
Als Team aus erfahrenen Angular Entwicklern sorgte die Entwicklung von Web Components für frischen Wind – eine willkommene Abwechslung, die an einigen Stellen auch ein Umdenken erforderte. Und obwohl wir unsere Komfortzone verlassen mussten, kann sich das Ergebnis mehr als sehen lassen.
Sie möchten Ihre Website aufs nächste Level heben? Wir freuen uns von Ihnen zu hören!
