Optimizing performance for gaining important business advantages

A few weeks ago, some developers from the Antreem team took part in the CSS Day in Faenza, which Massimo Artizzu has already mentioned. It was an event full of updates and ideas, from which the whole group can continue to take inspiration, also for some ongoing projects. Here are some ideas

Performance

For the type of work we do, we are used to having the Service Designer as the mediator of interests in each project. In fact, the Service Designer gathers together the requirements from different channels, business, development and communication to name a few.
Understanding the role of this figure and establishing a fruitful partnership is a key requirement for the success of a project.

We know that companies that use human centered design methodologies as an integration tool can innovate successfully and efficiently, gaining important business advantages. In fact, it is calculated that the competitive advantage gained by organizations that apply user centered design methodologies is on average a market that is at least twice the size, with respect to that of the competitors who are behind from this point of view.

The original article is provided for reference purposes: “DESIGN-DRIVEN COMPANIES OUTPERFORM S&P BY 228% OVER TEN YEARS – THE ‘DMI DESIGN VALUE INDEX”

The subject of performance is equally significant in business terms. Statistics tell us that a user expects the loading time of a page to be less than 3 seconds. If this requirement is not fulfilled, the user tends to abandon the page (53% of cases) and looks for a competitor instead.

The study conducted by Google in 2016 is provided for reference purposes: “The need for mobile speed: How mobile latency impacts publisher revenue”

We also know that the biggest margin for improvement lies in the front-end.

Any good engineer is aware of these numbers and within their scope of responsibility they try to do all they can to reach reasonable performance levels.

However, it is not unlikely to have scenarios in which conflicts of interest arise in relation to this area.

Let’s consider, for example, the case in which the dimensions need to be reduced, and therefore, to some extent, the quality of the images hosted within a web application. The designer is compelled to defend the reasons why a drop in quality would be unacceptable, the systems engineer may highlight the technical limits of the infrastructure, and, after minifying and organizing all the resources according to modules, the developer has no room for manoeuvre left.

Therefore, having an interlocutor who is responsible for performance, who can establish a budget in relation to the total weight of all the contents to be loaded onto a certain page, and who can mediate everyone’s interests, and provide an acceptable solution, can be particularly important for certain scenarios.

Pattern

Implementing the style of a web front-end is a particularly complex job. CSS has evolved exceptionally over recent years, taking on many new responsibilities (uniform pixel density of devices, shape factors, animations, 3D,….) and has opened up the way to approaches and languages with differing degrees of experimentation.

This particular level of code, compared with its higher level relatives, which we use for expressing business and application logic, suffers from the lack of a whole series of tools to allow a certain level of confidence to be gained in relation to formal static correctness and dynamic behaviour.
It is certainly good practice, in some contexts, to think about the responsibilities assigned to this level of code, and assess alternative approaches that can be integrated or adopted.

However, in many cases, this is entirely entrusted to the expertise of the engineer responsible for implementation. An interesting pattern is to maintain a completely semantic template, avoiding the use of presentation classes.

This is a rather simple design pattern to be implemented, which provides at least two advantages:

• Greater simplicity and clarity of the template Possibility to completely separate the ownership of the template management from the style management
• Creation of a level of uncoupling between the template and the style, within which it is possible to present the aspect of the business entities in more general visual appearance terms

The meaning is simple: composing the style of the entities represented, using the tools provided by the CSS pre-processors, like mixins.

CSS testing

Automated tests (unit and integration, in particular) are a particularly important resource to accompany the development of applications. In relation to CSS, the methods currently being tested are still full of gaps, non-standardized and inefficient, and probably offer very little business value being difficult to justify.

However, this is an area where it makes sense to do research. Having methodologies and tools that provide confidence in the impact of our refactoring and the introduction of new functions would certainly imply significantly lower management costs.