Require.JS

  • 2,094 views
Uploaded on

RequireJS Basics …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,094
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
81
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RequireJS Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  • 2. Roadmap• Why RequireJS• Using modules• Defining modules• Wrappers for external libraries
  • 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. What we want to avoid uncontrolled scripts loose control flow understanding
  • 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. 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. 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. 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. Roadmap• Why RequireJS• 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 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. Roadmap• Why RequireJS• Using modules• Defining modules• Wrappers for external libraries
  • 13. Module without dependencies setup code public Variables Always onemodule per file
  • 14. Module with dependenciesDependency Dependent library definition argument Dependent library Usage
  • 15. Roadmap• Why RequireJS• Using modules• Defining modules• Wrappers for external libraries
  • 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. Wrapper UsageYou simply refer to the wrapper
  • 18. Referenceshttp://requirejs.org