Your SlideShare is downloading. ×
0
RequireJS         Ivano Malavolta    ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
Roadmap•   Why RequireJS•   Using modules•   Defining modules•   Wrappers for external libraries
Why RequireJSWe are building apps, not web sitesCode complexity grows as the app gets bigger     We need some sort of #inc...
What we want to avoid                uncontrolled scripts                loose control flow                understanding
Why RequireJSRequireJS is a JavaScript file and module loaderUsing a modular script loader like RequireJS will improve  th...
The Module PatternA JavaScript code module is some JavaScript code  located in registered locationAll of the code that run...
Module ExampleTechnically, it is simply an anonymous function that  executes immediately(function () {  // ... vars and fu...
Modules VS Script FilesA module is different from a traditional script file in  that it defines a well-scoped object that ...
Roadmap•   Why RequireJS•   Using modules•   Defining modules•   Wrappers for external libraries
Using Modules: the main HTML page      main.js is the entry point of the app
Using Modules: the Main file                                                    References to         Required modules    ...
Roadmap•   Why RequireJS•   Using modules•   Defining modules•   Wrappers for external libraries
Module without dependencies                           setup code  public Variables  Always onemodule per file
Module with dependenciesDependency                        Dependent library definition                           argument ...
Roadmap•   Why RequireJS•   Using modules•   Defining modules•   Wrappers for external libraries
Wrappers for external librariesSome libraries are not defined as RequireJS modulesIn this case, you can make a wrapper fil...
Wrapper UsageYou simply refer to   the wrapper
Referenceshttp://requirejs.org
Upcoming SlideShare
Loading in...5
×

Require.JS

2,295

Published on

RequireJS Basics

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Published in: Technology

Transcript of "Require.JS"

  1. 1. RequireJS Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  2. 2. Roadmap• Why RequireJS• Using modules• Defining modules• Wrappers for external libraries
  3. 3. Why RequireJSWe are building apps, not web sitesCode complexity grows as the app gets bigger We need some sort of #include/import/require ability to load nested dependencies
  4. 4. What we want to avoid uncontrolled scripts loose control flow understanding
  5. 5. Why RequireJSRequireJS is a JavaScript file and module loaderUsing a modular script loader like RequireJS will improve the speed and quality of your codeRequireJS allows modules to be loaded as fast as possible, even out of order, but evaluated in the correct dependency orderBuilt on the Module Pattern
  6. 6. The Module PatternA JavaScript code module is some JavaScript code located in registered locationAll of the code that runs inside the function lives in a closure, closure which provides privacy and state throughout the lifetime of the app
  7. 7. Module ExampleTechnically, it is simply an anonymous function that executes immediately(function () { // ... vars and functions defined here are // local to this module // here you can also access global variables}());
  8. 8. Modules VS Script FilesA module is different from a traditional script file in that it defines a well-scoped object that avoids well- polluting the global namespaceIt can explicitly list its dependencies and get a handle on those dependencies without needing to refer to global objects, but instead receive the dependencies as arguments to the function that defines the module
  9. 9. Roadmap• Why RequireJS• Using modules• Defining modules• Wrappers for external libraries
  10. 10. Using Modules: the main HTML page main.js is the entry point of the app
  11. 11. Using Modules: the Main file References to Required modules required modulesThis function is called when all dependencies are loadedIf a required module calls define(), then this function is not fireduntil its dependencies have loaded
  12. 12. Roadmap• Why RequireJS• Using modules• Defining modules• Wrappers for external libraries
  13. 13. Module without dependencies setup code public Variables Always onemodule per file
  14. 14. Module with dependenciesDependency Dependent library definition argument Dependent library Usage
  15. 15. Roadmap• Why RequireJS• Using modules• Defining modules• Wrappers for external libraries
  16. 16. Wrappers for external librariesSome libraries are not defined as RequireJS modulesIn this case, you can make a wrapper file to load the needed library
  17. 17. Wrapper UsageYou simply refer to the wrapper
  18. 18. Referenceshttp://requirejs.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×