16 de Enero de 2023 · 4 min de lectura
Dentro de la duradera colaboración que tenemos con el Ajuntament de Barcelona, APSL se encarga del mantenimiento de muchas de sus webs y blogs de atención directa a la ciudadanía. Estas webs dan servicio a miles de ciudadanos de forma rápida, al tiempo que deben responder de forma fiable a la carga variable que generan algunos eventos o convocatorias. En este contexto, hemos reimplementado la Seu de Electrònica de l'Ajuntament de Barcelona, para modernizar sus tecnologías y poder seguir ampliando funcionalidades y servicios para todos los habitantes de la ciudad.
https://seuelectronica.ajuntament.barcelona.cat/
La Seu es el espacio donde la ciudadanía tiene acceso a la información, servicios y trámites electrónicos del Ajuntament de Barcelona. La Seu Electrònica no solo sirve de entrada para el extenso abanico que ofrece la administración digital de Barcelona, sino que transmite la información relevante y es un medio de publicidad oficial del Ajuntament, siguiendo las normativas y leyes. Por ejemplo, el portal da visibilidad a toda la información necesaria para cumplir con el proceso de exposición pública de expedientes.
Con millón y medio de habitantes en la ciudad, de los que buena parte son usuarios potenciales de este portal, La Seu precisa de una alta disponibilidad y de una carga variable, pero intensa de usuarios. La web tiene un número de visitas importante con picos intensos que se corresponden con la publicación oficial de convocatorias de oferta pública de empleo, así como de exposición pública de proyectos de los diferentes organismos relacionados con el Ajuntament de Barcelona. La arquitectura de una aplicación web de estas características debe estar preparada para soportar tanto el tráfico normal como los picos sin que represente tener recursos de sistemas infrautilizados.
La nueva Seu se divide en 2 partes: front y back. La parte del front se ha desarrollado con Vue, concretamente con el framework NuxtJs. En el back hemos utilizado Wagtail, un CMS basado en Python/Django que se comunica con el front a través de un API.
Esta arquitectura desacoplada nos da mucha más libertad y flexibilidad que el sistema monolítico de partida. La Seu es una aplicación en contínua evolución que se debe integrar con el Ajuntament. Con esta arquitectura, se pueden crear nuevas aplicaciones que consuman los servicios y contenidos de la Seu manteniendo una única fuente de datos y sin interferencias con la web actual.
La arquitectura de aplicaciones Python/Django es una de las validadas por el departamento técnico del Ajuntament. Aunque la web original estaba en Drupal 7, el tipo de peticiones y evolución de la web hacía que se pudiese plantear una reescritura de la aplicación ya que los cambios de pasar de Drupal 7 a Drupal 9 eran tan importantes que ya en sí se podría considerar reescritura. Buscábamos combinar la facilidad de gestión de contenidos, con escalabilidad e interoperabilidad entre aplicaciones y servicios.
Wagtail une lo mejor de ambos mundos, y es el CMS que mejor se adapta a las necesidades de la Seu, tanto por características de usabilidad como por filosofía. Nos da mucha más flexibilidad y libertad que Drupal, y nos permitirá evolucionar la aplicación de forma mucho más rápida y eficiente en el futuro, a la vez que nos permite adaptarnos al diseño de aplicaciones validado por el IMI.
Wagtail es una API basada en Django Rest Framework (DRF) que permite ir hacia una arquitectura Headless prácticamente sin esfuerzo. Al estar desarrollada en DRF, de ser necesario podemos extenderla y personalizar el API adaptándola a las necesidades de la aplicación.
En el frontal hemos utilizado Nuxt, adaptándo la imagen corporativa del Ajuntament. Una de sus principales ventajas es la rapidez y facilidad de uso. Nuxt incluye diferentes sistemas de renderización (cliente o en el lado del servidor (SSR)) permitiendo también la generación estática del sitio, pero, dado que la web tiene muchas partes dinámicas se descartó la generación estática.
Las Single Page Application (SPA) puras renderizan todo el contenido en el navegador del cliente. Aunque esto tiene aspectos positivos, genera un problema con el SEO, ya que los diferentes motores de búsqueda todavía no interpretan bien este tipo de aplicaciones y para la Seu es muy importante tener buena indexabilidad.
Teniendo el SEO y la experiencia de usuario en cuenta, Nuxt permite realizar un renderizado en el lado del servidor (Server Side Rendering). En el modo SSR, partes de la web pueden ejecutarse de forma híbrida en el cliente y en el servidor, haciendo que al navegador llegue el HTML final.
Gracias a Nuxt, pasar a modo SSR es indoloro, ya que viene con un servidor incorporado de serie. A nivel de código basta con ajustar la configuración pasando a target SSR y revisar la implementación de algunos componentes.
La principal dificultad es que el programador debe tener en cuenta qué partes son dinámicas, es decir, qué componentes cambiarán su estado en el navegador al interactuar con el usuario. Aunque Nuxt lo hace muy sencillo, puede requerir un tiempo al programador para adaptarse a esa forma de pensar e integrarla en su rutina. Es una cosa más a tener en cuenta y, por tanto, genera carga cognitiva.
Por otro lado, nos obliga a hacer el despliegue del servidor y su mantenimiento. Esto contrasta con el despliegue sencillo de una SPA 100% client-side, cuya puesta en producción consiste en subir los ficheros a cualquier hosting estático.
Pese a ello, en una web destinada al usuario final y que debe ser descubrible fácilmente como es la Seu, el requisito del SEO es fundamental. Además, hemos aprovechado para implementar una pequeña caché que reduce el número de peticiones a la API Wagtail.
La combinación de tecnologías front y back nos permite, por tanto, tener una web escalable y mantenible en el futuro, que además puede servir de punto de servicio a otras aplicaciones y gracias a Wagtail, tener un entorno muy adaptado a las necesidades de los gestores de contenidos.
Fuentes:
Volver al blog
