Marius Bleuer und Yves Tscherry, Frontend Engineers bei Unic, haben den Relaunch von sbb.ch mitgeprägt. Sie erzählen über die Frontend-spezifischen Zielsetzungen und Herausforderungen des Projekts.
Frontend-Ziele & -Besonderheiten beim Relaunch von sbb.ch
Welche Frontend-spezifischen Zielsetzungen haben eure Arbeit angeleitet?
Ziel war ein visuell reduziertes, attraktives, robustes und zugängliches Frontend. Die Benutzeroberfläche sollte sowohl performant als auch ressourcenschonend sein – unabhängig davon, ob die Benutzer:innen ein etwas älteren Smartphone oder ein Endgerät mit einem 5K-Display verwenden. Das von uns erstellte Frontend-Framework sollte sicherstellen, dass die verschiedenen Kanäle trotz unterschiedlicher Release-Zyklen und Backend-Technologien in einem einheitlichen Aussehen und Interaktionsverhalten daherkommen. Gleichzeitig sollte es den Aufwand reduzieren, die Basis-Komponenten barrierefrei zu gestalten.
Das Unic-Frontend-Team hat bisher im Umfang von mehr als 1'200 Arbeitstagen am Relaunch und an der Weiterentwicklung von sbb.ch mitgearbeitet. Welches waren aus eurer Sicht die Frontend-spezifischen Besonderheiten in diesem Projekt?
Besonders war sicherlich die Teamgrösse: Zeitweise umfasste das Projektteam bis zu sechs Frontend-Entwickler:innen alleine auf der WCMS-Seite. Hinzu kamen Schnittstellen zu den Entwickler:innen des Webshop-Teams und anderer Umsysteme. Sie entwickelten ihre Bereiche auf der Basis des von uns erstellten Frameworsk weiter. Oder sie verwendeten Komponenten des Basis-Framework als Ausgangslage für ihre Arbeit. Um in einer solchen Teamgrösse stringent und effizient zu arbeiten, sind Vertrauen, eine klare und offene Kommunikation sowie eine grosse Hingabe zum Detail von allen unabdingbar.
Um in einem so grossen Team Hand in Hand arbeiten zu können, braucht es Vertrauen, eine klare und offene Kommunikation sowie eine grosse Hingabe zum Detail von allen.
Marius Bleuer
Senior Frontend Engineer, Unic
Die Komplexität des Projektes zeigt sich auch an der Anzahl verschiedener Disziplinen, die im Projekt mitgearbeitet haben. Wie hat es das Projektteam geschafft, dass die verschiedenen Disziplinen immer Hand in Hand gearbeitet haben?
Selbstverständlich lief auch bei uns nicht immer alles Hand in Hand. Ein Projekt dieser Grösse und Dauer unterliegt den verschiedensten Einflüssen, Strömungen und Veränderungen, die man nicht immer komplett selbst steuern kann. Durch das agile Vorgehen haben wir stets versucht, den Mehrwert für die Kunden der SBB ins Zentrum zu stellen und unsere Arbeit darauf auszurichten.
Ein zentrales Element der erfolgreichen Zusammenarbeit ist die ständige Präsenz des Frontend-Teams bei der SBB vor Ort. Die räumliche Nähe und der tägliche Austausch bilden unter anderem die Basis für die transparente, offene und ehrliche Kommunikation. Diese erlaubt es allen Mitgliedern des Scrum-Teams jederzeit, Entscheide kritisch zu hinterfragen und Bedenken zu äussern. Gleichzeitig hat das Team seit Beginn des Relaunch-Projektes eine aktive Kommunikation nach innen und aussen gesucht und versucht, alle im Projekt involvierten Parteien wann immer möglich frühzeitig abzuholen.
Spannungsfelder & Herausforderungen im Projekt
Mit welchen Spannungsfeldern musstet ihr im Projekt umgehen?
Praktisch jede Person in der Schweiz hat eine dedizierte Meinung, wie sbb.ch aussehen und funktionieren soll. Hier die richtige Lösung zu finden, ist knifflig: Geht man zu viele Kompromisse ein, macht man es am Schluss niemandem recht. Wir haben uns für einen vorausschauenden, progressiven Ansatz entschieden, der bewusst einen Bruch zur alten Website bedeutete. Dass wir damit polarisieren würden, war uns bewusst.
Ein zweites Spannungsfeld zeigte sich an der Schnittstelle zwischen Design, Konzeption und Frontend-Entwicklung: Während das Design und die Konzeption manchmal die Grenzen des Machbaren ausloteten, entschieden wir uns in der Umsetzung des Frontend im agilen Entwicklungsprozess öfter für einen pragmatischeren Ansatz. Damit haben wir dem Kosten-/ Nutzen-Aspekt sowie der allgemeinen Stabilität eines Features Rechnung getragen.
Welches waren die grössten Herausforderungen aus Frontend-Sicht im Projekt?
Wir hatten die Aufgabe, die drei existierenden Websites von sbb.ch zu einer gemeinsamen Codebasis zu vereinen. Ziel war, alle Inhalte und Funktionalitäten auf unterschiedlichsten Endgeräten und Bildschirmgrössen zur Verfügung stellen zu können.Um die Zugänglichkeit für Leute mit Einschränkungen zu gewährleisten, muss die ganze Website zudem über die Tastatur und mittels Screenreader-Software bedient werden können. Diese Anforderung umzusetzen, erfordert sehr viel Fachwissen und Erfahrung. Alleine die Differenzierung der unterschiedlichen Möglichkeiten einer Eingabe bergen manchmal ungeahnte Tücken.
Damit das Frontend möglichst ressourcenschonend, aber dennoch attraktiv daherkommt, haben wir verschiedentlich tief in die Trickkiste greifen müssen und nach Möglichkeit die neusten Browser-APIs genutzt. In Browsern, die die neue Intersection-Observer API unterstützen, funktioniert die Uhr im Footer von sbb.ch zum Beispiel nur, wenn sie im sichtbaren Bereich ist. So vermeiden wir, dass der Akku und die Grafikkarte des Mobiltelefons unnötig belastet wird.Auf der Website gibt es eine Vielzahl kleinerer und grösserer Performance-Optimierungen, die der Benutzer gar nicht bemerkt. Das Ziel war, auf jeder Seite jeweils nur so viel zu laden, wie der Besucher gerade sieht und konsumiert. Obschon uns dies schon nicht schlecht gelungen ist, arbeiten wir hier noch an der einen oder anderen Verbesserung, die in den kommenden Monaten implementiert wird.
Die SBB hat mit ihrer Website die grösste Reichweite in der Schweiz. Performance und Barrierefreiheit waren entsprechend zentrale Anforderungen im Projekt.
Marius Bleuer
Senior Frontend Engineer, Unic
Laufende Performance-Optimierungen für sbb.ch
Ihr habt die Performance zu einer zentralen Anforderung im Projekt gemacht. Welchen Einfluss hat dies auf eure Entwicklertätigkeit gehabt?
Zunächst galt es, bei allen Projektbeteiligten ein Bewusstsein zu schaffen, wieso die Performance einen solch zentralen Stellenwert einnehmen muss. Wer sich nicht täglich mit dem Thema auseinandersetzt, hat manchmal zu Beginn Mühe zu verstehen, wieso Investitionen sinnvoll sind, die zu Performance-Verbesserungen im Sekunden- oder Millisekunden-Bereich führen. Dank den mittlerweile in grosser Zahl verfügbaren Statistiken und Tools (z.B. https://www.webpagetest.org/), mit denen sich das Ladeverhalten einfach visualisieren und vergleichen lässt, kann der Nutzen für die jeweiligen Interessensgruppen jedoch relativ simpel erklärt werden.
Im Hinblick auf eine mögliche spätere Verwendung von http2 drängten wir schon Anfang Januar 2016 auf eine komplette Umstellung und Verschlüsselung aller Verbindungen auf SSL für den Relaunch von sbb.ch. Daneben initiierten wir ein Content Delivery Network (CDN), welches gewisse Assets wie die SBB-eigenen Web-Schriften anderen Kanälen und Anwendungen zur Verfügung stellt. Damit profitieren die Besucher von bereits zwischengespeicherten Dateien, wenn sie sich durch das SBB-Universum bewegen, und für die SBB entfällt ein kleiner Teil von unnötigem Datenverkehr.
Grundsätzlich evaluieren wir alle neuen Features unter dem Aspekt der Performance und versuchen ressourcenschonende und performante Lösungen zu finden. Dabei erarbeiteten und verwendeten wir im Verlaufe des Projektes den oben genannten CDN auf http2-Basis mitsamt Brotli-Kompression, verschiedene Caching- und spekulative Vorlademechanismen, asynchrones Nachladen von Bildern und Skripten, das automatisierte Code Splitting pro Seitenbereich und viele weitere Optimierungen.
Seit einigen Monaten überwachen wir die Frontend-Performance aktiv und versuchen sie mit jedem Release zusätzlich zu verbessern. Dabei hinterfragen wir oft bestehende «Best Practices» mit neusten Kenntnissen und probieren Lösungen direkt am System aus. Aktuell arbeiten wir zusammen mit den Backend-Entwicklern von One Inside an der Integration eines externen Image-CDN, der Bilder in naher Zukunft noch effizienter und optimierter an die Besucher ausliefern wird.
Wir hinterfragen oft bestehende «Best Practices» mit neusten Kenntnissen und probieren Lösungen direkt am System aus.
Yves Tscherry
Senior Frontend Engineer, Unic
Zentrale Anforderung: Die Barrierefreiheit
Das Thema Barrierefreiheit hat bei sbb.ch einen hohen Stellenwert. Wie habt ihr diese Anforderungen integrieren können? Wo gab es die grössten Herausforderungen?
Unic versucht grundsätzlich, alle Anwendungen so barrierefrei wie möglich zu gestalten. Bei einem Projekt mit der Grösse und Komplexität von sbb.ch stellen sich aber ganz neue Herausforderungen. Die Bedienung der diversen Screenreader während der Entwicklung erfordert von den Entwicklern viel Einarbeitungszeit, Geduld und Empathie. Zudem benötigt es Erfahrung, um zu wissen, was die erwartete Ausgabe im jeweiligen Screenreader ist. Zumal diese je nach Browser- und Screenreader-Kombination und gewählter Sprache variieren kann.
Viele verstehen die Barrierefreiheit im Hinblick auf die Zertifizierung als Kontrollpunkt, den es zu passieren und abzuhaken gilt. In der agilen Entwicklung befindet sich das Produkt jedoch in stetiger Transformation. Von der Frontend-Entwicklung bis zum produktiven Einsatz braucht es viele Schritte, die Raum für Fehler bieten. Selbst wenn man sich also frühzeitig um eine Validierung bemüht, ist prinzipiell eine Re-Validierung nach jedem Schritt nötig. Persönlich halte ich daher wenig von einer Zertifizierung zu einem bestimmten Zeitpunkt, sondern sehe die Barrierefreiheit als stetig präsente Anforderung im agilen Prozess.
Ich sehe die Barrierefreiheit als stetig präsente Anforderung im agilen Prozess.
Marius Bleuer
Senior Frontend Engineer, Unic
Um diesem Umstand in Zukunft besser gerecht werden zu können, muss das Wissen aber noch deutlich breiter abgestützt werden. Eine gute Zugänglichkeit zu erreichen, ist eine Teamarbeit, die von der Konzeption über die Programmierung bis hin zu der Inhaltserstellung und -erfassung alle Rollen der digitalen Produktion betrifft. Aktuell lasten das Wissen und die Verantwortung in vielen Fällen noch zu stark auf den Schultern der Frontend-Entwicklung.
Agiles Projektvorgehen
Wie hat das agile Projektvorgehen eure Arbeit als FE-Entwickler beeinflusst?
Ganz im Sinne des Hashtags #unterwegsmitdersbb bilden wir mit den Backend-Entwicklern von One Inside und den internen Mitarbeitenden der SBB ein firmenübergreifendes Scrum-Team. Der agile Entwicklungsprozess erfordert viel Freiraum, Engagement, Transparenz und Vertrauen von den involvierten Entwicklern bis hin zum Management. Der agile Prozess gibt uns Raum, die Anforderungen aus Kundensicht kritisch zu hinterfragen und den Kundennutzen ins Zentrum zu stellen. Er erlaubt uns, in kurzen Abständen unsere Arbeitsergebnisse mit den Stakeholdern zu evaluieren, unser Tun zu reflektieren und die notwendigen Anpassungen vorzunehmen. Nur so können wir uns, soweit es die aktuellen Strukturen zulassen, persönlich und auch als Team weiterentwickeln.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Jörg Nölke und Gerrit Taaks (von links nach rechts).
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Melanie Klühe, Stefanie Berger, Stephan Handschin und Philippe Surber (im Uhrzeigersinn).
