$30 off During Our Annual Pro Sale. View Details »

RequireJS in 15 Minutes

RequireJS in 15 Minutes

A quick intro to RequireJS

Matthew Dapena-Tretter

October 11, 2013
Tweet

More Decks by Matthew Dapena-Tretter

Other Decks in Programming

Transcript

  1. REQUIRE•JS IN 15 MINUTES

  2. The Old Way <script src="jquery.js"></script> <script src="jquery.plugin.js"></script> <script src="main.js"></script>

  3. The Old Way •Dependencies defined out-of-band •Lots of script tags

    (& requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
  4. With RequireJS ? Dependencies defined out-of-band ? Lots of script

    tags (& requests) ? …or a very very big main.js ? …or a build step in development ? All files load synchronously
  5. With RequireJS <script src="require.js" data-main="main"></script>

  6. Define Dependencies in Scripts require(['jquery', 'jquery.plugin'], function ($) { //

    Main code goes here });
  7. Use require() to Declare Dependencies For Scripts require(['jquery', 'jquery.plugin'], function

    ($) { // Main code goes here });
  8. Module IDs (Not Paths) in Array Correspond to Arguments require(['jquery',

    'jquery.plugin'], function ($) { // Main code goes here });
  9. Write Your Own Modules! define(['jquery', 'jquery.plugin'], function ($) { function

    makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
  10. Use define() to Declare Dependencies For Modules define(['jquery', 'jquery.plugin'], function

    ($) { function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
  11. Dependencies Work the Same as With require() define(['jquery', 'jquery.plugin'], function

    ($) { function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
  12. Return the Module From the Function define(['jquery', 'jquery.plugin'], function ($)

    { function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
  13. Alternative Syntax Improves Long Dependency Lists define(function (require) { var

    $ = require('jquery'); require('jquery.plugin'); function makeButton (el) { $(el).click(function () { alert('I was clicked!'); });
  14. Use Your Module in Other Modules or Scripts define(function (require)

    { var makeButton = require('makebutton'); makeButton('#element'); . . . . .
  15. Module IDs Are Based on File Names… define(function (require) {

    var makeButton = require('makebutton'); makeButton('#element'); . . . . .
  16. …But Don’t Use Paths! That’s What Config is For require.config({

    paths: { makebutton: 'path/to/makebutton' } });
  17. …And For “Shimming” Scripts That Don’t Use AMD require.config({ shim:

    { underscore: { deps: ['jquery'], exports: '_' } }, paths: {
  18. With RequireJS •Dependencies defined out-of-band •Lots of script tags (&

    requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
  19. Use r.js Optimizer For Production •Module-aware concatenation •Can build one

    file or many $ node r.js -o name=main out=main-built.js
  20. With RequireJS •Dependencies defined out-of-band •Lots of script tags (&

    requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
  21. requirejs.org @matthewwithanm hzdg.com