RequireJS in 15 Minutes

A quick intro to RequireJS

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