When the application is loaded in the browser, it loads all the JavaScript files in a specific order. The order is important because it represents the chain of dependencies.
<script src="js/vendor/jquery-2.1.4.min.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/vendor/sweetalert.min.js"></script> <script src="js/vendor/jquery.noty.packaged.min.js"></script> <script src="js/vendor/underscore-min.js"></script> <script src="js/vendor/backbone-min.js"></script> <script src="js/vendor/backbone-validation-min.js"></script> <script src="js/common.js"></script> <script src="js/app.js"></script> <script src="js/apps/contacts/router.js"></script> <script src="js/apps/contacts/models/contact.js"></script> <script src="js/apps/contacts/models/phone.js"></script> <script src="js/apps/contacts/models/email.js"></script> <script src="js/apps/contacts/collections/contactCollection.js"></script> <script src="js/apps/contacts/collections/phoneCollection.js"></script> <script src="js/apps/contacts/collections/emailCollection.js"></script> <script src="js/apps/contacts/contactList.js"></script> <script src="js/apps/contacts/contactViewer.js"></script> <script src="js/apps/contacts/contactEditor.js"></script> <script src="js/apps/contacts/app.js"></script> <script type="text/javascript">App.start();</script>
This is the standard way of script loading; the browser is responsible to parse these script tags, fetch the script files from the assets server, and then execute them in that order. So that the Browser will execute jQuery, then Bootstrap, then Underscore and so on.
As you know, Backbone depends on Underscore and jQuery to work; it uses jQuery to handle DOM selections in Backbone views and Underscore as the utility library. For this reason, jQuery and Underscore should be loaded before Backbone.
In the project code, app.js depends on Backbone, so that it's loaded after Backbone. The apps/contacts/app.js module is the application façade. It depends on all the other modules in the subapplications, which is why it's loaded last.
Figure 4.2 shows the dependency of the modules graphically. Note that it's a simplification and not all the dependencies are shown.
Figure 4.2 Dependency graph