Introducción a Require.JS

2
17069

Introducción a Require.js

0. Índice de contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil Intel Core 2 CPU T7200 @ 2.20GHz
  • Sistema Operativo: Ubuntu 12.04 LTS x32
  • Sublime Text 2

2. Introducción

Las aplicaciones de Javascript cada vez han aumentado mas de tamaño, lejos quedan esos pequeños Scripts que validaban formularios o añadían unos pequeños efectos a nuestras páginas.

Hoy en día ya podemos hablar de bases de código escritas en su mayor parte en Javascript, lo cual genera problemas a la hora de organizar tu código, Javascript, por defecto no trae ninguna manera de declarar explícitamente módulos en tu Aplicación de Javascript, la solución hasta ahora había sido añadir muchas etiquetas Script a lo largo de tu código, intentando así cargar en orden los distintos archivos que conforman tu código.
Esta solución rápidamente se queda corta, sin saber explícitamente que dependencias tiene cada archivo, dependemos de nuestra memoria a la hora de declarar el orden de carga de estos archivos.

Otra solución que se planteó fue la de desarrollar con el código repartido en distintos archivos y usar alguna herramienta para concatenar el código de los distintos archivos en uno, de manera que solo tengamos que cargar un Archivo y tengamos las ventajas de ambas formas de desarrollo. El problema con este acercamiento, es que, en el entorno de desarrollo añadir un paso intermedio a la hora de poder probar la Aplicación no siempre es beneficioso, además de que puede crear problemas de colisión de nombres, ya que Javascript no provee de ninguna manera de declarar explícitamente Namespaces.

3. Que es Require.js y AMD

Por ello, y hasta que salga la nueva especificación de Javascript ( la cual intentará solucionar estos problemas con una implementación nativa de módulos ), se creo la especificación AMD ( Asynchronous Module Definition ), la cual intenta solucionar ambos problemas ( Definir módulos y declarar explícitamente las dependencias necesarias para cada modulo ). Require.JS se basa en la especificación AMD.

La sintaxis de AMD declara los módulos de la siguiente manera:

    // miModulo.js
    define(['dep1', 'dep2'], function (dep1, dep2) {

        var miModulo = function(){
            //Haz algo

            //Usa cualquier atributo de las dependencias
            dep1.atributo
        }

        return miModulo;
    });
 

Como podemos observar, las dependencias se declaran explícitamente, de manera que no hay ninguna duda de las dependencias que tiene nuestro modulo, lo cual hace nuestros módulos bastante extensibles, otra opción que nos ofrece Require.JS es definir el nombre de nuestros módulos:


    // miModulo.js
    define('miModulo', ['dep1', 'dep2'], function (dep1, dep2) {

        var miModulo = function(){
            //Haz algo

            //Usa cualquier atributo de las dependencias
            dep1.atributo
        }

        return miModulo;
    });

Esto no es necesario a la hora de declarar módulos, ya que Require.JS contará con que el modulo se llama igual que el archivo, es decir que en ambos ejemplos para Require, ambos módulos se llamarían igual.
Require también nos permite asignar nuestras dependencias a una variable dentro de un modulo:


    // miModulo.js
    define(['dep1', 'dep2'], function () {

        var dep1 = require("dep1");
        var dep2 = require("dep2");

        var miModulo = function(){
            //Haz algo

            //Usa cualquier atributo de las dependencias
            dep1.atributo
        }

        return miModulo;
    });

Una vez hayamos declarado como módulos las distintas partes de nuestra aplicación, ya solo necesitamos añadir la siguiente linea a nuestro archivo HTML

<script data-main="scripts/main" src="scripts/require.js"></script> 

Esta linea cargará require.JS, y después cargará el modulo main ( en scripts/main.js ), el cual tendrá el grueso de la aplicación, Require se encargará de cargar los módulos que sean necesarios nada mas arrancar la aplicación leyendo las dependencias de todos los módulos que sean requeridos, Require también nos permite cargar módulos de forma asíncrona

4. Conclusiones

Con el crecimiento de Javascript en general y de las Single Page Application en concreto, se ha hecho necesaria la posibilidad de modularizar nuestras Aplicaciones, Require.JS no solo nos ofrece una manera de modularizarlas sino que también nos ofrece una manera de cargar asíncronamente nuestros módulos, de manera que solo tengamos que cargar los módulos necesarios para la página en la que se encuentre el usuario, lo cual hará nuestra aplicación mas rápida.

2 COMENTARIOS

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad