2023
Juni
08
2023

Unser Control Panel: Highlights aus dem Stack

Regelmässig erweitern wir unser Cloud-Angebot und damit unser Cloud Control Panel sowie die API um neue Funktionalitäten. Für einmal soll das Augenmerk aber nicht auf einzelnen Features liegen, sondern auf einigen Meilensteinen bei der Technologie, die dahintersteckt: von Python und Django über React bis TypeScript. Auf dieser Basis wird es erst möglich, dass sich unsere Entwickler auf das Wesentliche konzentrieren können und Sie gleichzeitig von einem benutzerfreundlichen Webinterface und vielen Integrationen in Automatisierungs-Tools profitieren.

Django – ein solides Fundament

Unser Cloud Control Panel hat im Laufe der Jahre eine umfassende Entwicklung durchgemacht. Ursprünglich wurde es als "Minimum Viable Product" in Lua geschrieben. Für bessere Wartbarkeit wollten wir jedoch ein Framework nutzen und entschieden uns deshalb, das Control Panel in Python und Django neu zu implementieren.

Django bezeichnet sich selbst als "The web framework for perfectionists with deadlines". Es hat sich als zuverlässig, gut getestet und leistungsstark erwiesen. Mit Django konnten wir schnell neue Features hinzufügen, genauso wie bestehenden Code weiter verbessern.

Schrittweise Einführung von React

Im damaligen Stadium umfasste das Control Panel nur wenige dynamische Komponenten. Diese erlauben dem Nutzer unseres Control Panels, laufend aktuelle Informationen – z.B. den Power-Status von Servern – zu erhalten, ohne die Seite neu zu laden. Hier wollten wir die Usability mit einem direkteren Handling der Cloud-Ressourcen weiter verbessern. Nach gründlicher Überlegung entschieden wir uns daher, React einzuführen. Um einen reibungslosen Übergang zu gewährleisten, haben wir eine schrittweise Umsetzung gewählt.

Wir begannen damit, neue Features oder die Anpassung existierender Funktionalität mit React umzusetzen, und priorisierten dabei diejenigen Fälle, bei denen der Nutzen für unsere Kunden am grössten erschien. Diese schrittweise Integration ermöglichte es uns, die Fehleranfälligkeit niedrig zu halten und gleichzeitig schrittweise die ganzen Vorteile von dynamischen Webkomponenten zu erschliessen.


Die angezeigten Informationen – z.B. der Power-Status von Servern – sind aktuell, auch ohne die Seite neu zu laden.

Umstellung auf Single-Page-Anwendung

Als logische Fortsetzung des zunehmenden Einsatzes dynamischer Webkomponenten folgte die Umstellung auf eine Single-Page-Anwendung (SPA). Damit erübrigt sich innerhalb des Control Panels ein Reload der Seite komplett, was eine ansprechende und interaktive Webanwendung ermöglicht.

Hand in Hand mit dieser Umstellung lösten wir auch das Generieren von HTML-Elementen mittels Django-Templates weitestgehend ab. Stattdessen läuft nun serverseitig eine (interne) API, die dem Browser alle nötigen Inhalte bereitstellt. Diese klarere Trennung von Browser- und Servertechnologien erleichtert auch die Zusammenarbeit in unserem Softwareentwicklungs-Team.

End-to-end Typechecking

Vor allem beim Überarbeiten von bestehendem Software-Code kann es in untypisierten Sprachen wie JavaScript oft dazu kommen, dass Fehler eingeführt werden, wenn nicht durchgehend klar ist, von welchem Typ die verwendeten Variablen zur Laufzeit sein werden. Schon länger verwenden wir deshalb TypeScript. Diese Sprache erlaubt es, JavaScript-Code mit Datentypen zu ergänzen und durch den TypeScript-Compiler testen zu lassen.

Zentral in unserem Control Panel ist die Kommunikation zwischen browser- und serverseitigem Code via unsere REST-API. Deshalb wollen wir auch sicherstellen, dass beide Seiten die gleichen Datentypen verwenden. Hierzu haben wir einen speziellen Code-Generator entwickelt, der automatisch TypeScript-Code auf Basis der Definitionen unserer Django REST-API generiert. Der so generierte Code wird dann im Rahmen unserer kontinuierlichen Integration (CI) auf Korrektheit überprüft. Dieser "end-to-end"-Ansatz des Typechecking hilft uns, die Code-Qualität zu verbessern und potenzielle Fehler zu reduzieren.


Wir arbeiten kontinuierlich daran, unsere Webanwendung basierend auf Feedback und iterativen Schritten weiter zu verbessern. Unser Ziel ist es, eine benutzerfreundliche Anwendung zu entwickeln, die den Anforderungen unserer Nutzer gerecht wird und uns gleichzeitig bei der weiteren Entwicklung unterstützt.

On the same page!
Ihr cloudscale.ch-Team

Zurück zur Übersicht