Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Managing JavaScript Dependencies With RequireJS


Published on

Learn how to manage and dynamically load JavaScript code files and their dependencies in a robust, scalable way within your large web sites and applications using the RequireJS library.

Published in: Technology
  • Be the first to comment

Managing JavaScript Dependencies With RequireJS

  1. 1. Managing JavaScriptDependencies with RequireJS Den Odell
  2. 2. Libraries jQuery, Modernizr, ... Frameworks Backbone, Ember, ... Reusable Plugin and Utility ScriptsjQuery plugins, TypeKit, Underscore, ... Custom Application Code
  3. 3. <script src="/assets/js/lib/jquery-1.7.1.min.js"></script><script src="/assets/js/lib/jquery-ui-1.8.17.custom.min.js"></script><script src="/assets/js/global.js"></script><script src="/assets/js/breaking-news.js"></script><script src="/assets/js/lib/jquery.colorbox.js"></script><script src="/assets/js/modal.js"></script><script src=""></script><!--[if lt IE 9]> <script src="/assets/js/lib/cssSandpaper/EventHelpers.js"></script> <script src="/assets/js/lib/cssSandpaper/cssQuery-p.js"></script> <script src="/assets/js/lib/cssSandpaper/"></script> <script src="/assets/js/lib/cssSandpaper/cssSandpaper.js"></script> <script src="/assets/js/lib/jquery-extended-selectors.js"></script> <script src="/assets/js/lib/selectivizr-min.js"></script><![endif]--><script src="/assets/js/lib/bgpos.js"></script><script src=""></script><script src="/assets/js/lib/yepnope.css-prefix.js"></script><script src="/assets/js/feature-carousel.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/lib/jquery.ui.selectmenu.js"></script><script src="/assets/js/lib/jquery.selectmenu.js"></script><script src="/assets/js/lib/swfobject.js"></script><script src="/assets/js/flashembed.js"></script><script src="/assets/js/lib/jquery.jqplugin.1.0.2.min.js"></script><script src="/assets/js/audioplayer.js"></script><script src="/assets/js/game-tray.js"></script><script src="/assets/js/tracking.js"></script><script src="/assets/js/lib/time-tracker.js"></script>
  4. 4. More JavaScript typically means more complexity
  5. 5. RequireJS Modules & Dependencies
  6. 6. Let’s build a signup form!
  7. 7. <!doctype html><html><head> <meta charset="utf-8"> <title>Mailing list</title> <link rel="stylesheet" href="styles/main.css"></head><body> <form action="thank-you.html" id="form" method="post"> <h1>Join our mailing list</h1> <label for="email">Enter your email address</label> <input type="text" name="email" id="email" placeholder="e.g."> <input type="submit" value="Sign up"> </form></body></html>
  8. 8. Current version: 2.1.4Support: IE6+, FF2+, Safari 3.2+, Chrome 3+, Opera 10+ Size: 5.5KB min+gzip
  9. 9. 1. Listen for ‘submit’ event on the form2. Validate the format of the email address provided3. If the format is valid, allow the form to submit to the server4. If the format is not valid, highlight the error and prevent the form submitting
  10. 10. jQuery Validation plugin for jQuery1. Listen for ‘submit’ event on the form2. Validate the format of the email address provided3. If the format is valid, allow the form to submit to the server4. If the format is not valid, highlight the error and prevent the form submitting Main application script
  11. 11. jQueryValidation plugin for jQuery Main application script
  12. 12. Dependencies jQueryValidation plugin for jQuery Main application script
  13. 13. Adding RequireJS to HTML<script src="scripts/require.js" data-main="scripts/main"></script>
  14. 14. Defining a code module in RequireJSdefine( moduleName, // optional, defaults to name of file dependencies, // optional array listing dependencies function(params) { // Function to execute once dependencies have been loaded // params contains return values from the dependencies });
  15. 15. Example of a code module in RequireJSdefine(["lib/jquery-1.9.0"], function($) { // Do something with jQuery as $});
  16. 16. Creating a module mapping for jQuery in main.js requirejs.config({ paths: { "jquery": "lib/jquery-1.9.0” } });
  17. 17. Extending the module mapping for jQuery in main.jsrequirejs.config({ paths: { "jquery": [ "", // If the CDN fails, load from this local module instead "lib/jquery-1.9.0" ] }});
  18. 18. jQuery Validation Plug-in Module scripts/lib/validation-plugin.js
  19. 19. scripts/lib/validation-plugin.jsdefine(["jquery"], function($) { $.fn.isValidEmail = function() { var isValid = true, regEx = /S+@S+.S+/; this.each(function() { if (!regEx.test(this.value)) { isValid = false; } }); return isValid; };});
  20. 20. Main application script scripts/lib/main.js
  21. 21. scripts/lib/main.jsrequire(["jquery", "lib/validation-plugin"], function($) { var $form = $("#form”), $email = $("#email"); $form.on("submit", function(e) { e.preventDefault(); if ($email.isValidEmail()) { $form.get(0).submit(); } else { $email.addClass("error").focus(); } }); $email.on("keyup", function() { $email.removeClass("error"); });});
  22. 22. Improving page load performance...
  23. 23. scripts/lib/main.jsrequire(["jquery"], function($) { var $form = $("#form"), $email = $("#email"); $form.on("submit", function(e) { e.preventDefault(); require(["lib/validation-plugin"], function() { if ($email.isValidEmail()) { $form.get(0).submit(); } else { $email.addClass("error").focus(); } }); }); $email.on("keyup", function() { $email.removeClass("error"); });});
  24. 24. What else can RequireJS do?
  25. 25. Some Useful Plug-ins i18n text handlebars font cache
  26. 26. Thank You