Introduction to require js

1. Introduction to
By Ahmed EL-Harouny
24 September 2014
RequireJS

2. Page
Agenda
› WhatisRequireJS?
› Why?
› Buildingblocks(define,require,config)
› Shims
› Optimization
› Demoonhowweareusingit.
/ Copyright ©2014 by Readify Pty Ltd2

3. Page
What is RequireJS?
/ Copyright ©2014 by Readify Pty Ltd3
• RequireJS is a JavaScript file and module loader.
• It supports Asynchronous Module Definition AMD.
• Asynchronous Module Definition (AMD) API specifies a
mechanism for defining modules such that the module and its
dependencies can be asynchronously loaded.

4. Page
Why?
/ Copyright ©2014 by Readify Pty Ltd4
common.js
common.config.js
1-Scripts loads faster.
2-Manage script dependencies.

5. Page
Building blocks
/ Copyright ©2014 by Readify Pty Ltd5
• define
• defines a RequireJS module.
define(<moduleName>, <dependencies>, <anyObject>)
• require
• requires a RequireJS module.
require(<dependencies>, <function>)
• config
• configures RequireJS.
require.config(<configObject>)

6. Page
Building blocks
/ Copyright ©2014 by Readify Pty Ltd6
alias
full path
Returns window._

7. Page
Shims
/ Copyright ©2014 by Readify Pty Ltd7
Configure the dependencies, exports, and custom initialization for older, traditional
"browser globals" scripts that do not use define().
• deps
• I depend on.
• exports
• I export.
• init
Initialization logic.

8. Page
Optimization
/ Copyright ©2014 by Readify Pty Ltd8
• Combine related scripts together into minified files.
• Uses r.js file.
• node is recommended to run it. (java, browser can do it as well).
Build output
configs
Build folder

9. Page
Demo
/ Copyright ©2014 by Readify Pty Ltd9
How we are using it.
How it can help us in unit tests.

10. Thank you