RequireJS: Take Off Conf

A talk introducing RequireJS, originally done at Take Off Conf, Lille, Jan 17th 2013.

Transcript

1. RequireJS Jack Franklin Take Off Conf January 2013 Thursday, 17 January 13
2. Warning! Developer-designed-slides to follow Thursday, 17 January 13
3. • Writer at javascriptplayground.com • Author of “Beginning jQuery” (http:// www.apress.com/9781430249320) • JavaScript and Ruby developer, London • @Jack_Franklin • github.com/jackfranklin • jackfranklin.co.uk Thursday, 17 January 13
4. The Problems <script src=”jquery.js”></script> <script src=”underscore.js”></script> <script src=”backbone.js”></script> <script src=”app.js”></script> <script src=”slider.jquery.js”></ script> Thursday, 17 January 13
5. • Multiple HTTP Requests • Scripts are loaded synchronously • Limited parallel connections • Difficult to maintain • Difficult to integrate a build script into Thursday, 17 January 13
6. The Solution The Asynchronous Module Definition (**AMD**) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross- domain access problems. https://github.com/amdjs/amdjs-api/wiki/AMD Thursday, 17 January 13
7. AMD • Modular Code • Define modules and dependencies • Load modules asynchronously • All dependencies dealt with. Thursday, 17 January 13
8. This means... • Asynchronous loading = non blocking • Dependencies can be dynamically loaded in only when required • No more messing around with the order of script tags • Better organised, modular code (separation of concerns) Thursday, 17 January 13
9. RequireJS http://requirejs.org/ Thursday, 17 January 13
10. • Implements the AMD Spec • Easy to setup (one script tag) • Has a build tool • Excellent browser support • IE6+, FF2+, Safari 3.2+, Chrome 3+, Opera 10+ Thursday, 17 January 13
11. Setup <script src=”path/to/require.js” data-main=”js/app.js”></script> Thursday, 17 January 13
12. Main File require.config({ // we'll get back to this }); require(["lib/jquery"], function($) { $("body").css("background", "red"); }); Thursday, 17 January 13
13. Base Path • The base path is the directory your main file is in • data-main=”lib/app.js” • base path = “lib” • To load lib/foo.js: require([“foo”],...) Thursday, 17 January 13
14. Defining Modules define( ["lib/foo"], function(foo) { var myModule = { sayHello: function() { alert("Hello"); } }; return myModule; } }); Thursday, 17 January 13
15. Using Modules require(["mymodule"], function(myModule) { myModule.sayHello(); }); Thursday, 17 January 13
16. Multiple Deps define( ["lib/foo", “lib/bar”], function(foo, bar) { var myModule = { sayHello: function() { alert("Hello"); } }; return myModule; } }); Thursday, 17 January 13
17. But • What about libraries that don’t support AMD? • jQuery does (bottom of jQuery source) • But others don’t. • For example, Underscore Thursday, 17 January 13
18. Shimming • RequireJS supports this through shims. • Underscore does expose itself globally • So we can hook into that. Thursday, 17 January 13
19. require.config({ shim: { 'lib/underscore.min': { exports: '_' } } }); require(["lib/underscore.min"], function(U) { console.log(U.map); }); Underscore Shim Thursday, 17 January 13
20. Paths • Typing lib/underscore.min gets boring • Setup custom paths for modules Thursday, 17 January 13
21. require.config({ paths: { 'foo': 'my/really/long/path/to/foo.js' }, }); require(["foo"], function(foo) { foo.doSomething(); }); Custom Paths Thursday, 17 January 13
22. require.config({ paths: { 'underscore': 'vendor/underscore.min' }, shim: { 'underscore': { exports: '_' } } }); require(["underscore"], function(U) { console.log(U.map); }); Paths + Shim Thursday, 17 January 13
23. require.config({ paths: { 'backbone': 'vendor/backbone.min', 'underscore': 'vendor/underscore.min' }, shim: { 'backbone': { deps: ['underscore', 'vendor/jquery.min'], exports: 'Backbone' } } }); Backbone Shim Thursday, 17 January 13
24. require(["backbone"], function(B) { console.log(B); }); Backbone Shim Thursday, 17 January 13
25. Optimiser • Minifies our JS Code into one file • Intelligently minifies based on dependencies • Runs through Node Thursday, 17 January 13
26. $ npm install requirejs Installing Thursday, 17 January 13
27. ({ baseUrl: "lib", name: "app", out: "built.js", mainConfigFile: 'lib/app.js' }) build.js file Thursday, 17 January 13
28. $ node node_modules/requirejs/bin/r.js -o build.js Tracing dependencies for: app Uglifying file: /Users/JackFranklin/Dropbox/Sites/ takeoffrequire/built.js Optimiser Go! Thursday, 17 January 13
29. Be Aware! • This file does not include the RequireJS source. Thursday, 17 January 13
30. <!DOCTYPE html> <html> <head> <title>Require</title> <script src="lib/require/require.js"></script> <script src="built.js"></script> </head> <body> </body> </html> Works as Before Thursday, 17 January 13
31. In Summary • Split your code into modules • Shim libraries that don’t support AMD • Set up paths for easier reference • Run R.js before deploying Thursday, 17 January 13
32. Resources • requirejs.org • javascriptplayground.com • addyosmani.com • github.com/javascriptplayground/ requirejs-example Thursday, 17 January 13
33. The End Questions? @Jack_Franklin Thursday, 17 January 13