Using modules and dependency management in JavaScript applications with AMD - require.js
One of the first things I had to learn when starting developing JavaScript applications was how to overcome lack of dependency management and concept of modules and namespaces. Unfortunately there are few JS books touching on these topics. When building large scale application, implementing hundreds of <script> tags becomes really hard to manage, especially when we need to keep them in specific order. Also the more script tags are included in the html files, the more requests a browser needs to do - this may cause a significant impact to the overall user experience - loading times, UI freezes... As JS lately became a language of choice for developing web applications targeting not only desktops but also mobile devices, developers needed to find a solution for that. Instead of waiting for changes to the JS specification (http://wiki.ecmascript.org/doku.php?id=harmony:modules) and for implementing that consequently to the popular browsers, they agreed for a standard that would be used both on server and client side and they named it CommonJS (http://wiki.commonjs.org/wiki/CommonJS). The solution works great with JS on the server side but due to the fact that files are loaded synchronously, it doesn't work well with browsers as this would block user interface during script load process. So the client side solution was modified for asynchronous loading by wrapping modules in files into callback functions. This is known as AMD - Asynchronous Module Definition
(https://github.com/amdjs/amdjs-api/wiki/AMD, http://requirejs.org/docs/whyamd.html). One of the most popular AMD loader solutions is the require.js and in this article we will look how to use it.