Recientemente, en Apiumtech, nos entró un proyecto para hacer una página web que, según el diseño era bastante dinámica. Después de investigar y probar backboneJS, dimos con un framework bastante nuevo llamado AngularJS. Esta preciosidad, hecha por los chicos de Google nos ha enamorado por la facilidad de uso y la potencia a la hora de gestionar el código. Unánimemente decidimos crear la aplicación con este framework, que apunta a tener futuro y un fuerte impacto en esta nueva era de javascript.
Como en informática no se puede predecir al 100% las complicaciones con las que te vas a encontrar, nosotros también nos dimos de morros con el hecho de tener tantos archivos javascript separados. Aunque angular gestiona las dependencias y no empieza la ejecución hasta que tenga todo lo que necesita, el tiempo de respuesta del servidor era demasiado lento.
EXPLIQUEMOS MEJOR EL PROBLEMA
“Cualquier aplicación grande precisa de un empaquetador, una herramienta que te permita unificarlo todo y, si puede ser, comprimirlo. Cuando hablamos de aplicación web, dicha herramienta tiene una importancia mayor.”
VEÁMOS MAS EN DETALLE
Cuando un navegador accede a una pagina web, hay una petición por cada archivo necesario para la visualización del contenido. Y si tenemos n archivos javascript, se harán n peticiones. Y lo peor de todo es que no tenemos control sobre el orden en el se que descargan, ya que algunos pueden (en muchos casos) tener dependencias entre ellos.
Con Angular no teníamos el problema de las dependencias, siempre y cuando utilizáramos los modules suyos. Pero en cuanto queríamos incluir un archivo externo, resultaba ser un problema. Aquí es donde encontramos a otra perla llamada RequireJS.
“RequiereJS permite no solo empaquetar tus archivos javascript y css, sino minimizarlos, especificar las dependencias y exportar e importar módulos javascript como si fueran clases de java o de cualquier otro lenguaje de programación orientado a objetos.”
Todo pintaba muy bien, pero la integración entre los dos frameworks no es sencilla.
VAYAMOS POR PARTES
Para integrar requiereJS en una aplicación Angular no basta solo con instalarlo y empezar a “requerir” tus archivos tal y como lo tienes. Tendrás que adaptar tu código. Este es un buen punto donde pararse a pensar si vale la pena hacerlo o no. El cambio no es que sea muy costoso (los tests será lo mas problemático), pero te obliga a trabajar de una determinada manera y, de por si, crea una fuerte dependencia.
En las próximas entregas vamos a explicar como instalar RequireJS, configurarlo, integrarlo con angularJS sin perder la opción que nos facilita angular con sus “modules” y como modificar y/o crear tests.
Al final veremos como nuestra aplicación se vuelve mas manejable, escalable y de fácil mantenimiento. Separaremos diferentes partes del código en módulos de angular y de RequireJS para poder implementar cualquier patrón que nos sea necesario.
