FIREFOX
SWITCHBLADE!
Building Novel and Robust Applications with Firefox


Dietrich Ayala, Mozilla



                    ...
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
 • Ma...
Take it to a higher level

• JQuery
• FUEL
• JIT + Mootools
• Mozilla Labs Modules




                            Thursda...
Been caught stealin’

• .xpi == “zippee” == .zip
• .jar == .zip
• Re-usable JS: modules/, components/, content/
• Check li...
Workflow tips

• Preferences in about:config
• Linkfile install method
• Test via chrome URIs: chrome://myext/content/test.x...
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
 •  S...
Memoization

• Use memo-izing getters to lazily load and cache values
             var myObj = {
                get myCac...
On page load, please be zen.

• Every time you slow down page load, another user
  switches back to IE.
• I know we provid...
Async FTW

• Really, just don’t do anything synchronously. ever.
• setTimeout()
• Yield! With generators!
• Asynchronous S...
Testing... is this thing on?

• Fireunit
• uTest
• Ubiquity commands
• chrome://content/myExtension/test.html




        ...
The Good Stuff




                 Thursday, January 1st 1970
about:whatever

        • about:config, about:mozilla,
           about:rights, about:crashes
        • about:ubiquity
    ...
New Tab is Your Canvas

• about:tab
• Autodial
• History Map
• Ambient news
• Snowl

                         Thursday, Ja...
You Autocomplete Me

• Tags
• Quickfire
• Location bar, text fields
• autocompletesearch=”...”




                         ...
Process Execution

• Load external applications
• Run Applescripts
• Growl
• The “Say” command




                       ...
<canvas/>

• Processing.js
• Bespin/Thunderhead
• Radiohead



                       Thursday, January 1st 1970
<audio/>

• Ogg and Wav formats
• Scriptable: <audio/>.play()
• Jono made a piano
• JAI




                              ...
JAI: Javascript Audio Interface
  <li>
   <a href="@F1LT3R - Cryogenic Unrest.ogg">F1LT3R - Cryogenic Unrest</a>
   <audio...
<video/>

• HTML5
• Ogg Theora
• Configurable: autoplay,
  controls, volume, etc
• Media events
• Can fallback to plugins
 ...
<video/> mashery bliss

• Chroma-keying
• Content insertion
• CSS3 transforms
• Motion tracking




                      ...
Streaming <video/>

• VLC
• IceCast
• <video/>
• http://air.mozilla.com




                           Thursday, January 1...
XMPP

• SamePlace (XMPP4Moz)
• Strophe
• XMPP4Js
• JSJaC




                         Thursday, January 1st 1970
Outside of the Browser

• Firefox as Platform
• Standalone applications




                            Thursday, January ...
Prism

• Site-specific browsers
• Separate process
• Custom look and feel
• Bundles




                          Thursday,...
Mozilla Applications

• XULRunner
• Full desktop applications
• Can use Firefox as the runtime
• Separate process
• Bundle...
Webtopplications?

• Fully privileged desktop application in X/HTML
• XUL Window with XHTML default namespace
  • <xul:win...
XPI Deployment

• Package your
  application *inside*
  an extension
• Deploy from AMO
• Launch from Firefox


           ...
<canvas/> + <audio/>

• Play me off, keyboard cat...




                                 Thursday, January 1st 1970
Upcoming SlideShare
Loading in …5
×

Firefox Switchblade

720 views
633 views

Published on

Building novel and robust applications with Firefox

Links to everything in the talk are here:

http://opensourcebridge.org/2009/wiki/Firefox_Switchblade

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
720
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox Switchblade

  1. 1. FIREFOX SWITCHBLADE! Building Novel and Robust Applications with Firefox Dietrich Ayala, Mozilla Thursday, June 18th 2009
  2. 2. 2 parts, 1 talk • Optimizing the process • Making cool things Thursday, January 1st 1970
  3. 3. Sharpening your blade • Environment • Libraries • Workflow Thursday, January 1st 1970
  4. 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. 5. Take it to a higher level • JQuery • FUEL • JIT + Mootools • Mozilla Labs Modules Thursday, January 1st 1970
  6. 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. 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. 8. Best practices • Make your code: • Fast • Reusable • Testable Thursday, January 1st 1970
  9. 9. JS Modules • var EXPORTED_SYMBOLS = [“variableName”]; • Components.utils.import(“resource://yourfile.js”); • Benefits • Singleton • Enforced namespacing • Performance Thursday, January 1st 1970
  10. 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. 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. 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. 13. Testing... is this thing on? • Fireunit • uTest • Ubiquity commands • chrome://content/myExtension/test.html Thursday, January 1st 1970
  14. 14. The Good Stuff Thursday, January 1st 1970
  15. 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. 16. New Tab is Your Canvas • about:tab • Autodial • History Map • Ambient news • Snowl Thursday, January 1st 1970
  17. 17. You Autocomplete Me • Tags • Quickfire • Location bar, text fields • autocompletesearch=”...” Thursday, January 1st 1970
  18. 18. Process Execution • Load external applications • Run Applescripts • Growl • The “Say” command Thursday, January 1st 1970
  19. 19. <canvas/> • Processing.js • Bespin/Thunderhead • Radiohead Thursday, January 1st 1970
  20. 20. <audio/> • Ogg and Wav formats • Scriptable: <audio/>.play() • Jono made a piano • JAI Thursday, January 1st 1970
  21. 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. 22. <video/> • HTML5 • Ogg Theora • Configurable: autoplay, controls, volume, etc • Media events • Can fallback to plugins Thursday, January 1st 1970
  23. 23. <video/> mashery bliss • Chroma-keying • Content insertion • CSS3 transforms • Motion tracking Thursday, January 1st 1970
  24. 24. Streaming <video/> • VLC • IceCast • <video/> • http://air.mozilla.com Thursday, January 1st 1970
  25. 25. XMPP • SamePlace (XMPP4Moz) • Strophe • XMPP4Js • JSJaC Thursday, January 1st 1970
  26. 26. Outside of the Browser • Firefox as Platform • Standalone applications Thursday, January 1st 1970
  27. 27. Prism • Site-specific browsers • Separate process • Custom look and feel • Bundles Thursday, January 1st 1970
  28. 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. 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. 30. XPI Deployment • Package your application *inside* an extension • Deploy from AMO • Launch from Firefox Thursday, January 1st 1970
  31. 31. <canvas/> + <audio/> • Play me off, keyboard cat... Thursday, January 1st 1970

×