Successfully reported this slideshow.

Introducciòn a RequireJS

1,123 views

Published on

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

Published in: Technology
  • Be the first to comment

Introducciòn a RequireJS

  1. 1. 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.
  2. 2. Temas ● ● ● ● ● ● ● ● ● RequireJS Modulos y Definiciones Configuraciòn Shim that yo! SPA Optimizer Buenas pràcticas Conclusiòn Further Reading
  3. 3. Què es RequireJS?
  4. 4. RequireJS ● Librerìa para definiciòn de modulos. ● usa el patròn AMD (Asynchronous Module Definition) para la carga de dependencias.
  5. 5. 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!
  6. 6. Show me the money $$$
  7. 7. 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!
  8. 8. Anatomìa de Define ( y Require… )
  9. 9. Definiciòn de objetos / configuraciones define({ propiedad: 'valor' });
  10. 10. Definiciòn de modulo define(function modulo() { //haz lo que quieras //retorna lo que quieras });
  11. 11. Definiciòn de modulo define(function definicion_modulo() { return function modulo() { } });
  12. 12. Definiciòn de dependencias define( [ 'folder/dependencia' ], function definicion_modulo(dep) { return function modulo() { //usa dep } } );
  13. 13. No, no, no! define( 'nombre', [ 'folder/dependencia' ], function definicion_modulo(dep) { return function modulo() { //usa dep } }
  14. 14. Configuraciòn
  15. 15. Opciones màs importantes: ● ● ● ● ● ● ● baseUrl waitSeconds urlArgs paths shim deps callback
  16. 16. Opciones para multiple versiones ● context ● map
  17. 17. SHIM Shim that yo!
  18. 18. SPA Single Page Application
  19. 19. SPA - module loader define(function module() { return { load: function load(path) { require([ path ], function( module ) { if (typeof module === 'function') module(); }); } } });
  20. 20. Optimizer Uglify that yo!
  21. 21. Configuraciòn de la optimizaciòn / build Guìa completa: https://github.com/jrburke/r.js/blob/master/build/example.build.js
  22. 22. 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',
  23. 23. Conclusiones
  24. 24. 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.
  25. 25. Further Reading ● RequireJS y NodeJS: http://requirejs.org/docs/node.html ● RequireJS y Angular : http://www.startersquad.com/blog/angularjs-requirejs/
  26. 26. Preguntas
  27. 27. Gracias

×