Require js

798 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
798
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Require js

  1. 1. Require JS Everything and Anything I.T. Nirbhay K
  2. 2. Why Require Required Problem Script Tag Vomit Solution AMD
  3. 3. 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
  4. 4. <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
  5. 5. Script tag vomit Slow Many HTTP Requests Blocking render Manual Dependencies Management
  6. 6. Solution Developer needs solutions for Some sort or import package when writing cohesive js. Ability to load nested dependencies asynchronously
  7. 7. 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.
  8. 8. Require JS What is Require JS ? When to use it? What it does?
  9. 9. What is Require Js? RequireJS implements AMD to solve the problems. Dynamic module loading library for Javascript. Some sort of import Ease of use
  10. 10. 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
  11. 11. 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
  12. 12. RequireJS require() Simplest use-case , load a singe JS file reqire([‘scripts/helloworld.js’],function() { //Do something after your js is loaded });
  13. 13. RequireJS require() <script data-main="js/main" src=”libs/require.js"></script> Initialization..........
  14. 14. Require JS Module pattern define() //awesomemath.js define(function(){ var sum= function (a,b) { return a+b; }; return { sum:sum } });
  15. 15. Require JS module usage reqire([‘scripts/awesomemath.js’],function(amath) { amath.sum(10,20); });
  16. 16. Require JS DEMO PLUGINS
  17. 17. Require JS Q&A

×