Sorting Javascript-Typescript code with RequireJS

requireJS

Let’s keep on learning web development, and today it is time to set up some order into the kaos that suppose working with Javascript (also TypeScript). The best solution for that is using RequireJS, a library created for load traditional scripts or AMD modules in order to make more maintainable a reuse the code. Also, it s a good tool for sorting code becuase when you’re creating small apps, there can be small problems, but for larger projects, things can be really complicated. In the previous entrance I wrote about external modules and requireJS, but there is more to learn! Let’s go!

requireJS

What is AMD

Let’s define first what a Javascript module is, and it’s a peace of code that some how is self-contained, but it also exposed a public interface that can be used, and protected from the blogal use. This way, using modules is a good way of splitting the Javascript code for reuse and for a better maintain.

AMD is Asyncronous Module Definition. Is a Javascript API for defining modules whose dependencies are also loaded asyncronously. It’s very useful for speeding the time of load a web, loading dependencies before executing a module!.

For using AMD modules, they must meet certain requirements:

  • How modules are build
  • How to export values
  • how dependencies are loaded

I am seriously, but you should be using RequireJS if you need to create large apps (my case!!). Another advantage of using asyncrony is that modules are loaded when thay are needed, making the response faster!

AMD was created and designed to work in the browser (CommonJS is best for the server, mainly used with NodeJS).

RequireJS

Is the most known implementation for loading AMD modules. AMD modules starts with define, a function that requires only two parameters: an array with all module’s dependencies and the function with the code of the module:

define({
propiedad: 'valor'
});
define(function modulo() {
//haz lo que quieras
//retorna lo que quieras
});
define(function definicion_modulo() {
return function modulo() {
}
});
define([ 'folder/dependencia' ], function definicion_modulo(dep) {
return function modulo() {
//usa dep
}
}
);

Define is used for defining new modules, that can be used (or not) by other modules.

It is very important to define a configuration for requireJS by using require.config, where the developer defin paths, dependencies, …


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

Para entender la potencia de RequireJS sería de mucha utilidad tener todos los ficheros Javascript en un mismo subdirectorio (ver aquí).

In this entrance you can go further when working with TypeScript, RequireJS, jQuery and Bootstrap, with the template I use.

To end with, I encourage you to read this article related to RequireJS and AMD.

Happy coding!