Gestión de la Dependencia JavaScript en Joomla!
Traducción y adaptación al español del artículo “Joomla JavaScript Dependency Management” escrito por Ashan Fernando publicado en la edición de Mayo de 2014 de The Joomla! Community Magazine.
El uso de JavaScript en Joomla! ha ido en aumento en los últimos años. Ahora, el tener un apropiado mecanismo de manejo de dependencias JavaScript, va convirtiéndose en un requisito indispensable para mantener el código JavaScript en Joomla!
Enfoque actual
Actualmente en Joomla!, los archivos JavaScript se cargan con el uso de funciones PHP del lado del servidor que incluye el nombre del archivo JavaScript para el cuerpo de la página (<body>) o la cabecera (<header>). A continuación se muestra la naturaleza de estos scripts PHP.
Por ejemplo. JHtml('Load Script 1')
Esto requiere un orden apropiado de los scripts así como un manejo manual de los conflictos con los scripts que lleva tiempo y se vuelve difícil.
Desafíos
En primer lugar, esta naturaleza de la carga de JavaScript está estrechamente unida a los segmentos de código PHP que requieren estos scripts. Este enfoque también limita la modularidad de JavaScript, ya que es difícil mantener el orden de ejecución manualmente mediante la separación de la lógica en funciones distintas.
Además, hay problemas inherentes a JavaScript donde estos scripts necesitaron que la funcionalidad esté disponible globalmente, lo que requiere la creación de objetos globales JavaScript que a su vez representa problemas de mantenimiento, causando un rápido descenso en la productividad al escribir plugins o componentes JavaScript pesados.
Y uno de los principales problemas encontrados es el conflicto que ocurre con los cambios inesperados de las variables globales JavaScript. En lo personal, he experimentado este problema al eliminar las dependencias MooTools desde Joomla! y reemplazarlas con jQuery. El conflicto se propagó por todo el CMS en ausencia de separación de los ámbitos de las variables.
Futuro de la gestión de la dependencia
Una de las decisiones difíciles que debe tener lugar es separar JavaScript de la lógica del lado del servidor escrita en PHP en Joomla! En relación con la gestión de la dependencia, esto incluye la eliminación del mecanismo de carga de la dependencia JavaScript con PHP donde los scripts se cargan de eficientemente usando el propio JavaScript.
Actualmente hay muchos mecanismos que han demostrado tener éxito en varios proyectos industriales. Uno enfoque popular sería utilizar la Definición Modular Asíncrona (AMD, Asynchrony Modular Definition), o en otras palabras, el enfoque de AMD que es capaz de cargar las dependencias JavaScript (incluidas las librerías y los archivos de JavaScript) necesarias para ejecutar un conjunto lógico de JavaScript. Este mecanismo también anima a limitar el uso de las variables con ámbito global, así como modulariza el JavaScript en formas requeridas por el usuario sin sacrificar la necesidad de cargar archivos JavaScript en el orden de ejecución.
Por ejemplo, si tomamos el archivo require.js, que ya implementa tales capacidades, la sintaxis para cargar un conjunto de dependencias sería la siguiente:
Cuando se trata de Joomla! estas sintaxis de la carga de la dependencia se pueden personalizar para tener un enfoque como se muestra a continuación para crear un futuro diseño de prueba que contenga una librería existente como require.js.
Joomla.LoadScript([‘’jQuery”,”Search”,”IndexJS”], function($, Search, Index){ // Lógica según jQuery, librerías "Search" e "IndexJS"});
Aunque a primera vista parece un poco confuso, el primer parámetro es para especificar:
- La ruta de archivo JavaScript
- El alias que se refiere a una ruta
que cargará los archivos/módulos JavaScript apropiados, y luego llama a la función basada en los módulos y archivos JavaScript especificados que devuelve sus variables contextuales sin convertirlas en variables globales. Con este enfoque todas las dependencias pueden cargarse a nivel de JavaScript antes de ejecutar los scripts individuales sin necesidad de agregarlos a la cabecera (<header>).
Costo del Cambio y Alcance
Aunque de repente esto parezca ser verdaderamente desafiante, el beneficio que brinda al futuro del proyecto es realmente valioso y provee un concepto futuro de diseño de prueba que introduce más lógica modular basada en JavaScript para mejorar la usabilidad de Joomla!
En el contexto JavaScript de Joomla, basado en las implementaciones actuales, se requiere modificar ligeramente las librerías JavaScript existentes a fin de no estropear el ámbito global, pero volver a las dependencias especificadas en un concepto similar a la sintaxis del módulo require.js conservando la compatibilidad con versiones anteriores. Además, la estrechamente acoplada lógica JavaScript puede separarse en diferentes módulos y abstraerse jerárquicamente utilizando una adecuada planificación y agrupando los módulos de JavaScript.
Aunque las necesidades no son visibles claramente en la actualidad, los beneficios de hacer estos cambios darán a Joomla! una ventaja en el futuro para reducir las complejidades del JavaScript y utilizar las innovadoras mejoras tecnológicas del navegador.
Traducido y adaptado al español por César Vargas-Machuca. El artículo original “Joomla JavaScript Dependency Management” fue escrito por Ashan Fernando y está publicado en la edición de Mayo de 2014 de The Joomla! Community Magazine.
Sobre el autor
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comentarios