RequireJS presentation by Ajay Kumar Chagam at 5th OIDC meeting on October 31st 2014.

1. Write a Better Java Script
with RequireJS
For Reference
http://requirejs.org

3. Why use a tool like RequireJS?
Large applications often require a number of JavaScript files.
Generally, they are loaded one by one using <script> tags.
Additionally, each file can potentially be dependent on other files.

4. JS sucks
.
├── ckeditor
│ ├── ckeditor.js
│ ├── contents.css
│ ├── lang
│ │ ├── af.js
│ │ ├── ar.js
│ │ ├── bg.js
│ │ ├── bn.js
│ │ ├── bs.js
│ │ ├── ca.js
│ │ ├── cs.js
│ │ ├── cy.js
│ │ ├── da.js
│ │ ├── de.js
│ │ ├── el.js
│ │ ├── en-au.js
│ │ ├── en-ca.js
│ │ ├── en-gb.js
│ │ ├── en.js
│ │ ├── eo.js
│ │ ├── es.js
│ │ ├── et.js
│ │ ├── eu.js
│ │ ├── fa.js
│ │ ├── fi.js
│ │ ├── fo.js
│ │ ├── fr-ca.js
│ │ ├── hi.js
│ │ ├── hr.js
│ │ ├── hu.js
│ │ ├── is.js
│ │ ├── it.js
│ │ ├── ja.js
│ │ ├── ka.js
│ │ ├── km.js
│ │ ├── ko.js
│ │ ├── _languages.js
│ │ ├── lt.js
│ │ ├── lv.js
│ │ ├── mn.js
│ │ ├── ms.js
│ │ ├── nb.js
│ │ ├── nl.js
│ │ ├── no.js
│ │ ├── pl.js
│ │ ├── pt-br.js
│ │ ├── pt.js
│ │ ├── ro.js
│ │ ├── ru.js
│ │ ├── sk.js
│ │ ├── sl.js
│ │ ├── sr.js
│ │ ├── sr-latn.js
│ │ ├── sv.js
│ │ ├── th.js
│ │ ├── _trans.txt
│ │ ├── tr.js
│ │ ├── uk.js
│ │ ├── vi.js
│ │ └── default.js
│ ├── skins
│ │ └── kama
│ │ ├── dialog.css
│ │ ├── editor.css
│ │ ├── icons.png
│ │ ├── icons_rtl.png
│ │ ├── images
│ │ │ ├── dialog_sides.gif
│ │ │ ├── dialog_sides.png
│ │ │ ├── dialog_sides_rtl.png
│ │ │ ├── mini.gif
│ │ │ ├── noimage.png
│ │ │ ├── sprites_ie6.png
│ │ │ ├── sprites.png
│ │ │ └── toolbar_start.gif
│ │ ├── skin.js
│ │ └── templates.css
│ └── SQRLY_TEAM_PLEASE_README__LICENSE
├── elevationservice_eg_google.js
├── jquery.form.js
├── jquery.history.js
├── jqueryplugins
│ ├── jquery.address-1.3.js
│ └── jquery.simplemodal-1.3.min.js
├── markers.js
├── pages
│ ├── add-park.js
│ ├── datacleaning.js
│ └── park-detail.js
├── park-ratings.js
├── polylinearray_eg_google.js

5. JS sucks
1. code is too long
2. just a little code from somewhere else
3. copy and paste
4. goto: 1

7. RequireJS makes Js
• Help you make your code more modular
• manages script loading for you
• build and compress your code
(oh, and other stuff too...)

8. What is RequireJS?

9. What is RequireJS?
• Modular programming is used to break large applications into
smaller blocks of manageable code
• Module based coding eases the effort for maintenance and
increases reusability.
• managing dependencies between modules is a major concern
developers face throughout the application development
process.
• RequireJS is one of the most popular frameworks around for
managing dependencies between modules

10. What is RequireJS?
• Async Script Loader
• 12 k
• Very actively developed
• Well documented

11. Making code more modular

12. So what's the code look like?

13. Loading from the page
<script data-main="js/main"
src="scripts/require.js"></script>
main.js is the entry point of the app

14. Loading from the page
require(["pages/profile"], function(Profile) {
...do stuff...
});

15. Defining a Module
define(["foo", "baz", "x"], function(Foo, Baz) {
...do stuff...
return {
init: function(data) {
container = data;
},
do_something: some_internal_method
}
});

16. Let's look at an example

17. Thanks