Ein dynamisches Frontend für Zeitserver

Projektdauer
März 2023 – August 2023
Technologien & Lösungen
Web Components mit Lit, Typescript
Themen
Frontend
23-03-MoserBear2-1
Puzzle hat für Moser Baer AG eine dynamische Web-Applikation zur Konfiguration der Zeitserver für die Marke MOBATIME entwickelt.
1
Frontend
1
Sekunde Buildzeit
2
Dependencies
viele Zeitsysteme konfigurieren

Moderne Web-Applikation

Für die Konfiguration der Zeitserver bietet die Moser-Baer AG ihren Kund:innen bisher eine RichClient-Applikation an. Dieses Frontend ist nicht mehr zeitgemäss und soll durch eine Web-Applikation ersetzt werden. In einem ersten Schritt wurde ein Lösungskonzept erarbeitet, um die spezifischen Anforderungen an die Laufzeitumgebung und die Sicherheit zu erfüllen. Die neue Web-Applikation wird auf verschiedenen Zeitservern betrieben, eine Internetanbindung ist nicht zwingend vorhanden und die Systeme werden über lange Zeiträume betrieben. Zudem verfügen die Zeitserver nur über eine minimale Laufzeitumgebung in Bezug auf Speicher und Memory (~1MB).

Hansjörg Rohrer
CTO, Moser Baer
«Unsere Zusammenarbeit brachte die erste Geräteserie erfolgreich zur Produktion, dank des Knowhows im Bereich Webinterface, guter Planung und pragmatischen Ansätzen. Die Zusammenarbeit war für uns sehr angenehm.»

Dynamisches Rendering mit Web Components

Das neue Frontend wurde als Single-Page-Applikation auf Basis von Web Components realisiert. Für die Nutzung in verschiedenen Zeitsystemen rendert sich die Oberfläche beim Start dynamisch. Dies erfolgt durch ein spezifisches Template und Konfigurationsdateien, die auf der Hardware gespeichert sind.

Die Verwendung von Browserstandards gewährleistet eine langfristig nutzbare Lösung. Zusätzlich wird Lit, als leichte Bibliothek für die Entwicklung von Web Components, eingesetzt. Dies ermöglicht ein minimales Bundling und macht es somit der spezifischen Laufzeitumgebung gerecht. Das neu entwickelte Frontend basiert so auf einem stabilen und zugänglichen Techstack. Dadurch fördert die Moser-Baer AG das Onboarding der eigenen Entwickler und unterstützt die zukünftige Erweiterbarkeit.

Projektbausteine

Diese Technologien & Tools kamen zum Einsatz

Lit
Typescript
Projektteam

Diese Expert:innen brachten das Projekt zum Fliegen

Dürfen wir dein Projekt auf das nächste Level bringen?

Wir sind bereit, dein Projekt voranzutreiben. Lass uns gemeinsam deine Ziele erreichen und dein Unternehmen weiterbringen.
Krebs_Matthias
Matthias Krebs
Lead Software Development Division dev/tre

Weitere Success Stories