Generar una página web completa a partir de varias plantillas en C++ con Silicon

En pleno auge de PHP7, con las velocidades que conseguimos para generar contenidos para web, sigo empeñado en la generación de contenido web en C++. Aunque se complica un poco la programación, el consumo de memoria y CPU suele ser más pequeño, en teoría, ya que lo más seguro es que algunas partes de PHP las hayan creado con más idea que yo las mías en C y hayan conseguido algoritmos más eficientes. Pese a todo, me gusta tener otras alternativas, extensibles a muchos otros campos de la programación como puede ser crear un backend para un demonio de servidor/escritorio/mediacenter... para su administración por otros ordenadores dentro de la misma red.

En este caso, lo que pretendo es generar una web completa (sólo en HTML) a partir de plantillas. Además, como casi todas las páginas web dispondremos de varias partes: por un lado tendremos un layout principal donde se escriben cabeceras y código HTML común para todas las páginas de un sitio (o de una categoría), luego una plantilla de la sección actual donde estamos es decir, la vista actual y por último bloques que harán su render independiente y se empotrarán donde corresponde.

Para ello, voy a seguir utilizando Silicon (y de paso creo una especie de manual online). El objetivo de Silicon es que sea una biblioteca pequeña y no demasiado lenta, que nos permita, además de establecer reemplazos en palabras clave, llamar a funciones, ejecutar pequeñas operaciones lógicas y llamar a funciones para generar salidas más complejas entre otras cosas.

Para ello, vamos a ver un pequeño ejemplo que viene con el proyecto, en él generaremos una página con los siguientes archivos:

• sample1.html : contiene el código de la vista actual. Estará en el directorio views/
• sample_layout.html : contiene la estructura base de la web, etiquetas html, head, body, así como una cabecera, capa de contenido y capa para el pie. Estará dentro del directorio views/
• sample_header.html : contiene la cabecera. También lo colocaremos en views/
• sample.cc : archivo de C++ que generará el HTML resultante

Dentro de las plantillas encontraremos varias palabras clave:

• ProjectTitle : título del proyecto
• Author : autor
• AuthorEmail : correo del autor
• PageTitle : título de la página
• Section0, Section1, Section2, Section3, Section4, Section5 : indicará si se mostrarán o no dichas secciones

También encontramos funciones como:

• date : presenta la fecha actual en un formato determinado de fecha
• includeCss : incluye un archivo CSS. Generamos el código necesario para incluir el CSS <link href="archivo" rel="stylesheet" type="text/css"> Esta función la definiremos en nuestro programa principal
• block : empotrará un bloque en ese punto de la plantilla
• inc : incrementa una variable

Aquí tenemos los archivos:
sample1.html

sample_layout.html:

sample_header.html:

sample.cc:

En el código fuente podemos seleccionar a traǘes de los argumentos de entrada las secciones que queremos representar, por ejemplo, ejecutando:

$ ./sample 1 1 1 0 0 0

o

$ ./sample 1 0 1 0 1

Si falta un valor, se leerá el valor por defecto de la variable.

Tras ello, se establecen los valores de las palabras clave, se define el layout y la función includeCss. El resultado se obtendrá cuando Silicon parsee el fichero de plantilla, luego parseará el layout y colocará cada cosa en su sitio. El contenido de la plantilla principal una vez procesado irá en la posición en la que se encuentra {{contents}} en el layout.

Además, en la plantilla principal, podremos ver que se pregunta si Section0, Section1,...,Section5 existen para mostrarlas. También vemos que hemos escapado código de palabras clave o funciones de Silicon dentro de una plantilla para que no se procese (con \). Y si se ha elegido no mostrar ninguna sección, también lo detectará la propia plantilla.

Un ejemplo un poco más avanzado

Para este tipo de cosas, también tenemos una pequeña extensión llamada SiliconWeb, que incorpora funciones para incluir CSS y JS, así como para hacer el render de todo el JS de la web en un punto fijo de la misma independientemente de dónde se genere ese código. Esto, lo podemos utilizar, por ejemplo para el render de todos los Javascripts al final de la página, incluso cuando nos demos cuenta de que lo tenemos que incluir durante la representación de un bloque independiente.
Como podemos ver en este ejemplo, muy parecido al anterior pero con algunas cosas más para aprovechar nuevas incorporaciones de SiliconWeb:
sample1.html

sample_layout.html:

sample.cc:

En este caso, al haber incluido SiliconWeb, basta con llamar a:

Para cargar todas las funciones y keywords a modo global. Si nos fijamos en el HTML resultante, veremos que la ruta de los CSS será _baseURL concatenado con cssURL, por lo que podemos despreocuparnos de las rutas de todos los CSS. Archivos que podemos incluir tanto desde el código en C++ como desde los archivos de plantilla, ya que, a veces los CSS deberán incluirse cuando se haga el render de un bloque. Además, SiliconWeb incorpora estas funciones que podemos llamar dentro de las plantillas:

• includeCss : que incluye un CSS en el HTML resultante
• includeJs : incluye un archivo Javascript
• directJs : incluye código Javascript personalizado
• renderCss : hace un render de todas las inclusiones de CSS
• renderJs : hace un render de todo los Javascripts que se hayan incluido y de los Javascripts inline.
• insert : inserta un elemento dentro de una lista
• list : Crea una lista HTML con los elementos de la colección especificada

Esto nos puede brindar muchas posibilidades a nuestros programas en C++, para crear salidas HTML fácilmente.

Colaboración

Esta biblioteca podéis utilizarla como queráis para lo que queráis, sin garantías "as is", podéis crear trabajos derivados, romperla, destrozarla y reconstuirla. Eso sí, aunque no es obligatorio, agradecería que me enviaseis cambios, correcciones, bugs, etc.
Hay partes del código que bien podrían ser reescritas, otras deberán ser mejoradas y actualizadas, pero poco a poco. Si te animas, haz un fork del proyecto Silicon en github y échale un ojo.

Foto principal: Michael Podger