Frontend Development bei valantic

Claudio Schäpper & Jan Widmer geben Einblicke anhand des V-Zug-Projekts

Du bist Frontend Developer*in und auf der Suche nach der nächsten beruflichen Challenge? Dann solltest du unbedingt weiterlesen! Claudio und Jan verraten dir, was dich bei valantic erwartet und geben Einblick in das spannende V-Zug-Projekt.

Claudio und Jan, stellt euch doch bitte kurz vor.

Claudio: Während meines Studiums – Dipl. Techniker Medientechnik – an der FH entwickelte sich mein Interesse für Frontend Development. Parallel dazu sammelte ich bei kleineren Webprojekten erste Erfahrungen im Projektmanagement. Bei valantic (damals noch Movento) startete ich 2016 als Junior-Entwickler und sammelte in dieser Zeit erste Erfahrungen mit Frontend Frameworks und SAP Hybris. Anfangs war das Ember.js mit SAP Hybris Backends, später bauten wir das Frontend für Hybris Projekte meist mit Vue.js. Für kurze Zeit habe ich auch das Frontend mit Vue.js für Pimcore Backends entwickelt. Danach lag der Fokus aber wieder auf Hybris-Projekten – vermehrt mit Composable Storefront Frontends – später folgten die ersten Schritte in Angular.

Abgesehen davon bin ich in Egnach am Bodensee aufgewachsen und lebe schon seit einigen Jahren mit meiner Partnerin in der Stadt St. Gallen. Ich verbringe gerne Zeit in der Natur, geniesse ausgedehnte Spaziergänge mit unserem Hund und bin gerne mit dem SUP auf dem Wasser unterwegs. Wenn Zeit bleibt, koche ich sehr gerne und verbringe einen gemütlichen Abend mit Freunden und Familie. Bei Heimspielen des FC St. Gallen gönne ich mir auch mal ein kühles Bier mit Bratwurst (natürlich ohne Senf).

Jan: Seit 2012 habe ich als Frontend Engineer für die verschiedensten Systeme in diversen Branchen Frontend-Lösungen entwickelt. In den Anfängen waren dies E-Commerce-Projekte, damals noch mit Hybris und dem JSP Stack. Nach einem Ausflug in die Frontend-CMS-Welt von Drupal, Magnolia und Adobe AEM bin ich nun wieder zurück im E-Commerce gelandet und baue Frontend-Lösungen auf der Basis von Angular und Composable Storefront (ehem. Spartacus) für Kundenprojekte mit SAP.

Privat bin ich verheiratet, habe zwei Kinder und wohne in Wallenwil im schönen Thurgau. Nebst Arbeit und Familie treibe ich gerne Sport, fotografiere oder beschäftige mich mit der Smart Home, sprich der Automatisierung unseres Hauses.

Beschreibt bitte das V-ZUG-Projekt in drei Sätzen.

Claudio: Ein sehr komplexes und grosses Projekt mit vielen neuen Technologien und parallelem Know-how-Aufbau von allen Seiten. Im Frontend war die Zusammenarbeit zwischen internen V-ZUG-Entwickler*innen und uns sehr engmaschig organisiert und wir konnten viel voneinander lernen. Da ein Schwerpunkt des Projektes auf dem Design lag, machte mir die Umsetzung eines optisch anspruchsvollen Produkts besonders Spaß.

Jan: Ich würde sagen: ein sehr umfangreiches und relativ langwieriges Projekt mit vielen Abhängigkeiten. Da fast alle Bereiche (Technologie, Content, Design, Branding, Produkt-Bilder) gleichzeitig neu gemacht wurden, gab es viele lose Enden, welche es zu verbinden galt. Das Frontend-Team bestand in diversen Projektphasen aus drei involvierten Firmen (inklusive interne IT von V-Zug), weshalb der Wissensaustausch ein wichtiges Thema war. Auch weil viele der Entwickler*innen zum ersten Mal in einem Angular-Projekt arbeiteten.

Auf was seid ihr besonders stolz?

Claudio: Für die meisten Entwickler*innen waren es die ersten Schritte mit Composable Storefront/ Spartacus und auch anderen verwendeten Technologien. Wir konnten diese Gelegenheit nutzen, um gemeinsam Know-how aufzubauen und uns gegenseitig zu unterstützen. Von Beginn an verfolgten wir als Team die gleichen Ziele und es entstand ein Spirit fernab einer klassischen Dienstleister-Kunden-Beziehung. Und natürlich auf das Resultat, denn das gefällt mir sehr gut – wohl eines der schönsten Projekte, an denen ich mitwirken konnte.

Jan: Trotz vieler Abhängigkeiten und so manch anderer Herausforderung haben wir es geschafft, den grossen Meilenstein „Go-live“ zu erreichen. Das Resultat: ein sehr hochwertiges Design, das den Premium-Anspruch von V-ZUG unterstreicht.

Welche technischen Herausforderungen gab es aus Sicht der Entwicklung?

Claudio: Während der Entwicklung traten verschiedene technische Hürden auf, die wir jedoch als Team sehr gut gemeistert haben. Insbesondere die Integration von Spartacus, einem neuen Framework auf Basis von Angular, war für uns eine anspruchsvolle Aufgabe.

Probleme ergaben sich zudem aus dem Zusammenspiel verschiedener Tools, dem Einsatz einer Single Page Application und der Zusammenarbeit von Frontend und Backend. Spezifische Anforderungen, wie Multistep-Formulare und die Einbindung eines externen Ersatzteilshops über iFrames, stellten zusätzliche Herausforderungen dar. Auch das Server Side Rendering erwies sich als knifflig, da nicht immer vorhersehbar war, wie der Server auf bestimmte Codes reagieren würde.

In unserem Team stießen wir auf weitere Challenges, wie die Integration der Customer Data Cloud, eine tiefgehende Suche mit verschiedenen Suchresultat-Typen und Produktvergleiche. Hinzu kamen diverse Newsletter-Abonnements und Anforderungen an Performance-Optimierungen.

Trotz der vielen Herausforderungen konnten wir durch die enge Zusammenarbeit im Team das individuelle Layout reibungslos umsetzen. Nicht zuletzt dank der besonderen Unterstützung von Jan, der mit seinem Vorwissen einen wertvollen Beitrag leistete.

Was würdet ihr heute anders machen?

Claudio: In einigen Bereichen konnten wir im Laufe des Projektes dazulernen, da viele von uns die ersten Erfahrungen mit gewissen Technologien sammelten. So haben wir bereits während des Projektes Learning-Standards entwickelt und auch in das Projekt zurückfließen lassen. In zukünftigen Projekten können wir natürlich von diesen Learnings und Standards profitieren.

Jan: Aus Perspektive des Developments konnten wir im Bereich Angular einiges lernen. Dabei sind Use Cases entstanden, die uns helfen, eine saubere Code-Qualität, projektweite Code-Standards und eine gute Performance für künftige Projekte sicherzustellen.

Wie habt ihr im Team zusammengearbeitet?

Claudio: Der Austausch innerhalb des Entwickler-Teams war sehr direkt – da wir nicht alle am gleichen Standort arbeiteten, kommunizierten wir meist in Chats oder via Calls. Ansonsten war das Projekt nach klassischem SCRUM organisiert mit Dailies, Refinements, Review, Retro- und Planning Meetings.

Jan: Nebst dem eigentlichen Programmieren gibt es in einem so großen Team auch diverse „Meta-Aufgaben“ zu erledigen: Teilnahme an Refinement-Meetings, Absprachen mit Backend, Design und Business-Requirement-Personen, Ausbildung der Entwickler*innen mit weniger Erfahrung, Sicherstellung der Code-Qualität durch Code-Reviews usw. Je größer ein Projekt-Team ist, desto größer wird auch der Anteil an derlei Aufgaben. Es ist daher gut, wenn man sich diese etwas aufteilen kann und so auch noch Zeit zum Programmieren findet. Insbesondere da die anspruchsvollen Features auch gebaut werden wollen.

Was habt ihr als Team und als Unternehmen gelernt?

Jan:

• komplett neues Frontend Framework und Technologie-Stack
• Single Page Application (SPA) Shop
• Komplettes Server Side Rendering (SSR)
• Frontend Unit und End2End-Tests
• von lokaler Spartacus Instanz direkt auf Server-APIs/ Mock-Server zugreifen
• NPM Package zum Mocken vom Backend Hybris für Spartacus (Standard sowie Custom Data für Projekt)
• valantic Spartacus-Template für zukünftige Projekte

Welche Eigenschaften sollte ein*e potentielle*r Senior Frontend Entwickler*in für die Arbeit mit Spartacus mitbringen?

Claudio:

Anforderungen

• gute Angular-Kenntnisse
• gute TypeScript-Kenntnisse
• Im Idealfall:
  • Spartacus-Erfahrung
  • Karma
  • Jasmine
  • Cyress
• Erfahrung mit UX-Design aus dem Webseitenbereich
  • UI / UX Frontend Know-how
  • Meta-Themen wie Performance (Page Speed), SEO, Analytics, Accessibility
  • Erfahrung im Entwickeln von Angular Applications (Dashboards, Admin-Panels, Interne Applications)
  • vor allem ein Interesse für UX-Design und anspruchsvolle Layouts

Was macht diese Projekte besonders?

• Entwickler*innen können das Projekt mitgestalten
• außergewöhnliches B2C-Design
• moderne Technologien:
  • TypeScript
  • CSS3
  • ES2021+
• sehr viele Komponenten und Features
• Rest API Backend via Mock-Server lauffähig
• Entwicklung in einem großen Team mit internen und externen Kolleg*innen
• Wissensaustausch als Team

Das Gespräch mit Claudio und Jan gibt einen tiefen Einblick in die Herausforderungen und Erfahrungen, die das Frontend Development im Rahmen eines Großprojekts mit sich bringt. Auch du fühlst dich von anspruchsvollen Layouts und modernen Technologien angezogen? Dann ist jetzt der perfekte Moment, um dich bei valantic zu bewerben.