Jan. 16, 2023 · 4 min read
As part of the long-term collaboration we have with the Barcelona City Council, APSL is in charge of maintaining many of its websites and blogs. These websites provide a service to thousands of citizens quickly, at the same time they must respond reliably to the variable load generated by some events or calls. In this context, we have reimplemented La Seu de Electrònica de l'Ajuntament Barcelona, to modernise its technologies and help them to continue expanding functionalities and services for all the inhabitants of the city.
https://seuelectronica.ajuntament.barcelona.cat/
La Seu is the space where citizens have access to the information, services and electronic procedures of the Barcelona City Council. La Seu Electrònica not only serves as an entrance to the wide range offered by Barcelona's digital administration but also transmits the relevant information and is an official means of publicity for the Town Hall, following the regulations and laws. For example, the portal gives visibility to all the information necessary to comply with the process of public exposure of files.
With a million and a half inhabitants in the city, a large part of which are potential users of this portal, La Seu requires high availability and a variable but intense load of users. The website has a significant number of visits with intense peaks that correspond to the official publication of calls for public job offers, as well as the public exhibition of projects from the different organisations related to the Barcelona City Council. The architecture of a web application with these characteristics must be prepared to support both normal traffic and peaks without it representing underused system resources.
The new Seu is divided into 2 parts: front and back. The front part has been developed with Vue, specifically with the NuxtJs framework. In the back we have used Wagtail, a Python/Django based CMS that communicates with the front through an API.
This decoupled architecture gives us much more freedom and flexibility than the starting monolithic system. La Seu is an application in continuous evolution that must be integrated with the Town Hall. With this architecture, new applications can be created that consume the services and contents of the Seu while maintaining a single source of data and without interference with the current web.
The Python/Django application architecture is validated by the City Council's technical department. Although the original website was in Drupal 7, the type of requests and evolution of the website meant that a rewrite of the application could be considered. The changes from moving from Drupal 7 to Drupal 9 were so significant that they could already be considered a rewrite. We were looking to combine ease of content management, with scalability and interoperability between applications and services.
Wagtail unites the best of both worlds and is the CMS that best adapts to the needs of the Seu, both for usability characteristics and for philosophy. It gives us much more flexibility and freedom than Drupal and will allow us to evolve the application much faster and more efficiently in the future while adapting to the IMI-validated application design.
Wagtail is an API based on the Django Rest Framework (DRF) that allows you to go towards a Headless architecture with virtually no effort. Being developed in DRF, if necessary we can extend it and customise the API adapting it to the needs of the application.
On the front we have used Nuxt, adapting the corporate image of the Town Hall. One of its main advantages is speed and ease of use. Nuxt includes different rendering systems (client or server side (SSR)) also allowing static site generation, but, since the web has many dynamic parts, static generation was discarded.
Pure Single Page Applications (SPA) render all content in the client's browser. Although this has positive aspects, it creates a problem with SEO, since the different search engines still do not interpret this type of application well and for La Seu, it is very important to have good indexability.
Taking SEO and user experience into account, Nuxt allows you to perform server-side rendering (SSR). In SSR mode, parts of the web can execute hybridly on the client and the server, delivering the final HTML to the browser.
Thanks to Nuxt, going SSR mode is painless as it comes with a built-in server out of the box. At the code level, it is enough to adjust the configuration by going to target SSR and reviewing the implementation of some components.
The main difficulty is that the programmer must take into account which parts are dynamic, that is, which components will change their state in the browser when interacting with the user. Although Nuxt makes it very simple, it may take a programmer time to adjust to that way of thinking and integrate it into their routine. It is one more thing to take into account and therefore generates cognitive load.
On the other hand, it forces us to deploy the server and its maintenance. This contrasts with the simple deployment of a 100% client-side spa, whose production consists of uploading the files to any static hosting.
Despite this, in a website intended for the end user and which must be easily discoverable such as La Seu, the SEO requirement is essential. In addition, we have taken the opportunity to implement a small cache that reduces the number of requests to the Wagtail API.
The combination of front and back technologies allows us, therefore, to have a scalable and maintainable website in the future, which can also serve as a service point for other applications and, thanks to Wagtail, have an environment that is highly adapted to the needs of contents managers.
Fuentes:
Wagtail: https://docs.wagtail.org/en/stable/
Nuxt: https://nuxtjs.org/
Return to the APSL blog
