Creación de Plantillas HTML Dinámicas en TypeScript

Clase 9 de 17 • Curso de Server Side Render o SSR con React.js

Clase anteriorSiguiente clase

Resumen

¿Cómo crear una plantilla HTML dinámica en TypeScript?

¿Te gustaría aprender a manejar plantillas HTML en TypeScript? En esta guía, te explicamos cómo crear una plantilla dinámica que te permitirá integrar cualquier clase de HTML. Esta técnica es esencial al desarrollar aplicaciones modernas, especialmente cuando trabajas con frameworks como React.

¿Cuál es la base para crear una plantilla HTML?

Para empezar, creamos una función en TypeScript que va a manejar nuestra plantilla HTML. Esto te permitirá no solo tener un HTML tradicional, sino también incorporar cualquier estructura HTML directamente desde el servidor.

Primero, vamos a crear un archivo llamado template.ts:

// template.ts
export const template = (html: string): string => {
  return `
    <!DOCTYPE html>
    <html lang="es">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Mi Aplicación</title>
    </head>
    <body>
      ${html}
    </body>
    </html>
  `;
};

¿Cómo importar y utilizar la función de plantilla?

Una vez creada la plantilla, el siguiente paso es importar y utilizar esta función en tu servidor para enviar respuestas HTML. Asegúrate de haber exportado tu función correctamente para poder ser utilizada en otras partes de tu aplicación.

// archivo del servidor (por ejemplo, index.ts)
import { template } from './ruta/del/archivo/template';

const htmlContent = '<h1>Contenido dinámico insertado</h1>';
const page = template(htmlContent);

console.log(page);  // Aquí podrías realizar un envío como respuesta en un servidor HTTP

¿Cómo asegurarse de que el HTML sea dinámico?

Para hacer que tu HTML sea verdaderamente dinámico, la función debe aceptar contenido variable que pueda personalizarse. Utiliza template literals en JavaScript y TypeScript para insertar variables dentro de las cadenas de texto. Observa cómo se usa ${html} para incluir cualquier dato pasado al generar la estructura completa del documento HTML.

¿Cómo manejar el lenguaje del documento HTML?

Es importante que el documento HTML refleje el idioma en el que está desarrollada tu aplicación. En el ejemplo, el atributo lang en la etiqueta <html> está configurado como "es" para el español. Adapta este ajuste según las necesidades de tu aplicación para mejorar la internacionalización y accesibilidad.

¿Qué hacer con archivos estáticos?

Enviar archivos estáticos, como imágenes, CSS o un favicon, es crucial para completar la experiencia de usuario. El proceso de servir archivos estáticos suele hacerse mediante servidores de aplicaciones o configurando el servidor para servir estos elementos específicos. Planifica integrar esta funcionalidad a medida que avanzas con el desarrollo de tu aplicación.

Visitar la documentación oficial de frameworks como Express.js o módulos npm para manejar el servidor de manera eficiente y aprovecha sus configuraciones de archivo estático. Esto asegurará que elementos como el favicon se entreguen correctamente a los usuarios.

Avanza con confianza en el aprendizaje de la programación y sigue explorando las herramientas que ofrecerán novedosas formas de facilitar tu desarrollo web. ¡Aún hay mucho por explorar y lograr!