Sesión 6: inclusión de JavaScript en el tema

Creación de temas personalizados en Drupal 10

En esta sesión, exploraremos cómo añadir JavaScript a un tema en Drupal para agregar funcionalidades interactivas. Veremos el proceso de integración de archivos JavaScript y aprenderemos a optimizar su rendimiento en el sitio para asegurar una experiencia de usuario rápida y eficaz.

Objetivo

El objetivo de esta sesión es aprender a incluir archivos JavaScript en un tema de Drupal y utilizarlos para añadir funcionalidades interactivas al sitio. También se cubrirán técnicas de optimización para garantizar que el JavaScript se cargue de manera eficiente.

Contenido

Incluir archivos JavaScript en un tema de Drupal: cómo registrar y cargar archivos JavaScript en el tema de Drupal, incluyendo opciones de carga asincrónica.
Buenas prácticas para optimizar JavaScript: consejos sobre cómo minimizar el uso de JavaScript, reducir el tamaño de los archivos y mejorar el rendimiento en el sitio.
Agregar funcionalidad básica: ejemplos de funcionalidad interactiva con JavaScript que puedes añadir al tema.

Incluir archivos JavaScript en un tema de Drupal

Para agregar JavaScript a un tema en Drupal, debes registrar los archivos en el archivo .libraries.yml del tema y cargarlos en el archivo .info.yml. A continuación, detallamos cómo hacerlo:

Crear la carpeta js:

En la carpeta de tu tema (por ejemplo, themes/custom/mi_tema), crea una subcarpeta llamada js.
Dentro de js, crea un archivo llamado scripts.js. Este archivo contendrá el código JavaScript personalizado que aplicaremos al tema.

Registrar el archivo JavaScript en el archivo .libraries.yml:

En la carpeta raíz de tu tema, abre o crea el archivo mi_tema.libraries.yml.

Define una biblioteca para el archivo JavaScript, como se muestra a continuación:

interactividad:
  js:
    js/scripts.js: {}
  dependencies:
    - core/jquery

Este código registra la biblioteca interactividad, que incluye el archivo scripts.js. La dependencia de core/jquery asegura que jQuery se cargue antes de ejecutar el JavaScript, si necesitas jQuery en tu tema.

Incluir la biblioteca en el archivo .info.yml:

Abre el archivo .info.yml de tu tema y agrega la biblioteca que acabas de crear:

libraries:
  - mi_tema/interactividad

Verificar la inclusión de JavaScript:

Limpia la caché de Drupal usando drush cache:rebuild o desde la interfaz de administración.
Visualiza el sitio en un navegador y verifica que el archivo scripts.js se está cargando correctamente. Puedes confirmarlo inspeccionando el código fuente de la página y buscando scripts.js en los recursos.

Buenas prácticas para optimizar JavaScript

Para asegurar un rendimiento óptimo, es importante tener en cuenta algunas buenas prácticas al agregar JavaScript en Drupal:

Cargar archivos JavaScript de manera diferida o asincrónica:

Si el archivo JavaScript no es esencial para el contenido inicial de la página, puedes diferir su carga. Esto mejora la velocidad de carga de la página.

Para agregar un archivo JavaScript con carga diferida, utiliza esta configuración en mi_tema.libraries.yml:

interactividad:
  js:
    js/scripts.js: { attributes: { defer: true } }

Minimizar y optimizar el código JavaScript:

Al finalizar el desarrollo, minimiza el archivo JavaScript para reducir el tamaño de los archivos que se cargan en el navegador. Puedes usar herramientas como uglifyjs o terser para comprimir y optimizar el código JavaScript.

Evitar el uso excesivo de JavaScript:

Reduce el uso de JavaScript cuando sea posible y usa selectores específicos para limitar la cantidad de elementos que el script debe manipular. Esto reduce el tiempo de procesamiento y mejora el rendimiento.

Usar eventos con moderación:

Limita la cantidad de eventos que JavaScript detecta y procesa. Por ejemplo, si estás usando eventos scroll o resize, asegúrate de usar throttle o debounce para reducir la frecuencia con la que se ejecutan.

Agregar funcionalidad básica

Para probar que el JavaScript se está cargando correctamente, puedes agregar una funcionalidad sencilla en el archivo scripts.js. Aquí tienes un ejemplo de código que cambia el color de fondo de un encabezado cuando el usuario hace clic en él:

(function ($, Drupal) {
  Drupal.behaviors.miTema = {
    attach: function (context, settings) {
      // Cambiar el color de fondo de un encabezado al hacer clic
      $('.header', context).once('miTema').click(function () {
        $(this).css('background-color', '#ffcc00');
      });
    }
  };
})(jQuery, Drupal);

Este código utiliza el sistema de comportamientos de Drupal, una práctica recomendada para garantizar que el JavaScript funcione correctamente cuando se realizan actualizaciones de AJAX en la página.

La función Drupal.behaviors.miTema crea un comportamiento que se ejecutará cuando la página cargue.
La clase .header en el código JavaScript debe coincidir con algún elemento HTML en el tema. Puedes cambiarla a otro selector si deseas aplicar la funcionalidad a otros elementos.

Tareas

Para poner en práctica lo aprendido en esta sesión, realiza las siguientes tareas:

Crear y registrar un archivo JavaScript:
- Crea el archivo scripts.js en la carpeta js de tu tema.
- Registra el archivo en mi_tema.libraries.yml y agrégalo al tema a través de mi_tema.info.yml.
Implementar una funcionalidad interactiva básica:
- Usa el ejemplo de JavaScript para cambiar el color de fondo de un encabezado o personaliza la funcionalidad a tu gusto. Por ejemplo, podrías hacer que un botón muestre un mensaje cuando se haga clic en él.
Optimizar el rendimiento del JavaScript:
- Configura el archivo JavaScript para que se cargue de manera diferida, si es posible.
- Prueba la funcionalidad en tu navegador y asegúrate de que el rendimiento de la página no se vea afectado.
Pruebas de funcionamiento:
- Limpia la caché de Drupal y carga el sitio en diferentes dispositivos para asegurarte de que el JavaScript se ejecuta correctamente en todos los entornos.
- Documenta cualquier cambio en el archivo .info.yml y .libraries.yml para que puedas rastrear qué bibliotecas y archivos JavaScript están activos en el tema.

Al completar esta sesión, habrás aprendido a incluir JavaScript en un tema de Drupal, aplicando buenas prácticas de optimización y agregando funcionalidades interactivas. Esto te permitirá mejorar la experiencia de usuario y personalizar la interfaz del sitio de una manera efectiva y escalable.

← Anterior Siguiente →