Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Require.JS

 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

Ivano Malavolta

May 15, 2012
Tweet

More Decks by Ivano Malavolta

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  17. Wrapper Usage
    You simply refer to
    the wrapper
    the wrapper

    View Slide

  18. References
    http://requirejs.org

    View Slide