Slide 1

Slide 1 text

RequireJS Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta

Slide 2

Slide 2 text

Roadmap • Why RequireJS • Using modules • Using modules • Defining modules • Wrappers for external libraries

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What we want to avoid uncontrolled scripts uncontrolled scripts loose control flow understanding

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 }());

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Roadmap • Why RequireJS • Using modules • Using modules • Defining modules • Wrappers for external libraries

Slide 10

Slide 10 text

Using Modules: the main HTML page main.js is the entry point of the app

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Roadmap • Why RequireJS • Using modules • Using modules • Defining modules • Wrappers for external libraries

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Module with dependencies Dependency definition Dependent library argument argument Dependent library Usage

Slide 15

Slide 15 text

Roadmap • Why RequireJS • Using modules • Using modules • Defining modules • Wrappers for external libraries

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Wrapper Usage You simply refer to the wrapper the wrapper

Slide 18

Slide 18 text

References http://requirejs.org