Hand out - Javascript - requireJS - part-01

What is RequireJS?
RequireJS is a module loader for JavaScript which facilitate module based programming where large application is broken down into relatively small and manageable code blocks. That leads to the problem of managing those dependencies between modules and emerges the need of module loader. RequireJS is one of the most popular. It improves script load speed.

Few concepts:

1. Without RequireJS, html file has to have all the dependent scripts loaded using script tag and the correct order has to be maintained. That is treated as synchronous loading and scripts will be loaded one at a time which slows the page view. RequireJS uses AMD (Asynchronous Module Definition) where modules are loaded in parallel and boosts the page load

2. Using require() vs. define()

Both require() and define() to load dependencies. The require() function is used to run immediate functionalities, while define() is used to define modules for use in multiple locations. In the example, in both app.js and main.js, need to run immediately. So, require() was used. Check the code below to get better understanding. 

3. In the example, in all places where require() is used, can be replaced with requirejs or vice versa.

4. In main.js, define() could be used instead of require().

Use RequireJS - integrate jQuery/bootstrap and print hello world in console


1. Folder structure - this folder structure is not that important to test RequireJS as long as references are pointed correctly. But have good folder structure helps organizing the files, improves manageability. Folder structure followed -

css - for css files

fonts - for fonts

img - for images 

js - any JavaScript 

js/app - will have application specific js files

js/vendors - any third party js (like - jQuery, bootstrap etc.)

app.js - contains RequireJS configuration

main.js - contains the web app dependencies and once loaded can start application using any framework

index.html - to load the script

note: app.js and main.js can be combined into one and point from script in html file

2. Download RequireJS and put in js/vendors folder

3. Define RequireJS script in the html

Explanation:

- only one script tag where src refers to RequireJS. data-main attribute tells require.js to load js/app.js after require.js loads. js extension is not needed as RequireJS works only on JavaScript

4. Configure RequireJS to load dependecies (jQuery/bootstrap)

Explanation:

baseUrl - the root path to use for all module lookups

paths - path mappings for module names not found directly under baseUrl. The path settings are assumed to be relative to baseUrl, unless the paths setting starts with a "/" or has a URL protocol in it ("like http:")

shim - Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies

End of the file, it makes call to main.js using require() function

5.  Load application dependencies

Explanation: 
- application code requires jQuery. 

- require method - takes two parameters. First parameter takes dependency array. Second parameter defines the function which have application code. In this case just printing a message to screen.

6. Open the index.html file in the browser. Used chrome to view it and developer tool to check console message

Resources:

1. http://requirejs.org/

2. http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/