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