New Control Panel: OVH focuses on Full-Stack and UX Development
Why Full-Stack is the future
Express.js, AngularJS, and Bootstrap are the main frameworks being used to rewrite the OVH control panel. “These technologies offer a lot of freedom when designing,” says Jean-Philippe Blary, a developer in the UX team, citing the example of the Popover seen within the “Public Cloud” section of the control panel. He continues,“The developer can now focus entirely on user experience.” Like many developers, Jean-Philippe worked with the Google Web Toolkit before joining OVH. “The component libraries make it possible to save time, in return they must satisfy the look and feel offered. The possible modifications are marginal. The frameworks that we have chosen are to the contrary, Swiss Army knives, which we can develop models almost identical to those offered by ergonomists.” Within the UX team, the trend is to develop Full-Stack, capable of working on all the layers of an application. “In a way it is the equivalent of devops, combining the skills of a developer and the know how in system administration,” explains Kevin Bonduelle, who is also working to rewrite the control panel. In the IT sector, labor shortages do not touch all fields but nevertheless influence working methods and some choices of technology, in a manner to maximize the efficiency of developers. Generalist are on the rise, especially with startups that are forced to innovate rapidly without hiring more employees. It is a big change, because for the past few years, with an explosion of new technologies (mobile, big data, IoT, AI…) hyper specialization has been encouraged. “The need for specialized developers will remain, as some technologies cannot be mastered superficially,” Kevin goes on to explain, “but this demand will grow as long as the underlying trend is to simplify the many application technologies.” In these conditions, the Full-Stack developer is no longer the “myth” which some have denounced. It is interesting to note that the Full-Stack movement has links beyond the IT world. According to KPMG, Tesla, the American manufacture of batteries for electric cars, could have limited itself to being an auto manufacturing subcontractor but chose to build its own vehicles, a “Full-Stack” approach which aims to control the entire value chain of innovation. Some months ago, we spoke about vertical integration. Today, the lexicon of the economic field enriches IT vocabulary. Should this be seen as a sign of its increasing importance?
OVH Control Panel: from a technically orientated monolithic conception to a modular conception driven by the user
The migration from control panel v3 to v6 is a massive undertaking, mainly because it is not a migration, but a complete rewrite of more than 400 macroscopic features which take into account tens of thousands of use cases. “The underlying architecture was entirely redesigned,” explains Kevin. “Control panel v3 was based on a monolithic architecture written in Perl, XML and XSLT, to which the databases were directly connected. Each modification, even graphical, was risky. Calculations were made on the server side, page loading times were long.” The v6 control panel is based on modular architecture, with a web application using AngularJS and Bootstrap, making first requests to a Node.js API, which in turn makes requests to the OVH API (within we find some Perl, some Go, some Java and some Python), that extracts information from the databases.
“The API over API coded in Node.js, that we’ve named 2API, is middleware, performing the function of aggregator of the v6 API. It helps overcome the six simultaneous requests limitation of web browsers. The display of certain pages of the control panel, for customers with several OVH services, can require several hundred requests. Thanks to this solution, pages are displayed much quicker and gradually, pages are loaded bit by bit as the user scrolls.” Moreover, calls (REST) and API returns have been standardized in a way to make it possible to take advantage of future technologies. “We still have progress to make in achieving the desired performance for certain operations, especially for bulk operations. We are working without excluding questioning certain choices in technology. Thought on API v7 is already underway.”
Behind the technical challenge lies another challenge, make users accept change. This is the job of Anne-Claire Maury, ergonomist within the UX team. “There is a phenomenon of habit of the old interface, generated by its frequency use – some customers, especially resellers, spend several hours a day using the interface – and the fact is that it has changed little over time.” From an ergonomic point of view, this is completely anachronist. These habits can make one “allergic” to change and time spent getting used to an interface in a professional context should be considered an investment. We can understand that users are reluctant to use another interface. The work of the ergonomist, whose job is to make the learning process quicker and as painless as possible, is crucial. This is why we are committed towards continuous improvement, with gradual modifications. There will not be any more drastic changes in the future.”
Increase user feedback Increase user feedback
Anne-Claire encourages users to express themselves as much as possible. This could be seen at her booth during the 2015 Summit. She had already invited several customer panels in Lille, to test different sections of the control panel during its rewrite. She is convinced, “It is necessary to increase testing. In one day, with five participants assigned a semi-structured scenario, executed on a dynamic prototype, were able to identify 85% of the problems within the interface.” Also conducted on internal users, these tests permit the evaluation of usability, this is to say, the application’s efficiency, effectiveness and satisfaction that it provides. “And any ego conflicts are nipped in the bud as it is the user that decides the relevance of our proposals.” Feedback also comes from OVH support, within which a new team has been put into place, the “Continuous Improvement and Management” team. “Statistics are generated from the pattern of calls which then are used to populate and prioritize our Kazien backlog (list of features and modifications that users are waiting for, NDR).” Following internal testing, when any new feature is implemented, Anne-Claire hands things over to testers, who look for bugs by performing a series of functional tests. “Their mission is to consider all use cases, from classic uses to the more unlikely – which customer sometimes find themselves confronted with. Next, verification takes place in the pre-production phase, assuring that the new features do not break anything.” Anne-Claire believes these tests are crucial, "In the updated version of Maslow's pyramid, to describe the needs of web users, the base is a reliable application! Usability is what we are currently focused on with aesthetic and emotional aspects to follow.”
Technical work: Mobile First and AngularJS 2.0
Immediately after control panel v6 definitively replaces v3 (it will be iso-functional in mid-January), one of the priorities of the UX team will be a mobile first strategy. Anne-Claire explains, “Concerning the older control panel, mobile represented 3 to 4 percent of the connections, but the interface is clearly not appropriate. We know today that users connect to the Internet more by mobile device than desktops. And 90% of the time spent on mobiles is through the use of applications. The equation is very simple, control panel v6, must have minimum compatibility with mobile (responsive), be adaptive (select the features to appear when connecting from a mobile) and eventually we will have to offer an application. This makes sense for certain uses of the control panel: orders or domain name renewals, monitoring a server…”