inovex Meetup: Erfahrungsberichte – Wie kann man digitale Qualität in Projekten sicherstellen?

inovex GmbH

In Köln

Hey Tech Heads, digitale Qualität beschäftigt uns in unseren Projekten – von der Continuous Delivery bis zu UI-Komponenten. Heute Abend betrachten wir deshalb Tools, die helfen, digitale Qualität sicherzustellen sowie eine Komponentenbibliothek, die wir bei einem unserer Kunden eingeführt haben, um Effizienz und Konsistenz zu steigern.

Vorläufiger Zeitplan:

18:30 Uhr Doors Open
19:00 Uhr Talk 1

„How to build a high-performance web app and how to keep it top notch“
Jacob Cofmann (inovex)

In der heutigen Zeit werden Web-Anwendungen immer populärer und noch bis vor einigen Jahren als klassisch angesehene native Anwendungen werden ins Web portiert. Das bedeutet aber auch, dass Web-Anwendungen nicht mehr nur einfache statische Websites sind, sondern vielmehr große, interaktive Anwendungen, über einen Browser aufrufbar.

In den letzten fünf Jahren ist die durchschnittliche Größe von Web-Anwendungen um etwa das doppelte angestiegen (siehe https://httparchive.org/). Das bedeutet, dass deutlich mehr Code, Bilder und Videos über die Internetleitung an die Nutzer transportiert werden. Das ist problematisch, denn dadurch werden die Anwendungen schwerfälliger und laden langsamer. Um dies zu verhindern wurden verschiedene neue Best Practices und Mechanismen etabliert. Häufig werden in modernen Web-Projekten Frameworks wie React, Vue und Angular eingesetzt. All diese sind zum Projektbeginn performant, doch mit der Zeit wächst der Funktionsumfang einer Webanwendung und sie wird immer größer. Dadurch sinkt die Performance und die Ladezeit erhöht sich.

Ich zeige in diesem Vortrag, wie mit heutigen modernen CI/CD Mitteln, einigen Tools und Open-Source-Projekten wie Lighthouse (https://github.com/GoogleChrome/lighthouse), Webpagetest (https://www.webpagetest.org/) und Bundlesize (https://github.com/siddharthkp/bundlesize), die schon von Projektbeginn an integrierbar sind, grobe Performance-Fehler von vornherein verhindert werden können und somit für den Nutzer ein kontinuierlich performantes Nutzererlebnis geschaffen werden kann.

19:45 Uhr Pizza, Bier & Networking
20:15 Uhr Talk 2

„Visuelle Regressionstests mit puppeteer und pixelmatch in Production: Wie wir damit die Qualität unserer Komponentenbibliothek hoch halten“
Alexander Ehmann (ERGODirekt) & Robert Seibert (inovex)

Für unseren Kunden ERGO Direkt entwickeln wir seit 18 Monaten eine kontinuierlich wachsende React-Komponentenbibliothek, die von immer mehr Teams eingesetzt wird.

Bevor es die Komponentenbibliothek gab, haben alle Entwicklerteams die Design-Vorgaben selbst in React-Komponenten umgebaut. Was zum Nachteil hatte, dass diese Arbeit immer mehrfach gemacht wurde, die jeweiligen Implementierungen sich unterschieden haben, Design-Updates mehrfach nachgepflegt werden müssen und die generelle Qualität bedingt durch Liefertermine negativ beeinflusst wird.

Die Komponentenbibliothek löst alle diese Probleme, indem sie zentral und nur einmal mit hohem Qualitätsbewusstsein gepflegt wird, leicht von allen Entwicklern eingesetzt und geupdated werden kann, wenn neue Features oder Bugfixes zur Verfügung stehen.

Über die Zeit sind immer mehr Komponenten und auch Themes dazu gekommen, welche zu einer Multiplikation der Varianten der Komponenten führte und leicht unabsichtlich grafische Bugs entstehen ließ, welche erst in Produktion bemerkt wurden. Deshalb haben wir, um eine fortlaufend hohe Qualität zu gewähren, neben den Unit-Tests seit neun Monaten auch visuelle Regressionstests in unsere Pipeline eingebaut. Bei diesen Tests werden Screenshots von den Komponenten gemacht und gegen Referenzbilder verglichen, um etwaige ungewollte Änderungen abzufangen, bevor sie ausgeliefert werden.

Nach einer kurzen Einleitung aus Sicht eines Product Owners zur Motivation einer Komponentenbibliothek und deren Qualitätsansprüchen, geben wir einen Einblick in unser technisches Setup und teilen, was wir dabei gelernt haben und wann und warum es Sinn macht, visuelle Regressionstests durchzuführen.

Das Meetup ist kostenlos, für Pizza und Getränke ist wie immer gesorgt.

Veranstaltungsort: inovex GmbH Schanzenstraße 6–20, Gebäude 1.13, 51063 Köln

Anmeldungen bitte über unsere Meetup-Webseite. Wir freuen uns auf euch!

Mo Di Mi Do Fr Sa So
24 25 26 27 28 29 30
01 02 03 04 05 06 07
08 09 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 01 02 03 04
Jörg Ruckelshauß

Kontakt

Jörg Ruckelshauß

Head of Marketing & Communications

Aktuelle News über inovex und die Branche

inovex Newsletter

Sie möchten regelmäßig über unsere aktuellen Events informiert werden? Dann abonnieren Sie unseren monatlichen Newsletter!

Jetzt hier anmelden!