New Control Panel: OVH focuses on Full-Stack and UX Development

PayPal, Netflix, and more recently WordPress have adopted Full-Stack Javascript. This means that these applications now use the same language for the front-end, middleware and databases. OVH joined this movement early on. In 2013, its telecom control panel, presented at the Devoxx France conference, was one of the first customer interfaces coded in AngularJS and Bootstrap – having only the backoffice coded in Javascript to achieve Full-Stack. How can applications as complex as the OVH control panel be made agile? What technologies and methods help make the most efficient developers, while taking into account user feedback?

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?

Google Trends, with the volumes of data recorded by the search engine, shows the use of technologies which really exploded starting in 2013: node.js (in green), AngularJS (red) and bootstrap (purple).

OVH Control Panel: from a technically orientated monolithic conception to a modular conception driven by the user

After eleven years of good and reliable service, the v3 control panel has reached the end of its life cycle, being replaced by “v6”, a user friendly, full Javascript application. “A revolution!” exclaims Jean-Phillippe. As the v3 control panel is the legacy of the rein of developers at OVH, when a department had the technical ability to develop a new feature, it was added in the interface. Buttons were displayed where there was room and no one cared enough to know if it served a need. Moreover, manager v3 was not designed to exploit behavioral data. But with up to 40,000 daily users interacting with the interface, we could accumulate a vast knowledge about what changes to make. Today, interface design is the mission of a single team, UX, and it is job orientated: we analyze, we make models, we test, we get feedback and we irritate.” The goal of the UX team is to hide the complexity of OVH behind a simple interface. “If our work is not up to par, the consequences are immediate, resulting in: customers flooding support with calls, direct use of the API by those able to, or simply customers leaving us…”An indicator of satisfaction is also measured monthly, by sending several thousand questionnaires to a panel of customers who have recently used the control panel.

Overview of the respective technical architectures of control panel v3 and v6.

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.”

The City JS tool allows the comparison of the monolithic architecture of control panel v3 to the much more modular control panel v6. The rectangular white base represents the entire application, brown represents the districts (folders), in red are the modules (namespaces), in green the anonymous functions and in blue the named functions.

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

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…”
Another challenge will be to jump on the next technological innovations. “We have chosen young and dynamic frameworks, which are evolving quickly,” Jean-Phillippe justifies. “AngularJS is already offering version 2.0, very promising, especially because it features a transpiler. This will permit us to deliver our first hybrid mobile application (based on the same source code as the web control panel), and use standard ECMAScript 6, on which Javascript 2015 and Typescript are based on.” Quick to develop, and light to execute, the only drawback today is that all browsers do not support it (see table below). “To sum it up, AngularJS 2.0 will allow us to offer the features of tomorrow in yesterday’s browsers – but before tomorrow! And if we are confronted with choices, we are convinced that we should no longer be hindered in the adoption of innovations because of the risk of incompatibility with older versions of web browsers. As a leading web player, we have the duty to push users to update their browsers. This will benefit all.”

ECMAScript 6 (let) compatibility functions with different web browsers, provided by: (green=compatible; light green= no guarantee of compatibility; red=not compatible)

The multidisciplinary UX team, between France and the Quebec
UX team, is spread out between Roubaix, France, the OVH headquarters, Rennes and Quebec, where the provider opened an office in April 2015. “Our installation in Quebec allows us to select candidate profiles from the world of video games,” said Pierre Leroux, VP of UX at OVH, who was himself was game producer at Ubisoft. “The gaming sector was and remains a precursor for user testing. We try to take advantage of this experience at OVH.” In addition, the UX team is the first team at OVH to bring together the skills of ergonomists, developers, testers... Convinced by the benefits of agility, the UX team experiments with remote collaboration, using telepresence tools and gives developers the freedom of choice in their own IDE. “Our mission is to ensure that our customers have the most fluid and enjoyable experience. To achieve this, we start by giving maximum freedom to developers in choosing their working tools. Innovation is Freedom," Summarizes Kevin. “We speak a lot about the Internet of Things. Our vision is an Internet of People, built in alliance by user and developer.”