Presentaciòn de RequireJS, librerìa para definiciòn de modulos AMD de Javascript

2. Sobre mi
René Olivo
rene@minet.com.do
http://github.com/reneolivo/
●
●
●
●
BSc. Ingenieria de Sistemas.
MSc. Electronic Commerce.
15 años de experiencia en
el área web.
Hobbies: aprender, enseñar & allthings-web-development.
Recientemente tambièn ChapHop.

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

5. Què es RequireJS?

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

7. 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!

8. Show me the money $$$

9. 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!

10. Anatomìa de Define
( y Require… )

11. Definiciòn de objetos / configuraciones
define({
propiedad: 'valor'
});

12. Definiciòn de modulo
define(function modulo() {
//haz lo que quieras
//retorna lo que quieras
});

13. Definiciòn de modulo
define(function definicion_modulo() {
return function modulo() {
}
});

14. Definiciòn de dependencias
define(
[ 'folder/dependencia' ],
function definicion_modulo(dep) {
return function modulo() {
//usa dep
}
}
);

15. No, no, no!
define(
'nombre',
[ 'folder/dependencia' ],
function definicion_modulo(dep) {
return function modulo() {
//usa dep
}
}

16. Configuraciòn

17. Opciones màs importantes:
●
●
●
●
●
●
●
baseUrl
waitSeconds
urlArgs
paths
shim
deps
callback

18. Opciones para multiple versiones
● context
● map

19. SHIM
Shim that yo!

20. SPA
Single Page Application

21. SPA - module loader
define(function module() {
return {
load: function load(path) {
require([ path ], function( module ) {
if (typeof module === 'function')
module();
});
}
}
});

22. Optimizer
Uglify that yo!

23. Configuraciòn de la optimizaciòn / build
Guìa completa:
https://github.com/jrburke/r.js/blob/master/build/example.build.js

24. Opciones màs importantes
({
appDir
: './src',
dir
: './build',
baseUrl
: 'js',
mainConfigFile
: './src/js/config.js',
paths
:{
jQuery: '../libs/jquery/jquery.min'
},
optimizeCss
modules: [ { name: 'main' } ]
})
: 'standard',

25. Conclusiones

26. 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.

27. Further Reading
● RequireJS y NodeJS:
http://requirejs.org/docs/node.html
● RequireJS y Angular :
http://www.startersquad.com/blog/angularjs-requirejs/

28. Preguntas

29. Gracias