Require.JS

Require.JS 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

Transcript

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