News

Wie React zum Nutzererlebnis unseres Cloud-Control-Panels beiträgt

Heutzutage erwarten Benutzer schnell reagierende Websites; je schneller eine Seite lädt, umso weniger Besucher klicken weg. Was sich bei einem Online-Shop direkt im Umsatz niederschlagen kann, ist auch bei unserem Cloud-Control-Panel ein wichtiger Faktor für den Arbeitsfluss unserer Kunden. An immer mehr Stellen in unserem Control-Panel verzichten wir daher darauf, die komplette Seite neu zu laden; einzelne Elemente wie der Status Ihrer Server werden stattdessen im Hintergrund abgerufen und auf der bereits angezeigten Seite einfach aktualisiert.

Diesen "Ajax" genannten Ansatz unterstützen verschiedene Libraries und Frameworks. Wir haben uns für React (in Kombination mit Redux) entschieden, weil diese Open-Source-Library von einer grossen Community eingesetzt wird und eine Vielzahl kompatibler Libraries für weitere Funktionalität zur Verfügung steht. Mit React werden die Komponenten der einzelnen Seiten im Browser mittels JavaScript generiert. Während eine Komponente eine asynchrone Operation ausführt (z.b. Daten lädt), kann der Nutzer einfach weiterarbeiten – ein Reload der ganzen Seite hingegen würde alles blockieren.

Vorteile für unsere Software-Entwicklung

Dass unser Cloud-Control-Panel nicht mehr als komplett fertige HTML-Seite von unseren Systemen ausgeliefert wird, vereinfacht auch die Arbeit unserer Software-Entwickler. Indem viele Informationen ganz ohne Formatierung von unseren Servern abgerufen und erst durch React im Browser dargestellt werden, kann die Ajax-API praktisch identisch zur sowieso vorhandenen öffentlichen API gehalten werden – eine zweimalige Implementierung der gleichen Funktionalität erübrigt sich. So bleibt mehr Zeit, um neue Features zügig umzusetzen.

Ein weiterer Vorteil dieses Ansatzes ist, dass auch für das grafische Frontend Unit-Tests eingesetzt werden können. Dies im Gegensatz zu serverseitig erstellten HTML-Seiten mit nachgeladenem JavaScript, welche kaum automatisiert testbar sind. React eignet sich zudem ideal für eine schrittweise Einführung: überall wo React-Komponenten die Benutzbarkeit merklich verbessern, haben wir sie inzwischen bereits im Einsatz. Dort wo die Vorteile etwas subtiler sind, werden wir die Umstellung auf React mit anderen Verbesserungen kombinieren – so sparen wir uns den Aufwand, die gleiche Stelle mehrfach anzufassen.

Wohin sich unser Control-Panel mit React entwickelt

Je mehr Komponenten mit React umgesetzt sind, desto näher kommt unser Cloud-Control-Panel einer Single-Page-App. Bereits heute können die Tabs in der Server-Detailansicht mit jeweils eigenen URLs direkt adressiert werden, beim Wechsel zwischen den Tabs ist jedoch kein Reload der Seite nötig. Dieser Ansatz soll – wo hilfreich – auch an weiteren Stellen zum Einsatz kommen.

Beim Entwickeln neuer Features setzen wir die Implementierung in der Regel zuerst in unserer öffentlichen API um, womit viele Tools aus dem DevOps-Umfeld die neuen Features bereits nutzen können. Von hier ist es dann nur noch ein kleiner Schritt, um das Feature auch im Webinterface verfügbar zu machen: Der benötigte Ajax-API-Endpunkt ergibt sich weitestgehend aus dem zuvor bereits erstellten Endpunkt der öffentlichen API, und React kümmert sich mit Hilfe von JavaScript optimal um die Darstellung der Funktionalität im Browser.

Während wir die Integration von cloudscale.ch in immer mehr Orchestrierungs- und Management-Tools unterstützen, hat die Benutzerfreundlichkeit unseres eigenen Cloud-Control-Panels für uns weiterhin eine besondere Bedeutung. Dank React können Sie Ihre Server in logischen und flüssigen Abläufen verwalten – fast so, als wäre unser Cloud-Control-Panel eine lokale App auf Ihrem Computer.

Für Server-Management mit Flow,
Ihr cloudscale.ch-Team