Zusammenfassung
GIRA ist ein deutscher Hersteller von Smart-Home-Geräten. Im Rahmen des Projekts wurde ich als Senior Frontend-Entwickler beauftragt, eine Anwendung zu entwickeln, die es dem Nutzer ermöglicht, die Konfiguration eines Smart-Home-Systems vorzunehmen. Eine besondere Herausforderung bestand darin, die Anwendung in die bestehende Codebase und Systemlandschaft einzubetten.
Gemeinsam mit einem Team von 5 Entwicklern haben wir in einem Zeitraum von ca. 11 Monaten eine Anwendung entwickelt, die den gestellten Anforderungen entspricht. Die Entwicklung erfolgte mit bestehenden Technologien wie Knockout und Webpack. Die Funktionalität der Anwendung wurde mithilfe von Karma, Jasmine und Vitest überprüft, während die E2E-Tests mit Playwright durchgeführt wurden. Des Weiteren wurde die Anwendung mit GitLab CI getestet, gebaut und deployed.
Kern-Funktionen
- 🧙🏻 Kontrolle von Smart Home Geräten über Web-Oberfläche (Single-Page-Application)
- 📡 Kommunikation mit Smart Home Geräten über WebSockets
- 🏠 Aufbau einer Web-Components-Bibliothek (Quelle ist Svelte)
- 👌🏻 Hohe Testabdeckung (Unit-Tests, E2E-Tests)
Meine Rolle
Das Entwicklungsteam kannte sich bereits mehrere Jahre und hatte bereits mehrere Projekte gemeinsam umgesetzt. Die Codebase war bereits sehr groß und komplex. Die Herausforderung bestand darin, die Anwendung in die bestehende Codebase zu integrieren und dabei die bestehenden Konventionen und Patterns zu beachten.
Meine Aufgabe war es, an täglich anfallenden Aufgaben und beschriebenen Anforderungen mitzuarbeiten, aber auch neue Impulse zu setzen und neue Technologien einzuführen. So habe ich beispielsweise die Einführung von Vitest als neues Unit-Testframework und Playwright als E2E-Testframework vorangetrieben. Darüber hinaus habe ich an der Entwicklung einer neuen Web-Components-Bibliothek mitgewirkt. Diese Bibliothek wurde in Svelte entwickelt und sollte in Zukunft die bestehende Bibliothek ablösen.
Lessons Learned
Das Projekt war für mich eine große Herausforderung, da ich in einem bestehenden Team mit einer großen Codebase und komplexen Systemlandschaft arbeiten musste. Ich habe gelernt, wie wichtig es ist, sich in ein bestehendes Team zu integrieren und sich an die bestehenden Konventionen und Patterns zu halten.
Überdies konnte ich durch die Verwendung von Knockout, hinter die Kulissen von modernen Web-Frameworks schauen. Knockout wird oft als Vorläufer dieser bezeichnet. So bietet Knockout mit den observables
reactive Datenstrukturen, die sich mit denen von Vue, React oder Svelte vergleichen lassen. Auch die Verwendung von computed
und subscriptions
ist mit den modernen Frameworks vergleichbar.
Verwendete Technologien
- Frameworks: Knockout & Svelte
- Language: Typescript
- Unit Tests: Vitest & Testing library
- E2E Tests: Playwright
- CI: Gitlab
Live-Demo oder Repository
Das Produkt selbst ist noch nicht veröffentlicht.