Introduction to require js
-
Upload
ahmed-elharouny -
Category
Engineering
-
view
180 -
download
4
Transcript of Introduction to require js
![Page 1: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/1.jpg)
Introduction to
By Ahmed EL-Harouny24 September 2014
RequireJ
S
![Page 2: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/2.jpg)
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 3: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/3.jpg)
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 4: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/4.jpg)
Page / Copyright ©2014 by Readify Pty Ltd4
Why?common.js
common.config.js
1-Scripts loads faster.2-Manage script dependencies.
![Page 5: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/5.jpg)
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 6: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/6.jpg)
Page / Copyright ©2014 by Readify Pty Ltd6
Building blocks
alias
full path
Returns window._
![Page 7: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/7.jpg)
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 8: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/9.jpg)
/ Copyright ©2014 by Readify Pty Ltd9Page
DemoHow we are using it.How it can help us in unit tests.
![Page 10: Introduction to require js](https://reader035.fdocuments.in/reader035/viewer/2022062221/55d5b5b8bb61ebc82c8b4594/html5/thumbnails/10.jpg)
Thank you