Sebastian Stöhr

"exos" ist das Frontend-Framework von 1&1 IONOS, das für die Umsetzung vieler Frontends (z.B. dem 1&1 IONOS Control Center) verwendet wird.

Die Zeit vor exos

Die Frontend-Codebasis des 1&1 IONOS Control Centers ist über die Jahre gewachsen und war – da mehrere Teams ohne gemeinsamen Zielbild daran gearbeitet haben – unübersichtlich und undokumentiert.

Dies wurde zunehmend zum Problem: Die Umsetzung neuer Features dauerte länger und es gab immer wieder überraschende Fehler. Bugfixes bargen immer das Risiko großer negativer Seiteneffekte. Die Einarbeitung neuer Mitarbeiter war anspruchsvoll, da es einiger Erfahrung und Spezialwissens bedurfte, um styleguide-konforme Frontends mit dem vorhandenen CSS-Framework zu schreiben.

Außerdem war das bestehende CSS-Framework eng mit dem internen Java-Framework verwoben. Dies erschwerte den Einsatz von state-of-the-art OpenSource-Tools und auch ein Framework-Wechsel war nur schwer möglich. 

Modernes CSS und JavaScript mit exos

Daher entschlossen wir uns, dass wir im laufenden Betrieb unser CSS- und JavaScript-Framework erneuern wollten.

Um die bestehenden Probleme in den Griff zu bekommen und das wild wuchernde CSS zu bändigen, entschlossen wir uns für eine CSS Methodologie. Unsere Wahl fiel dabei auf Block-Element-Modifier (BEM) und ein paar ergänzender Regeln.
Auch wenn die Namenskonventionen von BEM auf den ersten Blick befremdlich wirken können, so stellen die BEM-Konventionen (relativ) sicher, dass die CSS-Regeln logisch geschnitten werden und Anpassungen an einem Block nur lokal auf diesen Block Auswirkungen haben.
Mit gemeinsam beschlossenen Stylelint-Regeln stellen wir zudem sicher, dass Best-Practices eingehalten werden. So ist beispielsweise der Einsatz von "!important" grundsätzlich nicht erlaubt – dies war in der alten Codebasis einer der Gründe für schwierig zu wartenden Code.

Neben CSS enthält exos auch das benötigte JavaScript für die enthaltenen Komponenten. Da exos mit beliebigen JS-Frameworks kombinierbar sein soll, wird das JavaScript "vanilla" entwickelt – d.h. exos selbst hat keine Abhängigkeit zu einer JavaScript-Bibliothek/Framework.

exos wird mit webpack, PostCSS (z.B. Autoprefixer), SASS und Babel entwickelt. 

Dokumentation ist King

Natürlich wurde auch die fehlende Dokumentation mit exos gelöst: Aus dem exos Quellcode wird die passende Dokumentation – inkl. Vorschau und Beispielcode der Komponenten – generiert. So ist die Nutzung sowohl für erfahrende und weniger erfahrende Frontend-Entwickler sehr einfach möglich.

Die Migration

Die Migration im laufenden Betrieb war alles andere als leicht. Um möglichst schnell von dem neuen Technologie-Stack zu profitieren, haben wir uns dazu entschlossen, das alte CSS mitzubundeln. So gibt es exos nun in zwei Versionen: einmal abwärtskompatibel und einmal als kleine standalone Variante.

Im ersten Schritt haben wir alle Anwendungen auf die abwärtskompatible Version umgestellt und anschließend Seite für Seite migriert. Sobald alle Seiten umgestellt waren, wurde auf die Ressourcen schonendere Standalone-Variante umgestellt.
(Neue Anwendungen wurden selbstverständlich direkt mit der Standalone-Variante umgesetzt)

Hat sich der Aufwand gelohnt?

exos konnte sich bereits mehrfach innerhalb von Projekten beweisen: So sind neue Seiten deutlich schneller als früher umzusetzen. Da exos keine Abhängigkeiten zum internen Java-Framework mehr hat, konnten auch bereits Anwendungen mit anderen Technologien (z.B. PHP basiert) auf exos umgestellt werden. Sogar Teams von anderen 1&1 IONOS Standorten haben exos bereits erfolgreich eingesetzt.

Eingesetze Technologien (Auszug):

• Babel
• PostCSS
• autoprefixer
• bem
• css
• javascript
• sass
• webpack