News

How React contributes to the user experience of our cloud control panel

Today's users expect websites to respond quickly; the faster a page loads, the fewer visitors click away. This factor that directly impacts revenue in an online store is also important for our customers' workflow in our cloud control panel. This means that in an increasing number of locations in our control panel, we avoid reloading the entire page; instead, individual elements such as the status of your servers are retrieved in the background and simply updated on the page that is already displayed.

This approach is called "Ajax" and is supported by various libraries and frameworks. We chose React (in combination with Redux) because this open-source library is used by a large community and many compatible libraries are available for further functionality. With React, the components of the individual pages are generated in the browser using JavaScript. While a component executes an asynchronous operation (e.g. loading data), the user can keep on working – unlike with a reload of the whole page that would block everything.

Advantages for our software development

The fact that our cloud control panel is no longer delivered as a fully compiled HTML page by our systems also simplifies the work of our software developers. By retrieving a great deal of the information from our servers without any formatting and only displaying it in the browser by using React, the Ajax API can be kept practically identical to the existing public API, thus removing the need to implement the same functionality twice. This leaves more time for the rapid implementation of new features.

Another advantage of this approach is that unit tests can also be utilized for the graphical frontend. This is in contrast to HTML pages generated on the server with additional JavaScript, which can hardly be tested automatically. React is also ideal for a step-by-step transition: wherever React components noticeably improve usability, we have them in place already. Where the benefits are more subtle, we will combine the conversion to React with other improvements, which saves us the effort of dealing with the same item multiple times.

Where our control panel is heading with React

The more components are implemented using React, the closer our cloud control panel gets to a single-page app. Already today, the tabs in the server detail view can be addressed directly with their own URLs, while switching between the tabs does not require a reload of the page. Where useful, this approach will be adopted in other cases as well.

When developing new features, we usually first implement the functionality in our public API in order to allow various DevOps tools to make use of it. From here it is only a small step to make the feature available in the web interface, too. The required Ajax API endpoint is largely defined by the previously created endpoint of the public API, and React takes optimal care of presenting the functionality in the browser using JavaScript.

While we support the integration of cloudscale.ch into an increasing number of orchestration and management tools, the usability of our own cloud control panel remains of particular importance to us. Thanks to React, you can manage your servers in a consistent and smooth workflow, almost as if our cloud control panel were a local app on your computer.

For server management with flow,
Your cloudscale.ch team