Mobile-first frontend system for displaying various content

About the customer

The client is the North American bureau of Il Sole 24 ORE, Italy’s main financial daily newspaper, published by 24 Ore Group. In the field of services tailored to professionals and businesses, the Group enjoys a solid competitive market position thanks to its databanks, online services and training programs. 24 Ore Group has been listed on the Italian Stock Exchange since 2007 (BIT: S24).

The challenge

The customer came to us to resolve an interesting and ambitious challenge. From daily observation, it was noticed that many sites on the web, including sites belonging to 24 Ore Group, are built with old technologies and look outdated. Moreover, their owners share the same issue as our customer – as the systems are huge, have lots of dependencies and have been developed over years, rewriting legacy apps from scratch or migrating them to new technologies would take a lot of time and even more important – a solid budget.

However, in order not to lose the battle for readers with fresh innovative competitors, the old sites and brands still have to change. And our customer got an idea of how to achieve that in a simpler and more elegant way. The next question was how to implement this idea into a real product. ELITEX was trusted to engineer such an innovative system.

Since from a technical perspective, the most important part of the website for readers is the customer-facing front-end, the idea was to renew only this part. To develop a solution that could be plugged into any existing web app or CMS, use its data, but display them in its own way.

In addition, the solution had to:

  • improve the accessibility of content on the web;
  • provide better tools for content producers;
  • meet the needs of both users and search engines;
  • offer a cost-effective platform.
Mobile-first frontend system for displaying various content
The solution

We had to build something completely different.

The ELITEX team didn’t want to start with the traditional approach of building apps for the web. Instead, we rethought the architecture and decided to go another way. The chosen approach was more similar to that of building a mobile app.

We chose JavaScript as a main language.

JavaScript is not a new language but, driven by research and development of the web giants like Google and Facebook, reached maturity to be the language of the future of the web. For us, it is the present. And we are not alone of course. Sites such as Spotify, Instagram, Airbnb, PayPal, LinkedIn and are developed with JavaScript.

Born as a scripting language, or to work in support of architectures written with other languages, now JS can support the weight of the back-end alone. With a plus: JavaScript runs everywhere, on all operating systems, and on all browsers – mobile or desktop.

On top of JavaScript itself, it was decided to use AngularJS, Node.js and Sails.js. From the project management perspective, the scrum pattern was chosen so the team was able to show the customer the interim results each sprint.

The system was built with a microservice architecture. That means that the server-side app consists of a few parts: one of them is a REST API that responds to users’ requests and another one is a service that gets content from external data sources, parses them and stores them in our database. These services communicate with the help of queues and can be easily scaled. Our developers used a modern, fast and solid NoSQL database MongoDB, which can handle large volumes of structured and unstructured data.

The specific architecture allows most of the pages to be loaded without any delay at all, meaning the application is blazingly fast. It was accomplished as a big part of the logic, as well as templates, are preloaded and cached on the frontend. The user’s browser loads it only once during the first visit to the site. When the user opens any data on the app, there is no need to render the page on the server and load everything from the beginning. The server works as a REST API, returning only raw data. This includes the newly published content – the site loads all the latest data at once. It is a powerful approach to creating modern web applications.

Mobile-first frontend system for displaying various content

Moreover, the right architecture implemented by the ELITEX team enabled a couple of other great features:

  • The app can work offline. It is possible as all the recent data is preloaded and there is no need to make requests to the server. The user may not even notice that their device went offline as the app continues working smoothly.
  • All the additional infrastructure that is needed for the platform to work is one single cheap server. We have chosen a small AWS instance for our needs. As the back-end doesn’t play a key role anymore, one server can handle a pretty big load, therefore the platform can save a good budget on the infrastructure and its maintenance. In case the particular site has a really huge number of users, the backend can be easily scaled horizontally.

Overall, we have not reinvented the wheel. But we used the best of open source technologies to build web services. Why doesn’t everybody use them? Because building systems like ours requires specialized skills that may not be that easy to come by. Our team was assembled to work with these technologies exclusively.

As one of the key goals was to build a system that could work on top of existing web apps, Salsify was designed to be easily adapted to the existing back-ends – e.g. various APIs, XML feeds and CMS (Wordpress, Methode, etc.) At the same time, the UI design can be easily changed to the needs of the particular site as well, considering that the templates, typography, and styles are separated properly from the logic.

Another important side of the app is usability. Some time ago it was almost impossible to make a website that runs as smoothly as the native apps on iPhones or Android devices. Luckily, nowadays modern web technologies came much closer to the native ones. We put a lot of effort into making the app working as smooth as possible. We have tested it on different devices, each time fighting with specifics of each particular platform. And finally, we achieved a great UI and UX that is fast, smooth, beautiful and clear for the user.

As a result, ELITEX has met the goal of engineering a blazingly fast, efficient and smooth state of the art system that is able to make the web faster. The platform was successfully delivered to the customer who could take it to the next level.

Let's talk about your project

Drop us a line! We would love to hear from you.
Name is required
Email is requiredShould be a valid email address
Message is required

We promise to answer as soon as we can!