News
BackOur Control Panel: Highlights from the Stack
We regularly add new functionalities to our cloud offer and thus to our cloud control panel and the API. In this article, we would like to focus not on individual features but on milestones relating to the technology behind them, from Python and Django to React and to TypeScript. This technology is the foundation that makes it possible for our developers to concentrate on the essential and, at the same time, for you to benefit from a user-friendly web interface and numerous integrations in terms of automation tools.
Django – a solid basis
Over the years, our cloud control panel has undergone comprehensive development. It was originally written in Lua as a minimum viable product. However, in order to improve maintenance we wanted to use a framework, which is why we decided to re-implement the control panel in Python and Django.
Django describes itself as "the web framework for perfectionists with deadlines." It has proved to be reliable, well-tested and high-performance. Django allowed us to rapidly add new features and improve existing code.
Gradual introduction of React
At the time, the control panel comprised just a few dynamic components. These enable users of our control panel to continuously receive current information, e.g. the power status of servers, without having to reload the page. The aim here was to further improve usability with more direct handling of cloud resources. After significant consideration, we decided to introduce React. In order to guarantee a smooth transition, we opted for a gradual implementation.
We started implementing new features and adapting existing functionality with React, at all times prioritizing those cases where the benefit seemed greatest for our customers. This gradual integration made it possible for us to keep susceptibility to errors as low as possible and at the same time to make the most of all the advantages of dynamic web components.
The displayed information, e.g. the power status of servers, is up-to-date, even without reloading the page.
Switch to single-page application
The switch to a single-page application (SPA) ensued as a logical next step in our increasing use of dynamic web components. This means it is no longer necessary to reload the page within the control panel, thus providing an appealing and interactive web application.
Together with this switch, we also largely replaced the generation of HTML elements using Django templates. Instead an (internal) API now runs on the server side and provides the browser with all the required contents. This clear separation of browser and server technologies also makes cooperation easier in our software development team.
End-to-end type checking
When revising existing software code, in particular, errors are frequently introduced in untyped languages such as JavaScript if it is not consistently clear what type of variables will be used at runtime. This is why we have been using TypeScript for a while now. This language makes it possible to complement JavaScript code with data types and to have them tested by the TypeScript compiler.
Communication between browser and server code via our REST API is a central aspect of our control panel. We therefore also want to ensure that both sides are using the same data types. To this end, we developed a special code generator that automatically generates TypeScript code based on the definitions of our Django REST API. In the process of our continuous integration (CI), checks are then carried out to ensure that the code generated in this way is correct. This end-to-end type checking approach helps us to improve code quality and to reduce potential errors.
We continuously work at further improving our web application based on feedback and iterative steps. Our goal is to develop a user-friendly application that does justice to the requirements of our users, while supporting us in its further development.
On the same page!
Your cloudscale.ch team