Para el que comienza en require.js

[Jesús Guibert]

Si, haber si me sale...

Hoy en dia esta muy de moda utilizar aplicaciones Web, utilizando una
tecnica que se llama Single Page App, y basicamente es un solo documento
que contiene toda la logica del lado del cliente. Para aplicaciones
chicas o por ejemplo para probar alguna que otra cosita esto funciona
impecable. Pero cuando comienza incrementar las lineas de codigo tener
todo en un documento se vuelve muy engorroso,dificil de mantener y poco
claro. La ventaja que declaramos en el HEADER de la pagina y todo
funciona bien.

Facilmente en javascript podes separar en varios documentos js, estos
documentos lo podemos ubicar en una estructura dentro del filesystem del
servidor web, y funciona bien lo malo es que no podes tener un
'control' de las dependencias ya que si tenes 20 archivos tenes que
tener muy bien mapeado las dependencias de cada uno.
Ah todo esto se busco la forma de algo que lo haga casi solo, es decir
que no tengamos que ser estrictamente en el orden de cuando importamos
un JS.

Porque sabemos que es distinto

<script type='javascript' src='persona.js' />
<script type='javascript' src='casa.js' />

a

<script type='javascript' src='casa.js' />
<script type='javascript' src='persona.js' />


Claramente en el segundo ejemplo si casa.js tiene alguna dependencia en
persona.js no va a funcionar por el maldito orden, y no hay vuelta.

Aca es donde entra requirejs:

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


en donde nosotros hacemos referencia a la libreria en si require.js y
mediante el atributo "data-main" le indicamos el archivo(sin la
extencion .js) donde nosotros nos defenimos dependencias bases como
decis Nico.
basicamente ese archivo de definicion de dependencias basicamente puede
tener la siguiente estructura:

require.config({
paths:{
text: 'libs/require/text',
templates: '../templates',
backboneforms: 'libs/backbone/backbone-forms',
},
});
esos serian los script que se cargarian dinamicamente y a la hora de
usar cualquiera de ellos desde un archivo js lo hariamos de la siguiente
manera:

// Filename: app.js

define([
'backboneforms' // <-----------------Aca se ve como se llama a la
dependencia declarada mas arriba
], function(){
//aca va el codigo del js
});

Facilmente se cargarian las dependencias que 'backboneforms' utilizaria,

Continuando...

require([
'libs/jquery/jquery-min',
'libs/underscore/underscore-min',
'libs/backbone/backbone-min',
'app'
], function($,_,Backbone,App) {
App.initialize();
});

el codigo anterior del main.js llamaria a librerias las cuales serian
IMPREDECIBLES por ejemplo en un .js en vez de llamar de la siguiente manera

define([
'Backbone' // <-----------------Aca se ve como se llama a la
dependencia declarada en el main.js
], function(Backbone){ // <-----------------Codigo
//aca va el codigo del js
});



Me entrevere un poco con las palabras, haber aca va mas simple


En la pagina se declara esto

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

despues bajo el directorio js/ en el archivo main.js seria esto


require.config({
paths:{
text: 'libs/require/text',
templates: '../templates',
backboneforms: 'libs/backbone/backbone-forms',
},
});


require([
'libs/jquery/jquery-min', // Estas son dependencias
bases, no hay mucho para decir
'libs/underscore/underscore-min', // todas van a depender de de estas
'libs/backbone/backbone-min', //
'app' //Aca hace referencia a app.js, aca se puede
meter una clase Backbone.Route que maneje las acciones
], function($,_,Backbone,App) { // Aca pasamos las librerias bases
anteriores a una nomeclatura que usaremos en los futuros .js(RESPETAR
ORDEN),
App.initialize(); // Aca llamamos a la funcion initialize() del
archivo app.js
});

Adjunto un ejemplito que salio la primera vez que lo meti con el bootstrap.

Saludos

[Nicolas Zuasti]

Muy bueno Jesús, se te mareo la cosa un mínimo al final, totalmente comprensible, hasta no tener absolutamente digerida la forma de trabajar con estas herramientas imposible transmitirlo (me paso a mi también, por eso deje la guía como 4 pasos chotos).

Esta super potente la librería y creo que es una de esas cosas que hay que "tocar" para aprender, los conceptos son sencillos, pero si nunca lo pones en practica nunca vas a terminar de entender para que cuernos sirve :P.

Salu2

A.P. Nicolás Zuasti
@zonical.net/cv

2012/5/16 Jesús Guibert <njgu...@gmail.com>