Write a Better Java Scriptwith RequireJS

For Reference

http://requirejs.org

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.

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

JS sucks1. code is too long2. just a little code from somewhere else3. copy and paste4. goto: 1

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...)

What is RequireJS?

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

What is RequireJS?

• Async Script Loader• 12 k• Very actively developed• Well documented

Making code more modular

So what's the code look like?

Loading from the page<script data-main="js/main"

src="scripts/require.js"></script>

main.js is the entry point of the app

Loading from the pagerequire(["pages/profile"], function(Profile) {

...do stuff...

});

Defining a Moduledefine(["foo", "baz", "x"], function(Foo, Baz) {

...do stuff...

return {

init: function(data) {

container = data;

},

do_something: some_internal_method

}

});

Let's look at an example

Thanks