Require JSEverything and Anything I.T.

Nirbhay K

Why Require Required

Problem

Script Tag Vomit

Solution

AMD

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

<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="text/javascript"></script>

<script src="/Projects/_Content/Include/CategoryPage/CategoryUI.js" type="text/javascript"></script>

<script src="/js/MenuAdapter.js" type="text/javascript"></script>

<script src="/Projects/Foresee/foresee-trigger.js" type="text/javascript"></script>

Script tag vomit

Script tag vomit

Slow

Many HTTP Requests

Blocking render

Manual Dependencies Management

Solution

Developer needs solutions for

Some sort or import package when writing cohesive js.

Ability to load nested dependencies asynchronously

AMDAsynchronous 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.

Require JS

What is Require JS ?

When to use it?

What it does?

What is Require Js?

RequireJS implements AMD to solve the problems.

Dynamic module loading library for Javascript.

Some sort of import

Ease of use

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

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

RequireJSrequire()

Simplest use-case , load a singe JS file

reqire([‘scripts/helloworld.js’],function() {

//Do something after your js is loaded

});

RequireJSrequire()

<script data-main="js/main"

src=”libs/require.js"></script>

Initialization..........

Require JS

Module pattern define()

//awesomemath.js

define(function(){

var sum= function (a,b) {

return a+b;

};

return {

sum:sum

}

});

Require JS module usage

reqire([‘scripts/awesomemath.js’],function(amath) {

amath.sum(10,20);

});

Require JS

DEMO

PLUGINS

Require JS

Q&A