1. Require JS
Everything and Anything I.T.
Nirbhay K

3. Why Require Required
Problem
Script Tag Vomit
Solution
AMD

4. The Problem
Web sites are turning into Webapps.
Code complexity grows as the webapp gets bigger.
Organizing code gets harder
Developer wants cohesive/abstract javascript modules

5. <script src="../js/JQuery.js" type="text/javascript"></script>
<script src="../js/SwfObject.js" type="text/javascript"></script>
<script src="../js/JsLib.js" type="text/javascript"></script>
<script src="../js/Utils.js" type="text/javascript"></script>
<script src="../js/Validation.js" type="text/javascript"></script>
<script src="../js/Personal.js" type="text/javascript"></script>
<script src="../js/SpecialFeatures.js" type="text/javascript"></Script>
<script src="../js/Basket.js" type="text/javascript"></script>
<script src="../js/Catalog.js" type="text/javascript"></script>
<script src="../js/Marketing.js" type="text/javascript"></script>
<script src="../js/Search.js" type="text/javascript"></script>
<script src="../js/GlobalSpecialUIInit.js" type="text/javascript"></script>
<script src="../js/BbyMenus.js" type="text/javascript"></script>
<script src="../js/BbyMenuHover.js" type="text/javascript"></Script>
<script src="../js/BbyMenuiframe.js" type="text/javascript"></Script>
<script src="/js/CartObject.js" type="text/javascript"></script>
<script src="../js/jQueryUI.js" type="text/javascript"></script>
<script src="../Projects/_Content/Headlines/Include/HomeAccordion.js" type="te
<script src="/Projects/_Content/Include/CategoryPage/CategoryUI.js" type="text
<script src="/js/MenuAdapter.js" type="text/javascript"></script>
<script src="/Projects/Foresee/foresee-trigger.js" type="text/javascript"></script>
Script tag vomit

6. Script tag vomit
Slow
Many HTTP Requests
Blocking render
Manual Dependencies Management

7. Solution
Developer needs solutions for
Some sort or import package when writing cohesive js.
Ability to load nested dependencies asynchronously

8. AMD
Asynchronous Module Definition
AMD attempts to address the following problems
Ability to load nested dependencies asynchronusly
AMD is a specification, not a technology
AMD is a base specification for number of script loader
libraries.

9. Require JS
What is Require JS ?
When to use it?
What it does?

10. What is Require Js?
RequireJS implements AMD to solve the problems.
Dynamic module loading library for Javascript.
Some sort of import
Ease of use

11. When to use it?
When you need to load multiple Javascript files into an
application
When you need to resolved interdependent asynchronous
java script loading problem.
You can use ReqireJS for Asynchronous Script Loading and
JavaScript Dependency Management

12. What it Does?
Allows javascripts and its dependent file to load peacefully
before you event want to use the loaded variables/classes.
Uses a modular approach to write javascript and dependency
definitions.
Avoid polluting the global namespace

13. RequireJS
require()
Simplest use-case , load a singe JS file
reqire([‘scripts/helloworld.js’],function() {
//Do something after your js is loaded
});

14. RequireJS
require()
<script data-main="js/main"
src=”libs/require.js"></script>
Initialization..........

15. Require JS
Module pattern define()
//awesomemath.js
define(function(){
var sum= function (a,b) {
return a+b;
};
return {
sum:sum
}
});

16. Require JS
module usage
reqire([‘scripts/awesomemath.js’],function(amath) {
amath.sum(10,20);
});

17. Require JS
DEMO
PLUGINS

18. Require JS
Q&A