Introducciòn a RequireJS

Sobre mi

René Olivorene@minet.com.dohttp://github.com/reneolivo/

● BSc. Ingenieria de Sistemas.● MSc. Electronic Commerce.● 15 años de experiencia en

el área web.● Hobbies: aprender, enseñar & all-

things-web-development. Recientemente tambièn Chap-Hop.

Temas● RequireJS● Modulos y Definiciones● Configuraciòn● Shim that yo!● SPA● Optimizer● Buenas pràcticas● Conclusiòn● Further Reading

Què es RequireJS?

RequireJS

● Librerìa para definiciòn de modulos.● usa el patròn AMD (Asynchronous Module Definition) para

la carga de dependencias.

Ventajas● Organizaciòn de proyectos en modulos.● Cargar solo las dependencias definidas, cuando sean

necesarias.● Elimina el uso de variables globales.● Uso de múltiples versiones para la misma librerìa*.● Uglify FTW!

Show me the money $$$

Require VS Define● Require sirve para definir un modulo que no se usarà

como dependencia de otro.● Require tambièn funciona para cargar modulos

dinàmicamente.● Define se usa para definir modulos que seràn

requeridos por otros.● Demasiado complicado? Solo usa Define!

Anatomìa de Define ( y Require… )

Definiciòn de objetos / configuraciones

define({propiedad: 'valor'

});

Definiciòn de modulo

define(function modulo() {//haz lo que quieras

//retorna lo que quieras});

Definiciòn de modulo

define(function definicion_modulo() {return function modulo() {

}});

Definiciòn de dependencias

define([ 'folder/dependencia' ],function definicion_modulo(dep) {

return function modulo() {//usa dep

}}

);

No, no, no!

define('nombre',[ 'folder/dependencia' ],function definicion_modulo(dep) {

return function modulo() {//usa dep

}}

);

Configuraciòn

Opciones màs importantes:

● baseUrl● waitSeconds● urlArgs● paths● shim● deps● callback

Opciones para multiple versiones

● context● map

SHIM Shim that yo!

SPASingle Page Application

SPA - module loaderdefine(function module() {

return {load: function load(path) {

require([ path ], function( module ) {if (typeof module === 'function')

module();});

}}

});

OptimizerUglify that yo!

Configuraciòn de la optimizaciòn / build

Guìa completa:https://github.com/jrburke/r.js/blob/master/build/example.build.js

Opciones màs importantes({

appDir : './src',dir : './build',baseUrl : 'js',mainConfigFile : './src/js/config.js',paths : {

jQuery: '../libs/jquery/jquery.min'},optimizeCss : 'standard',modules: [ { name: 'main' } ]

})

Conclusiones

Buenas practicas

● Un mòdulo por archivo.● No especifiquen la extensiòn .js en las

dependencias.● shim esas librerìas externas como jQuery,

Angular, Backbone, etc.

Further Reading

● RequireJS y NodeJS:http://requirejs.org/docs/node.html

● RequireJS y Angular :http://www.startersquad.com/blog/angularjs-requirejs/

Preguntas

Gracias