FIREFOX
SWITCHBLADE!
Building Novel and Robust Applications with Firefox
Dietrich Ayala, Mozilla
Thursday, June 18th 2009

2 parts, 1 talk
• Optimizing the process
• Making cool things
Thursday, January 1st 1970

Sharpening your blade
• Environment
• Libraries
• Workflow
Thursday, January 1st 1970

How many foxes? N foxes.
• Profile Manager for
multiple “environments”
• --profilemanager
• Run multiple instances
• Mac: rename the .app
files
• Win: -no-remote
Thursday, January 1st 1970

Take it to a higher level
• JQuery
• FUEL
• JIT + Mootools
• Mozilla Labs Modules
Thursday, January 1st 1970

Been caught stealin’
• .xpi == “zippee” == .zip
• .jar == .zip
• Re-usable JS: modules/, components/, content/
• Check license, ask, and give credit
Thursday, January 1st 1970

Workflow tips
• Preferences in about:config
• Linkfile install method
• Test via chrome URIs: chrome://myext/content/test.xul
• Ubiquity’s restart command
Thursday, January 1st 1970

Best practices
• Make your code:
• Fast
• Reusable
• Testable
Thursday, January 1st 1970

JS Modules
• var EXPORTED_SYMBOLS = [“variableName”];
• Components.utils.import(“resource://yourfile.js”);
• Benefits
• Singleton
• Enforced namespacing
• Performance
Thursday, January 1st 1970

Memoization
• Use memo-izing getters to lazily load and cache values
var myObj = {
get myCache() {
delete this.myCache;
return this.myCache = getThings();
}
};
Thursday, January 1st 1970

On page load, please be zen.
• Every time you slow down page load, another user
switches back to IE.
• I know we provide you with so many cool things to do
when a page loads.
• Please just be patient, chill for sec.
Thursday, January 1st 1970

Async FTW
• Really, just don’t do anything synchronously. ever.
• setTimeout()
• Yield! With generators!
• Asynchronous SQLite queries
• Background it with nsIThread
Thursday, January 1st 1970

Testing... is this thing on?
• Fireunit
• uTest
• Ubiquity commands
• chrome://content/myExtension/test.html
Thursday, January 1st 1970

The Good Stuff
Thursday, January 1st 1970

about:whatever
• about:config, about:mozilla,
about:rights, about:crashes
• about:ubiquity
• about:me
<link rel="stylesheet" href="chrome://global/skin/about.css" type="text/css"/>
<link rel="stylesheet" href="chrome://aboutme/skin/aboutMe.css" type="text/css"/>
Thursday, January 1st 1970

New Tab is Your Canvas
• about:tab
• Autodial
• History Map
• Ambient news
• Snowl
Thursday, January 1st 1970

You Autocomplete Me
• Tags
• Quickfire
• Location bar, text fields
• autocompletesearch=”...”
Thursday, January 1st 1970

Process Execution
• Load external applications
• Run Applescripts
• Growl
• The “Say” command
Thursday, January 1st 1970

<canvas/>
• Processing.js
• Bespin/Thunderhead
• Radiohead
Thursday, January 1st 1970

<audio/>
• Ogg and Wav formats
• Scriptable: <audio/>.play()
• Jono made a piano
• JAI
Thursday, January 1st 1970

JAI: Javascript Audio Interface
<li>
<a href="@F1LT3R - Cryogenic Unrest.ogg">F1LT3R - Cryogenic Unrest</a>
<audio src="@F1LT3R - Cryogenic Unrest.ogg">
Your browser does not support the <code>audio</code> element.
Get <a href="...">Firefox</a>.
</audio>
</li>
Thursday, January 1st 1970

<video/>
• HTML5
• Ogg Theora
• Configurable: autoplay,
controls, volume, etc
• Media events
• Can fallback to plugins
Thursday, January 1st 1970

<video/> mashery bliss
• Chroma-keying
• Content insertion
• CSS3 transforms
• Motion tracking
Thursday, January 1st 1970

Streaming <video/>
• VLC
• IceCast
• <video/>
• http://air.mozilla.com
Thursday, January 1st 1970

XMPP
• SamePlace (XMPP4Moz)
• Strophe
• XMPP4Js
• JSJaC
Thursday, January 1st 1970

Outside of the Browser
• Firefox as Platform
• Standalone applications
Thursday, January 1st 1970

Prism
• Site-specific browsers
• Separate process
• Custom look and feel
• Bundles
Thursday, January 1st 1970

Mozilla Applications
• XULRunner
• Full desktop applications
• Can use Firefox as the runtime
• Separate process
• Bundle of JS and XUL or X/HTML
Thursday, January 1st 1970

Webtopplications?
• Fully privileged desktop application in X/HTML
• XUL Window with XHTML default namespace
• <xul:window xmlns:xul=”...xul...” xmlns=”...html...”>
• JQuery UI Themes
Thursday, January 1st 1970

XPI Deployment
• Package your
application *inside*
an extension
• Deploy from AMO
• Launch from Firefox
Thursday, January 1st 1970

<canvas/> + <audio/>
• Play me off, keyboard cat...
Thursday, January 1st 1970