Building novel and robust applications with Firefox Links to everything in the talk are here: http://opensourcebridge.org/2009/wiki/Firefox_Switchblade

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

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

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

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

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

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

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

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

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

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

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

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

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

14. The Good Stuff
Thursday, January 1st 1970

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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