Introducciòn a RequireJS
Upcoming SlideShare
Loading in...5
×
 

Introducciòn a RequireJS

on

  • 493 views

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

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

Statistics

Views

Total Views
493
Views on SlideShare
493
Embed Views
0

Actions

Likes
2
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introducciòn a RequireJS Introducciòn a RequireJS Presentation Transcript

    • 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.
    • 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!
    • SPA Single Page Application
    • SPA - module loader define(function module() { return { load: function load(path) { require([ path ], function( module ) { if (typeof module === 'function') module(); }); } } });
    • Optimizer Uglify 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 modules: [ { name: 'main' } ] }) : 'standard',
    • 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