Desde principios de este año (2017), he estado renovando y actualizando la web, para hacerla más moderna, más accesible, más rápida, más fácil de usar desde los móviles, más bonita y más unificada.

El empuje a la transformación (no me gusta disimular la genealogía pulsional de mi trabajo) fue la necesidad de securizar mediante el protocolo SSL una web hermana.

Instalar SSL, hasta hace poco, era una tarea infernal; pero con la aparición de Let's Encrypt ha pasado a ser muy fácil. Pequeño problema, sin embargo: Let's Encrypt no tiene un cliente (ACME) decente para Windows (entre otras cosas, porque no existe una subdivisión estructural inteligente del fichero de configuración de Apache preinstalada por el sistema, como sí sucede, por ejemplo, en Ubuntu). Y la web del EPBCN funcionaba en Apache 2.2 sobre Windows 10.

VirtualBox y Ubuntu

El primer paso que di fue instalar Ubuntu 16.04 LTS en una máquina virtual bajo VirtualBox. Lo interesante de tener la web en una máquina virtual es que se le puede asignar una IP fija en la intranet y moverla de una máquina a otra, si se hace necesario. Esto permite independizarse de fallos de hardware: se cambia la máquina virtual de sitio y listos (hay que tener un backup reciente, claro).

Dropbox y las carpetas compartidas de VirtualBox

En nuestro caso es un pelín más complicado porque tenemos las webs en Dropbox y además tienen que ser accesibles desde Windows. Optamos por usar el sistema de carpetas compartidas (shared folders) de VirtualBox. Esencialmente, se monta en un directorio especificado de la máquina virtual Ubuntu la parte que deseemos del Dropbox. Esto nos permite seguir manipulando los ficheros desde "fuera" de la máquina virtual y a la vez servirlos con Apache desde "dentro" (esto, desde luego, podría hacerse de un modo más seguro; me refiero a ello al final del artículo).

Let's Encrypt

Ubuntu 16.04 viene con Apache 2.4. La instalación y uso de Let's Encrypt son tan sencillos que es casi increíble. Primero migramos la web de Syngular, después varias webs menores, y finalmente las del Gabinete de Psicoterapia y, en último lugar, la del EPBCN.

Moving away from Wordpress, y un aggiornamento

Migrar la web del EPBCN era complicadito: teníamos siete blogs de Wordpress en configuración multisite (lo que, en perspectiva, resultó ser una mala idea), y toda una serie de aplicaciones webs escritas por mí, algunas en REXXTAGS sobre REXXHTTP y otras directamente sobre REXXHTTP.

Además, algunas de esas aplicaciones tenían un aspecto muy antiguo. No había tenido tiempo de migrarlas en las últimas modificaciones de la web, y el conjunto parecía más un museo de la web del EPBCN que una web moderna.

En cualquier caso, tenía que generar algo para substituir los blogs en Wordpress: la idea era dejar Wordpress solito en el directorio "/blog/", y usar algo más rápido, y unificado, en todo lo demás.

REXXHTTP en Ubuntu

Lo primero era ver si REXXHTTP funcionaba en Ubuntu. Sorpresa agradable: sí, lo hace, y sin tocar una sola línea. Un poco de autobombo no está de más, en este caso: escribí REXXHTTP en 2006 bajo Windows, pero lo programé para que fuese independiente del sistema operativo (es decir, que tuviese en cuenta las diferencias entre los sistemas).

Un stack de abstracciones

A partir de ahí me dediqué a escribir un stack (una pila, en el sentido de "apilado") de abstracciones.

"HTML", con minificación e indentación opcionales

En primer lugar, tenía que generar HTML. Quería aprovechar la oportunidad para generar, por defecto, HTML minificado, pero dejar la opción de visualizar el HTML no minificado para cuando sea necesario depurar. La primera abstracción, entonces, implementa esa idea. No me rompí la cabeza: HTML "es" un vector, en el que los elementos pueden ser tiras de carácteres o vectores (recursivamente, etc.), con unos métodos extras para manejar

1. la minificación (opcional),
2. la indentación correcta (cuando no se minifica), y
3. la generación final de la página (para no ejecutar una cantidad brutal de concatenaciones, elegimos un MutableBuffer de ooRexx).

<p> 
  Un párrafo sin sentido. 
</p> 

<p>Un párrafo sin sentido.</p> 

"Bootstrap"

La segunda abstracción tiene que ver con la elección de Bootstrap 3 como framework. Bootstrap es muy fácil de usar, muy cómodo y, con muy poco esfuerzo, permite generar páginas mobile-first y responsive en un periquete. "Bootstrap", claro está, usa "HTML". La abstracción es genérica, para poder dar servicio a otras webs.

"EPBCN"

La tercera abstracción está destinada a generar páginas del EPBCN. Esta, sin ser en absoluto complicada, es la más farragosa. Ya que todas las páginas van a estar generadas automáticamente, podemos tomarnos el tiempo de generar unos menús completísimos que sean iguales en todas las páginas. Cada subárea de la web (por ejemplo, Textos para pensar, o Biblioteca) tiene su propio menú secundario, para facilitar la navegación. "EPBCN" encapsula toda esa complejidad en una sola capa; naturalmente, "EPBCN" es una subclase de "Bootstrap", que a su vez usa "HTML".

Diversas fábricas de páginas, una para cada área

En el cuarto nivel de abstracción encontramos toda una serie de subclases de "EPBCN", una para cada subárea de la web. Esto nos permite implementar funcionalidades específicas del área, definir las barras laterales, etc.

Las páginas concretas

El quinto nivel de abstracción son las páginas concretas. Una página de "Textos para pensar", por ejemplo, es una instancia de la clase "Textos", que a su vez es una instancia de "EPBCN, que a su vez es una instancia de "Bootstrap", que a su vez usa "HTML".

Como se junta todo

REXX es un lenguaje muy raro (por eso me gusta tanto). En las últimas versiones, permite acceder al código fuente no sólo del programa en curso (esto se podía desde las primeras versiones, es la función built-in SourceLine), sino de cualquiera de los programas activos en la cadena de invocaciones. Gracias a esta posibilidad, se hace muy fácil programar (al nivel de "EPBCN" en la pila) un sistema que analice el programa que debe emitir la página y extraiga de él la parte diferencial, escrita en HTML, para insertarla donde corresponde. Esa parte diferencial se dispone dentro de un comentario, formateado de una manera preconvenida, que está en el fichero invocado por REXXHTTP.

Temas de Wordpress

El último paso fue darse cuenta de que un blog en Wordpress metido en medio de una web tan chula daba muchísimo el cante. Tuve que aprender cómo hacer un tema de Wordpress (mediante este excelente tutorial de Tania Rascia) y ahora lo único que distingue las páginas de Wordpress de las hechas por nosotros es que son lentitas.

Resultados

Velocidad

Lo interesante es que todo esto es muy rápido. Mucho. Probadlo, es para flipar. Estoy consiguiendo tiempos de carga de entre 40 y 80 ms. para el html básico de una página tipo, y unos 250 ms. para la página completa, frente a 800-1600 ms. y > 1 segundo para Wordpress.

Wordpress, además, para decirlo todo, genera un código muy sucio. Para poder ser todo lo tuneable que se pueda, está todo lleno de clases que, en general, no se usan para nada. El uso de PHP (por cierto, ¡qué sintaxis más fea!) no ayuda: genera (por defecto) un montón de blancos. El código no está minificado. Este artículo que estás leyendo, por ejemplo, escrito en REXXHTTP, carga en 38 ms y ocupa 8.9 Kb; el tiempo de carga total, DOM incluído (8 ficheros) es menor que 250 ms. Con el cache deshabilitado, lo mismo: menos de 250 ms. Esta página de Wordpress, por el contrario, carga en 621 ms., además pide 28 ficheros más, y el tiempo de carga total (DOM incluido, con cache) es de 995 ms, mientras que, si eliminamos el cache, nos situamos en 1.270 ms.

Compresión

Apache 2.4 utiliza por defecto mod_deflate, que comprime los ficheros en tránsito, incluso para las aplicaciones CGI (como las basadas en REXXHTTP). Eso minimiza el tránsito por la red y por tanto aumenta substancialmente la velocidad de carga, lo que contribuye a hacer la web todavía más rápida.

Mobile-first

Bootstrap convierte en trivial generar páginas que se vean bien desde los móviles (más del 50% de las visitas ya son desde el móvil) y a la vez sean bonitas, también, en el escritorio (o en artefactos intermedios, como las tablets), y todo eso sin recurrir a los "sitios para móviles" (al estilo de "m.epbcn.com"). Si además tenemos en cuenta la velocidad de carga (muy comparable a las páginas AMP), el resultado es buenísimo.

Responsive

Los menús se reordenan automáticamente según el tamaño de la pantalla, y lo mismo sucede con las imágenes, lo que hace la experiencia de navegación mucho más agradable. Es posible que algunas páginas antiguas (en particular, las del blog) no se muestren bien del todo; si es así y me lo hacéis saber, corregiré la página en cuestión (y [opcional] os pago una cerveza).

Unificada

Ya lo he dicho al principio, pero ahora la web se ve igual estemos donde estemos (antes no era así: las páginas de la biblioteca, por ejemplo, tenían un aspecto completamente diferente a las demás).

Tareas pendientes

• Mover las webs a la máquina virtual (más seguro que Dropbox), excepto la fonoteca, que pesa demasiado y haría los backups de la máquina virtual muy complicados. Implementar acceso mediante ssh con certificados para las personas que deban modificar cosas.
• Mover los menús secundarios a las subclases de "EPBCN". Es donde deben estar. Corregido el 1 de marzo de 2017.
• Pasar algunos hacks que usan style="..." a CSS.
• Terminar las aplicaciones que no están terminadas. En serio: al tener que migrarlas, me he dado cuenta de que a varias les falta funcionalidad. Me imagino que lo dejé porque estaba absolutamente agotado (caso seguro: la Biblioteca) o porque surgieron otras cosas que reclamaron mi atención (a fin de cuentas, todo esto lo hago en mis ratos libres).
• Optimizar imágenes, especialmente en las páginas más visitadas, y después en las demás.

¿Comentarios?

Todo esto está nuevito y reluciente. Si le veis fallos, queréis mejoras, o tenéis comentarios, un email a jose.maria.blasco@gmail.com please.

Josep Maria Blasco, 27 de febrero de 2017.