BlogWas macht ihr eigentlich?Was machst du eigentlich, Benedikt?

Was machst du eigentlich, Benedikt?

 

Die Arbeit als Web-Frontend-Entwickler

Meine Arbeit als Frontend-Entwickler ist sehr vielseitig, da ich die Verbindung zwischen der Benutzererfahrung und der zugrunde liegenden Logik einer Software herstelle. Ich bin verantwortlich dafür, das Design, die Implementierung und die Optimierung der Benutzeroberfläche einer Anwendung zu vereinen. Für diese Arbeit benötige ich ein tiefes Verständnis von verschiedenen Webtechnologien, Designprinzipien und Benutzererfahrung.

Ich arbeite hierbei immer eng mit den UX-Designern und Backend-Entwicklern zusammen. Die UX-Designer liefern mir ihre Ideen und ich „hauche“ diesen sozusagen Leben ein, indem ich den erstellten Konzepten und Designs eine Funktionalität gebe und sie in Code umwandle. Das Backend wiederum liefert mir die Daten, die auf der Webseite für den Nutzer angezeigt werden sollen. Diese werden von mir so verarbeitet, dass sie für den Nutzer leicht verständlich sind.

meme

Mit welchen Werkzeugen arbeite ich?

Meine grundlegendsten Werkzeuge sind HTML, CSS und Javascript. Kurz gesagt: Mit HTML gebe ich einer Website Struktur, mit CSS mache ich sie schön und mit JavaScript ermögliche ich die Implementierung von interaktiven Elementen und die Kommunikation mit dem Backend.

Neben diesen grundlegenden Technologien nutze ich Frameworks und Bibliotheken, um die Entwicklung zu beschleunigen und komplexere Logik zu implementieren. In meinem aktuellen Projekt arbeite ich mit Vue.js, nachdem ich zuvor viele Jahre in diversen anderen Projekten mit Angular gearbeitet habe.

Was ist sonst noch wichtig?

Barrierefreiheit

Ein weiterer wichtiger Aspekt meiner Arbeit ist die Gewährleistung der Barrierefreiheit und Responsivität der Benutzeroberfläche. Dies bedeutet, sicherzustellen, dass die Anwendung für Menschen mit Behinderungen zugänglich ist und dass sie auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert. Dies erfordert oft das Testen auf verschiedenen Plattformen und Browsern.

Kommunikation

Kommunikation spielt in meinem Arbeitsalltag eine große Rolle. Beispielsweise wenn bei der Entwicklung auffällt, dass das Konzept eines UX-Designers in der Praxis nicht so aufgeht wie gedacht. Hierbei hilft der ständige Austausch mit den Kollegen und Kolleginnen und die stetige Iteration über Designs und Konzepte, um die Benutzerfreundlichkeit immer weiter zu verbessern, bis ein optimales Ergebnis erzielt wurde. Auch die Implementation von A/B-Tests können dabei helfen die Benutzerfreundlichkeit der Applikation auf ein neues Level zu heben.

pexels cottonbro 7438102

Wartung und Optimierung

Ein weiterer wichtiger, manchmal auch mühsamer, Aspekt meiner Arbeit ist die laufende Wartung und Optimierung. Da Technologien sich ständig weiterentwickeln und neue Anforderungen entstehen, ist es wichtig, dass die Applikation und die verwendeten Frameworks und Libraries regelmäßig gewartet und aktualisiert werden, um sicherzustellen, dass sie den aktuellen Standards entsprechen.

Insgesamt erfordert meine Arbeit als Frontend-Entwickler sowohl technische Fähigkeiten als auch kreatives Denken und die Fähigkeit, komplexe Probleme zu lösen und gleichzeitig die Bedürfnisse der Benutzer im Auge zu behalten. Dies ist eine wichtige Aufgabe, die unter anderem entscheidend für den Erfolg einer Softwareanwendung ist.

Und was mache ich jetzt eigentlich bei der Bahn?

Bei der Bahn arbeite ich konkret an der Website bahn.de, über die Millionen von Kunden jeden Tag ihre Bahntickets buchen, Fahrtpläne checken, oder ihr BahnBonus-Konto verwalten. Diese Arbeit bringt viel Verantwortung mit sich, da die Seite das Online-Aushängeschild der Bahn ist.

Um etwas mehr ins Detail zu gehen, hier eine genauere Erklärung. Bei bahn.de entwickle ich mit vier anderen Teams das Frontend und die Middleware. Wie schon weiter oben beschrieben, arbeite ich bei der Entwicklung des Frontends eng mit unseren UX-Designern zusammen. Die Middleware hingegen ist unsere Schnittstelle zu den verschiedenen Backends der Bahn. Diese unterscheiden sich nämlich je nach Fachlichkeit. Unsere Middleware hat die Aufgabe alle diese Backends anzusprechen, die gesammelten Daten zu bündeln und an unser Frontend zu liefern. So sparen wir uns im Frontend die Kommunikation mit mehreren Schnittstellen und müssen bei Anfragen nur die Middleware ansteuern.

Im Frontend verwenden wir das Framework Vue.js. Wobei das .js an dieser Stelle nicht ganz stimmt da wir eigentlich TypeScript benutzen. Dabei handelt es sich um ein Superset von JavaScript. Für uns als Entwickler bedeutet das weniger fehleranfälliger und viel besser wartbarer Code, da wir auf Typisierung und andere hilfreiche Werkzeuge Zugriff haben. Der Mythos Webentwicklung und JavaScript sei der „wilde Westen“ ist dank TypeScript (fast ;)) Geschichte.

Bei Vue.js handelt es sich um ein flexibles JavaScript-Framework für das Erstellen interaktiver Webanwendungen durch eine reaktive Datenbindung und eine komponentenbasierte Architektur. Die von uns aktuell benutzte Version ist Vue3.

Neben Vue3 zur Komponenten-Entwicklung benutzen wir noch Jest um diese Komponenten im Rahmen von Unit-Tests zu testen. Diese testen die Funktionalität der einzelnen Komponenten und sollen sicherstellen, dass bei Änderungen der Komponente alle gewünschten Funktionen erhalten bleiben.

Außerdem verwenden wir Playwright für unsere Single-Page-Test, Component-Test und e2e-Tests. Unsere Single-Page-Tests und Component-Tests sind UI-Tests, die dafür da sind, einen bestehenden Screenshot (SOLL) mit einem aktuellen Screenshot (IST) zu vergleichen. So kann der Entwickler schnell sehen ob seine Änderungen ungewollte Auswirkungen auf das User-Interface der Applikation haben. e2e-Tests wiederum spielen verschiedene Use-Cases der App durch. Also beispielsweise alle Schritte von der Suche einer Verbindung bis hin zum Abschluss der Buchung. Schlagen diese Tests fehl, weiß der Entwickler, dass seine Änderungen essenzielle Funktionalitäten der Applikation ausgehebelt haben. All diese Tests sind dafür da, um die Applikation besser wartbar zu machen und die Implementation von Fehlern zu verhindern. Die führt wiederum zu einer robusten und gut funktionierenden Applikation.

Kann man auch sehen, was du „gebaut“ hast?

Klar! Nach inzwischen zwei Jahren im Projekt hatte ich meine Finger schon so an einigen Stellen im Projekt. Hier einmal eine kleine Auswahl:

Das erste Feature, mit dem ich vor zwei Jahren gestartet habe, war die anonyme Auftragssuche. Diese erlaubt es Benutzern der Applikation auch ohne Anmeldung alle nötigen Informationen zu ihrer gebuchten Reise abzurufen.

Eines der größten Themen an dem mein Team und ich in den letzten Jahren gearbeitet haben, war jedoch die Migration von Vue2 zu Vue3. Diese Migration bedeutet ein Upgrade auf eine leistungsstärkere Version mit einer neuen Composition API, verbesserter Reaktivität, Performanceoptimierungen und besserer TypeScript-Unterstützung. Es erfordert eine Überarbeitung des Codes, um die neuen Funktionen zu nutzen. Dank der Anleitungen der Vue-Dokumentation erfolgte ein reibungsloser Übergang. Bei über 900 Komponenten kann man sich vorstellen, dass das ein großer Arbeitsaufwand war. Insbesondere wenn diese externe Bibliotheken verwenden, die noch keine Unterstützung für Vue 3 bieten.

Die Internationalisierung von bahn.de war ein weiterer wichtiger Schritt, den mein Team und ich vorangetrieben haben. Hier wurde sichergestellt, dass unsere Plattform für Nutzer aus verschiedenen Ländern zugänglich ist. Wir haben dafür gesorgt, dass alle Texte und Inhalte dynamisch übersetzt werden können und dass die Benutzeroberfläche an die Spracheinstellungen des Nutzers angepasst wird.

Auch waren mein Team und ich für die Implementierung der automatischen BIC-Suche beim SEPA-Lastschriftverfahren und der damit zusammenhängenden Logik der BIC-Eingabe verantwortlich.

Und wie geht’s weiter?

Aktuell arbeiten mein Team und ich an der Implementation der Google Maps JS Api. Bei diesem Feature geht es darum eine Karte in unsere Applikation zu integrieren die alle Bahnhöfe und Haltstellen von Fern- und Nahverkehr in Deutschland anzeigt. Das soll dem Nutzer eine bessere Übersicht darüber geben, wo er sich aktuell befindet und welche Transportationsmöglichkeiten in der Nähe sind. Dieses Feature könnt ihr hoffentlich schon in baldiger Zukunft selbst nutzen.