How We Revamped an Online Newspaper with Ruby on Rails, React, and NodeJS

The Village is an online city newspaper owned by the Redefine brand. It reports on important events of the day, culture, and entertainment in Moscow and St. Petersburg. Under the franchise, editorial offices also operate in other Russian cities, as well as in Belarus, Kazakhstan, and Ukraine.

The editors strive to make The Village appealing and useful for the widest possible audience. So, an interview with an official might be posted alongside an overview of a new restaurant and a photo report from a fashion show. Therefore, the commercial department can potentially attract a variety of advertising clients.

By 2019, The Village already had high demands in terms of advertising opportunities, but it became technically more difficult and more expensive to implement them.

The Task: completely update the website, taking into account new technologies and requirements

Various factors suggested that it was time to redesign the website. Different people had worked on it at different times. Because of this, technical debt accumulated and parts appeared in the code that were created a long time ago. What is more, the mobile version of the site was adapted for small screens - the site looked bad on large ones. The sales department wanted new advertising opportunities and better management.

The Village was looking for an agile development team to develop a new Ruby backend and use a technology approach to reduce technical debt. There was a lot of work ahead, and there was no time for a detailed study of the technical specifications. Some requirements could also change during the process, which often happens in media projects. Therefore, they were looking for a company ready for flexible management.

We already had the right experience providing technical debt reduction services, and we had worked on other media projects. The Village knew about our expertise, and some Redefine technicians had even made presentations at our events. So we took over the back-end, while the front-end was handled by their own team.

The new platform needed to utilize current technologies, while taking into account the successful solutions of the previous version, and it also had to fulfill internal business tasks. We needed to design it in a way that it could be quickly updated, without issues, and give it the ability to connect different functionalities across multiple franchises.

Porting a monolithic application to microservices

The website used to be a classic monolithic application. All of the code was executed on the server, and users only saw the result of the work. To make even small changes, the developers had to touch the code. So, we separated the services, resulting in a separate backend, admin, API, and frontend.

The backend returns data via the API, and the page rendering is implemented as a SPA in React. The server-side virtual browser makes the page and sends it to the user. Because of this, the website itself loads faster, and transitions between materials and sections are easier. Instead of updating the entire page, only the data that has changed is transferred. 

This also provides more opportunities for interactions with the site. The entire site became a single page, so you can, for example, make animations of transitions between pages or use interactive advertising banners.

Configuring tiered caching to improve website performance

The same article may appear on different pages: in the general section, in a user’s “saved” section, and on the main page. Using the classic approach, any change to this article will reset the cache of several pages at once. This leads to an increase in the load, and you also have to verify that the correct changes are applied on every page.

Together with Redefine specialists, we realized the multilevel aggressive caching approach, where only changed fragments are updated, automatically and everywhere. Pages are cached separately on the server and API. In this case, the cache lifetime is a couple of minutes.

For example, previews of articles are displayed on the main page. If the editorial board changes something in the title or uploads another picture, the desired piece will be instantly redrawn.

If the cache had to be reset completely, for the entire site, then the pages would take longer to load, and the server would need more powerful hardware. Our approach saves memory space and reduces problems with updating content, which, in turn, reduces the overall load on the site.

Content migration automation

When moving to a new backend, we needed to transfer all the material from the old site. To save on infrastructure and migration, and not waste energy on the migration of 10 terabytes of images, we have automated the resize of images on the server. And, rather than loading the storage with duplicate images of different sizes, we utilized on-the-fly image processing.

Here is how it works: if a request for a picture comes, the ImgProxy service sends the original image to a special server, where it is cropped and resized correctly. To avoid doing this many times, the picture is cached. Therefore, pictures appropriate for any device and screen are obtained almost instantly. If we need any special sizes, we just write the necessary parameters on the server and they are added to the materials themselves.

The solution

We developed a powerful, robust Ruby on Rails backend that takes into account current and future publication loads. It can work with any fronted, which means that they can now change the appearance without redesigning the entire site.

The Redefine team developed the interfaces and frontend in React + Node.js. Next.js is responsible for server-side rendering of pages. To create and edit articles, the WYSIWYG Setka Editor is used.

The result

The Village has been relaunched, and all Russian franchises are already working with the new version. Next in line are franchises in other countries. Automating content migration has saved time and effort. Setting up tiered caching helped to achieve great download speeds. As a result, we got a universal core.

To do this, based on the built-in capabilities of the latest Ruby versions, a flexible system for separating modules and expanding logic was made. Any new feature is added immediately to the core, and if it is needed on another project or franchise site, then it is simply included on the back-end, and it remains only to draw a piece of the interface. For example, during development, custom bookmarks were connected this way, and after that, RSS.

Our work will help The Village’s editors focus on content quality, which translates into user retention. Endless scrolling and a recommendation system will help put valuable material in front of the right audience, increasing the depth of viewing and time on the site and making the user experience barrier-free. The editors can now take advantage of a simpler, more user-friendly interface, the sales team can generate more advertising opportunities, and readers can enjoy a faster, more appealing site.