Embed Size (px)
DESCRIPTION
Presentaciòn de RequireJS, librerìa para definiciòn de modulos AMD de Javascript
Citation preview
Sobre mi
René [email protected]://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
