Modular JavaScript with require.js flavour

Transcript

1. Modular JavaScript with require.js flavour
2. Many front-end developers still don't write modules
3. ...even though they often start with this @davidz photo
4. ...and end up with this @Donnay photo
5. ...and look like this @oddharmonic photo
6. Reasons for not writing modules: it's a bad habit many files means many HTTP requests no dependency management in JavaScript* *not true
7. Front-end developers who don't write modules
8. <script src="module1.js"></script> <script src="module4.js"></script> <script src="module5.js"></script> <script src="module9.js"></script> <script src="module2.js"></script> <script src="module8.js"></script> <script src="module6.js"></script> <script src="module12.js"></script> <script src="module15.js"></script> ... That's what they are afraid of
9. Why? dependencies are unclear HTML specifies order ? <>
10. What can we do? nothing a framework
11. Why we need to do something? You never know how big it's going to be
12. ...but you always start with something small* * at least you always should
13. Every complex system... @NASA photo
14. ...is just a bunch of (almost) independent modules @Mauro Luna photo
15. and you have to manage dependencies
16. Many frameworks are ready to help you
17. But there is one that we will focus on
18. follows CommonJS specification* *almost implements the AMD CommonJS AMD
19. formerly ServerJS CommonJS · Unity · Specification “What I’m describing here is not a technical problem. It’s a matter of people getting together and making a decision to step forward and start building up something bigger and cooler together.” Kevin Dangoor
20. Some of CommonJS implementations
21. Asynchronous Module Definition AMD define() require() “The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order" and something that was easy to use directly in the browser.” require.js documentation
22. (function() { function private() {}; function public() {}; return { public: public }; })(); AMD uses module pattern
23. define(function() { function private() {}; function public() {}; return { public: public }; }); Module pattern with AMD
24. defines a module define() define({ some: 'prop' }) define(id?, dependencies?, factory );
25. define([ 'dep' ], function( dep ) { function private() {}; function public() {}; return { public: public }; }); Module with dependencies
26. [ './some/path/to/module/filename' ] absolute from baseURL (like 'jslib') or relative path from module without extension Dependency name
27. modules are anonymous by default name === filename, it means no global variables
28. require.config({ paths: { "jquery": "/externals/jquery/jquery.edge.js" } }); ...but we can create aliases
29. ...and do a lot of other things with require. config baseUrl: paths: shim: map: config: waitSeconds: scriptcontext: deps: enforceDefine: urlArgs: ... the root path to use for all module lookups paths for module names not found under baseUrl dependencies and exports for not AMD scripts substitute a module ID passes configuration info to a module seconds to wait before giving up on loading a script allows require.js to load multiple versions of modules an array of dependencies to load throws an error if a script doesn't call define() query string args appended to URLs ...
30. loads a module require() local & global doesn't register the return as module
31. require([ 'module' ], function( module) { module.init(); }); global require()
32. define([ 'dep' ], function( dep ) { // code var module = require( 'module' ); }); local require()
33. define([ 'dep' ], function( dep ) { // code require([ 'module' ], function( module ) { module.doSomething(); }); }); require() again
34. require() = define() – module definition
35. <script data-main="js/main" src="js/libs/require.js"></script> How to make this work init module & baseURL require.js script
36. require([ 'app' ], function( app ) { app.init(); }); main.js
37. scripts could load in any order no special tools is needed works in all browsers
38. · Asynchronous loading · Does nothing if a module has already been loaded
39. require.js can load almost everything modules templates css <>
40. require([ 'http://connect.facebook.net/en_US/all.js' , 'text!form.html' ], // ... External JavaScript files and plugins
41. loads text files text! There are also css! and other plugins. You can write your own. text!path/filename.extension
42. require([ 'text!templates/users.html' ], function( tplUsers ) { // ... var html = _.tempate( tplUsers, data ); $users.html( html ); // ... }); text! makes templating beautiful
43. <% for ( var i = 0; i < users.length; i++ ) { %> <li> <a href="<%=users[ i ].url%>"> <%=users[ i ].name%> </a> </li> <% } %> users.html
44. How we install plugins now <link rel="stylesheet" href="jquery-ui.css" media="all" /> <link rel="stylesheet" href="ui.theme.css" media="all" /> <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="jquery.bgiframe-2.1.2.js"></script> <script src="jquery-ui-i18n.min.js"></script> jQuery UI
45. How it should be jQuery UI require([ 'jqueryUI' ], function( jqueryUI ) { // just use it now });
46. Benefits simplicity no need to edit templates all files are in one place easy to install
47. Optimization
48. Create a build script ({ appDir: "../", baseUrl: "./js", dir: "../build", paths: { text: "external/require/text" , jquery: "external/jquery-edge" }, modules: [ { name: "__core__" } ] }) folder that contains an app folder to save an output paths from require.config modules to optimize all dependencies will be included in a build file
49. There are a lot of other options, see github.com/jrburke/r.js/blob/master/build/example.build.js
50. Development require.config({ paths: { //'__core__': '../build/js/__core__', ...
51. Test & Production require.config({ paths: { '__core__': '../build/js/__core__', ...
52. Mozilla & WebKit, minified scripts debug useSourceURL: true* JavaScript Source Map * do not use if IE conditional comments are turned on
53. r.js -o ./js/app.build.js
54. 1 JS, 1 CSS uglified JS & CSS
55. HTML templates too, any files!
56. Old scripts and libraries
57. We can use shim require.config({ shim: { underscore: { exports: '_' }, backbone: { deps: [ 'underscore', 'jquery' ], exports: 'Backbone' }, 'external/jquery/ui': [ 'jquery' ] } }); exports a global variable defines dependencies and exports a global variable defines dependencies
58. ...or we can just assume it's always there <script src="js/external/underscore.js"></script> <script src="js/external/backbone.js"></script> <script data-main="js/main" src="js/libs/require.js"></script>
59. Passing data to JavaScript without AJAX
60. Requiring a module <script> require([ 'Maps/Google' ], function( GoogleMap ) { GoogleMap.set({ center: 'London' , company: 'Google' }); }) </script>
61. Defining 'config' module with empty config.js* <script> define( 'config', function() { return { testVar: 5 }); </script> *config.js is needed to prevent loading errors, see http://stackoverflow.com/questions/9916073/how- to-load-bootstrapped-models-in-backbone-js-while-using-amd-require-js/10288587#10288587
62. Use 'require.config', Luke!
63. Setting config <script> require.config({ config: { 'widgets/News/__init__': { maxNews: 10 } } }); </script>
64. Getting config define([ 'module' ], function( module ) { var config = module.config(); console.log( config.maxNews ); });
65. 'module' — magic module
66. Magic modules
67. define(function( require, exports, module ) { console.log( 'require: ', require ); console.log( 'exports: ', exports ); console.log( 'module: ', module ); }); Three require.js magic modules
68. loads modules require Can also return a full path to the resource with .toUrl() require( 'moduleName' )
69. public interface exports Just like in Node.JS exports.foo = 'bar'
70. information about a module module If you remember, we used module.config() to get settings module.id module.uri
71. Circular dependencies
72. “Circular dependencies are rare, and usually a sign that you might want to rethink the design.” require.js documentation
73. “However, sometimes they are needed”
74. Use exports //inside b.js: define([ 'a', 'exports' ], function( a, exports ) { //If "a" has used exports, then we have a real //object reference here. However, we cannot use //any of a's properties until after b returns a value. exports.foo = function() { return a.bar(); }; });
75. ...or require when needed define(function() { function foo() { //code require( ['a'], function( a ) { a.bar(); }); }; return { foo: foo }; });
76. ECMAScript Harmony
77. Harmony syntax example* module cakeFactory { // specify dependencies import baker from staff; export var oven = { makeCupcake: function( toppings ) { baker.bake( 'cupcake', toppings ); }; }; }; * by Addy Osmani
78. · Uses new syntax · Cannot be shimmed in older browsers · Still in development · It would be easy to convert AMD to Harmony
79. Summary
80. · Modules · Only one script tag · No global variables · Follows CommonJS specification · Dependencies · No need to worry about loading order · Makes it easier to manage js-templates · Optimization · Works in all browsers · Works with old scripts · Easy to implement and use