You know exactly where one ravioli end and another begins ..

Separation of control


Revealing Module Pattern



Each Module in charge for one thing , and we don’t care how it does it.

An example of dataservice – it’s purpose is to get some person

We have an inner/private function , that will be called dataservice.getPerson()

And we have an external dependency by jQuery ($) also.





Solving Modularity with Require.js

Lets assume JavaScript files must be loaded in a specific order – then we can use require..

Separation of Concerns

Define the Dependencies

Load Scripts in the Proper Sequence




define the name of the module , add module dependencies and wright the module logic itself.


  • now at the start page reference the require.js
  • add data-main attribute to tell from where you begin the loading , where we have a full list of JavaScript files – kickoff point
  • and require the “alerter” – attention , we didn’t even tell “alerter”anything about dataservice.
  • you can make an alias by paths in requirejs.config  ->  paths:{‘jquery”: “jquery-1.7… “}
  • you can add baseUrl to define the wright folder to look for the js files


In Bundles add jQuery and third party libs we load them  from the beginning because we haven’t written them as requirejs requires Smile

So actually we load bundles – jsapplibs and jsmocks – that are connected in main



we could rewrite the thrird party libs or just define them to apply the requirejs convention,  for instance :


function define3rdPartyModules() {

       // These are already loaded via bundles. 

       // We define them and put them in the root object.

       define('jquery', [], function () { return root.jQuery; });

       define('ko', [], function () { return root.ko; });

       define('amplify', [], function () { return root.amplify; });

       define('infuser', [], function () { return root.infuser; });

       define('moment', [], function () { return root.moment; });

       define('sammy', [], function () { return root.Sammy; });

       define('toastr', [], function () { return root.toastr; });

       define('underscore', [], function () { return root._; });



loadPluginsAndBoot() – extends for other libraries

ko bindingHandlers for instance  – we want to be sure to be loaded only after the third party libraries are loaded.

function loadPluginsAndBoot() {

      // Plugins must be loaded after jQuery and Knockout,

      // since they depend on them.




      ], boot);


the boot from main.js  – running the bootstrapper.js 


config.js – repository of information for my app – it’s a constants file , what routes I’m going to support, expirations, throttle and titles, whether I want to use mock or a real data – the global switches ..


bootstrapper.js  – dependent on  -> ‘routeConfig’, ‘presenter’, ‘dataprimer’

bootstrapper gives the client the most needed data to upload the app without relaying on WIFI!!


dataprimer.js – dependent on –>  ‘ko’, ‘datacontext’, ‘config’

reveiling module pattern – factory for creating a data primer

uses config for logging

datacontext for getting data

ko for binding the data