Our Blog

RequireJs: Introduccion

A lo largo del tiempo el uso de Javascript se ha masificado de forma tal que hoy en dia existen cientos de librerias y frameworks que nos solucionan muchos problemas. Ahora bien para poder usar estas librerias/frameworks debemos importar cada una de ellas en nuestro HTML (<script src=”libreria.js”></script>) haciendo que el mismo crezca en tamaño y dando la posibilidad a que nos equivoquemos en el orden de importacion o las librerias que son necesarias para que algo funcione.

Por todos los motivos expuestos en el parrafo anterior es que nacio RequireJS posibilitando solo colocar en nuestro HTML una pequeña cantidad de lineas para importar las librerias.

¿Que es?

RequireJS es una libreria open-source de JavaScript que nos permite separar y aislar modularmente los componentes de una aplicacion/pagina y resolver las dependencias de estos componentes. La idea central de esta libreria es evitar tener que importar muchos archivos dentro de nuestro HTML para ello podemos tener un unico punto de entrada importando un solo archivo JavaScript que se encargue de cargar los modulos que son necesarios para una pagina puntualmente.

Ademas esta libreria implementa el patron de diseño AMD (Asynchronous Module Definition), el cual lo que hace es definir y cargar de forma asincronica las dependecias.

Por ultimo vale la pena mencionar que NodeJs ha visto las ventajas del uso de esta libreria y la ha colocado como su estandar para hacer referencia a otros modulos.

Ventajas

Veamos ahora algunas de las ventajas mas importantes que posee RequireJs:

  • Nos permite gestionar las dependencias evitando asi tener que colocar todo los archivos JavaScript dentro del HTML
  • Los archivos JavaScript se carga de forma asincronica evitando que la pagina se bloquee esperando tener todos los archivos
  • Genera un solo archivo JavaScript del lado del cliente lo que permite optimizar la cantidad de request que se hacen al servidor como asi tambien el tiempo de carga de la pagina,

¿Como lo instalo?

Para poder usarlo deberemos tener descargada la libreria e importada dentro de nuestra pagina HTML. Para descargarla existen dos formas de hacerlo una es descargarla manualmente de la pagina oficial o bien usando npm que lo hace por nosotros y nos permite tener un mejor control de que version estamos usando.

Veamos ahora como hacerlo con npm ya que la otra forma no posee mayores complicaciones, para poder instarlo con npm debemos tener instalado previamente NodeJs y npm, en general este ultimo se encuentra instalado en nuestra maquina cuando instalamos NodeJs o si contamos con una versión superior 0.6.3. Una vez que tengamos instaladas ambas cosas procedemos a instalar a nivel la librería para poder usarla dentro de nuestra aplicacion/pagina para ello deberemos abrir una terminal y dirigirnos al directorio raiz donde estan todos nuestros archivos referidos a la aplicacion y ejecutar estos comandos:

npm init
npm install requirejs

Estos comandos lo que haran es generanos un archivo json (package.json) el cual contendra todas las referencias a las librerias que usemos con sus respectivas versiones. Si abrimos el archivo en cuestion podremos llegar a ver algo similar a esto:

{
   "name": "web",
   "version": "0.0.1",
   "devDependencies": {
     "requirejs": "~2.1.15"
   }
}

Tengase en cuenta que la version de RequireJs puede ser superior a la mencionada en este post.

¿Como lo uso?

Para empezar a usar RequireJs deberemos una vez descargada la libreria incluirla dentro de cada uno de nuestros archivos HTM y indicar cual es el archivo que tiene la definicion de todos los modulos existentes. En el siguiente ejemplo podran ver la linea que debe ser agregada dentro del tag head del HTML, el cual hace referencia a la ubicacion de la libreria y un atributo data-main que indica la ubicacion del archivo JavaScript necesario para la pagina en cuestion.

Projecto RequireJs

Veamos primero como configurar la ubicacion de las librerias y el nombre que le daremos a cada una de las que vamos a usar en la pagina del ejemplo. Antes que nada esta configuracion debe ir siempre en la parte suprior del archivo JavaScript para que la configuracion sea valida.

require.config({
   baseUrl: 'lib',
   paths:{
      jQuery : "jquery/jquery-1.10.2.min" 
   } 
});

Como se ve en este fragmento de codigo dentro del tag de paths se define el nombre del modulo del lado izquierdo y luego de la ubicacion de la misma. Ademas existe un tag en la parte superior llamado baseUrl que indica cual es el path que contiene todas las librerias, en el caso del ejemplo jquery se encuentra dentro de la carpeta lib.

Una vez definidos los modulos con sus respectivas urls podremos definir cuales son los modulos necesarios y el orden de carga de los mismos, asi como tambien como el nombre de la variable que se usara en todo el JavaScript.

requirejs(['jquery'], function($) {
    console.log($); //Aqui va toda nuestra logica relacionada con la pagina
});

Como puede verse se pide cargar el modulo de Jquery y al mismo se le asigna el simbolo de pesos($) para que pueda hacerse referencia internamente al mismo. Recuerden que este fragmento de codigo siempre va debajo del codigo de configuracion.

Definiendo modulos

Hasta ahora vimos como configurar y referenciar a modulos de librerias que ya existen como ser el caso de Jquery pero que pasa si queremos definir un modulo propio de nuestra aplicacion/pagina para ser utilizado, la forma de hacerlo es bastante sencilla es crear un archivo nuevo (por ejemplo custom.js) y dentro de el poner algo como esto:

//defino mi modulo
define(function() {
  return {
    lanzarAlert: function(){
      return  alert("algo");
    }   
  };  
}

En el fragmento del codigo que se menciona aqui arriba todo lo que se encuentre dentro del return es aquello que podra ser invocado o usado por cualquier otro JavaScript.

Ahora bien la forma para usarlo dentro de nuestro ejemplo del punto anterior es igual que para el caso de JQuery, colocar la ruta y el nombre que le queremos asignarle.

Conclusion

Hemos visto a lo largo de este post RequireJs nos brinda grandes ventajas a la hora de crear nuestras paginas reduciendo la cantidad de request que hacemos contra nuestro servidor a la vez que reduce la cantidad de importacion de archivos de javascript en nuestros archivos HTML.

No comments
TeraswapRequireJs: Introduccion

Related Posts