Introduction to

By Ahmed EL-Harouny24 September 2014

RequireJ

S

Page / Copyright ©2014 by Readify Pty Ltd2

Agenda› What is RequireJS?

› Why?

› Building blocks (define, require, config)

› Shims

› Optimization

› Demo on how we are using it.

Page / Copyright ©2014 by Readify Pty Ltd3

What is RequireJS?• 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.

Page / Copyright ©2014 by Readify Pty Ltd4

Why?common.js

common.config.js

1-Scripts loads faster.2-Manage script dependencies.

Page / Copyright ©2014 by Readify Pty Ltd5

Building blocks• define

• defines a RequireJS module.define(<moduleName>, <dependencies>, <anyObject>)

• require• requires a RequireJS module.

require(<dependencies>, <function>)• config

• configures RequireJS.require.config(<configObject>)

Page / Copyright ©2014 by Readify Pty Ltd6

Building blocks

alias

full path

Returns window._

Page / Copyright ©2014 by Readify Pty Ltd7

ShimsConfigure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define().

• deps• I depend on.

• exports• I export.

• initInitialization logic.

Page / Copyright ©2014 by Readify Pty Ltd8

Optimization• 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

/ Copyright ©2014 by Readify Pty Ltd9Page

DemoHow we are using it.How it can help us in unit tests.

Thank you