Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Develop 
plugin for 
Mozilla Firefox 
and structure a JavaScript-based 
application
Modular JavaScript
• CommonJS 
• AMD 
• Harmony (ECMAScript.next)
CommonJS 
A Module Format Optimized For The Server
// package/lib is a dependency we require 
var lib = require('package/lib'); 
// some behavior for our module 
function fo...
AMD 
Asynchronous 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 & CommonJS 
A module that works in both server-side and client-side
UMDjs 
https://github.com/umdjs/umd
Develop for Firefox
Classic 
Traditional, classic, or XUL extensions
<menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" 
accesskey="&xulschoolhello.helloMenu.accesskey;...
Add-on SDK 
HTML, CSS, JavaScript
Using the Add-on SDK you can create Firefox add-ons using 
standard Web technologies: JavaScript, HTML, and CSS. 
! 
The S...
Sources 
• Writing Modular JavaScript With AMD, CommonJS 
& ES Harmony written by Addy Osmani 
• Mozilla developers networ...
Thanks. Questions? 
Afshin Mehrabani 
@afshinmeh
Develop plugin for Mozilla Firefox and structure a JS-based application
Upcoming SlideShare
Loading in …5
×

Develop plugin for Mozilla Firefox and structure a JS-based application

1,577 views

Published on

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

Published in: Software
  • Login to see the comments

Develop plugin for Mozilla Firefox and structure a JS-based application

  1. 1. Develop plugin for Mozilla Firefox and structure a JavaScript-based application
  2. 2. Modular JavaScript
  3. 3. • CommonJS • AMD • Harmony (ECMAScript.next)
  4. 4. CommonJS A Module Format Optimized For The Server
  5. 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. 6. AMD Asynchronous Module Definition
  7. 7. “CommonJS AMD format”
  8. 8. Proposal for defining modules where both the module and dependencies can be asynchronously loaded.
  9. 9. define( module_id, [dependencies], definition function );
  10. 10. AMD & CommonJS A module that works in both server-side and client-side
  11. 11. UMDjs https://github.com/umdjs/umd
  12. 12. Develop for Firefox
  13. 13. Classic Traditional, classic, or XUL extensions
  14. 14. <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>
  15. 15. Add-on SDK HTML, CSS, JavaScript
  16. 16. 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.
  17. 17. Sources • Writing Modular JavaScript With AMD, CommonJS & ES Harmony written by Addy Osmani • Mozilla developers network - developer.mozilla.org
  18. 18. Thanks. Questions? Afshin Mehrabani @afshinmeh

×