How to develop a plugin for Mozilla Firefox and structure a JS-based application using AMD, CommonJS and Harmony.

1. Develop
plugin for
Mozilla Firefox
and structure a JavaScript-based
application

2. Modular JavaScript

3. • CommonJS
• AMD
• Harmony (ECMAScript.next)

4. CommonJS
A Module Format Optimized For The Server

5. // package/lib is a dependency we require
var lib = require('package/lib');
// some behavior for our module
function foo(){
lib.log('hello world!');
}
// export (expose) foo to other modules
exports.foo = foo;

6. AMD
Asynchronous Module Definition

7. “CommonJS AMD format”

8. Proposal for defining modules where both the module and
dependencies can be asynchronously loaded.

10. define(
module_id,
[dependencies],
definition function
);

11. AMD & CommonJS
A module that works in both server-side and client-side

12. UMDjs
https://github.com/umdjs/umd

13. Develop for Firefox

14. Classic
Traditional, classic, or XUL extensions

15. <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
<menupopup>
<menuitem id="xulschoolhello-hello-menu-item"
label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloItem.accesskey;"
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
</menupopup>
</menu>

16. Add-on SDK
HTML, CSS, JavaScript

17. Using the Add-on SDK you can create Firefox add-ons using
standard Web technologies: JavaScript, HTML, and CSS.
!
The SDK includes JavaScript APIs which you can use to
create add-ons, and tools for creating, running, testing, and
packaging add-ons.

18. Sources
• Writing Modular JavaScript With AMD, CommonJS
& ES Harmony written by Addy Osmani
• Mozilla developers network - developer.mozilla.org

19. Thanks. Questions?
Afshin Mehrabani
@afshinmeh