Develop plugin for Mozilla Firefoxand structure a JavaScript-based application

Modular JavaScript

• CommonJS

• AMD

• Harmony (ECMAScript.next)

CommonJSA Module Format Optimized For The Server

// 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;

AMDAsynchronous Module Definition

“CommonJS AMD format”

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

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

AMD & CommonJSA module that works in both server-side and client-side

UMDjshttps://github.com/umdjs/umd

Develop for Firefox

ClassicTraditional, classic, or XUL extensions

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

Add-on SDKHTML, CSS, JavaScript

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.

Sources

• Writing Modular JavaScript With AMD, CommonJS & ES Harmony written by Addy Osmani

• Mozilla developers network - developer.mozilla.org

Afshin Mehrabani@afshinmeh

Thanks. Questions?