John Resig - Blog

Building a JavaScript Library

August 21st, 2007

This past Friday I gave my first Google Tech Talk on Building a JavaScript Library. I was invited to speak by Jon Wiley and had a chance to speak with a bunch of people on the User Experience team at Google (and, of course, try the always-popular food).

Building a JavaScript Library [Video]

Building a JavaScript Library [Slides]

Based upon some of the questions that I got, it definitely seems like there's a market for a jQuery presentation, at Google. Maybe I'll be able to give another talk there someday - time will tell!

I'm glad that I've been able to start codifying my thoughts surrounding JavaScript Library design and implementation. We'll have to see where it leads (if it does lead anywhere besides a presentation) - maybe it'll end up in the form of a book or set of articles.

Please let me know if this talk interested you as I'm trying to gauge what interests other web developers - because all of this stuff fascinates me (JavaScript programming, open source projects, etc.).

Tags: browsers, programming, mozilla, jquery, fuel, javascript

19 Comments on 'Building a JavaScript Library'

Fuel 0.2 Progress

May 18th, 2007

In case you missed it, Fuel 0.1 recently landed in Firefox 3.0a4.

Fuel 0.1 focused on building a solid foundation for further development; laying a good application and events layer, and building out Preference management. Much of our original plan was scaled back due to the nature of how JavaScript APIs need to be written using XPCOM and IDLs. In a nutshell: Dynamically-generated properties are out, as are optional arguments, and arguments that contains non-primitive objects (arrays, objects, regexps, etc.).

The plan for Fuel 0.2 is pretty well defined at this point. We're on track to have it land in Firefox 3.0a5.

Specifically, Fuel 0.2 is going to be dealing with two things: Browser tabs and Bookmarks. We have a fairly-complete version of the Fuel 0.2 API up, this will be on top of the existing Fuel 0.1 API.

If you're curious what this new code is going to look like, here's some examples from our current plan:

NOTE All of the following is subject to change - please view the final plan and API before attempting to use.

Browser

Open, and activate, a new tab

Application.browser.open("http://google.com/").active = true;

Open, and activate, a tab just after the current tab

var tab = Application.browser.open("http://google.com/");
Application.browser.insertBefore( tab, Application.browser.activeTab.next );
tab.active = true;

or:

var tab = Application.browser.open("http://google.com/");
tab.index = Application.browser.activeTab + 1;
tab.active = true;

Move the active tab to be the first tab

Application.browser.insertBefore(
Application.browser.activeTab,
Application.browser.tabs[0]
);

or:

Application.browser.activeTab.index = 0;

Close the active tab

Application.browser.activeTab.close();

Do something when the active tab loads

Application.browser.activeTab.events.addListener( "load", function(){
this.query("#foo div")
});

Change the URL in the active tab

Application.browser.activeTab.url = "http://mozilla.org/";

Close all Google-related tabs

Application.browser.tabs.forEach(function(tab){
if ( tab.url.match(/google/) )
tab.remove();
});

Re-use a tab, or open a new one

var url = "http://google.com/";
Application.browser.tabs.some(function(tab){
if ( tab.url == url )
return tab.active = true;
}) || Application.browser.open( url ).active = true;

Stop the user from opening any new tabs

Application.browser.events.addListener( "TabOpen", function(e){
e.target.close();
});

Bookmarks

Log the title of all top-level bookmarks:

Application.bookmarks.all.forEach(function(cur){
console.log( "title", cur.title );
});

Add a new bookmark:

Application.bookmarks.add("Mozilla", "http://mozilla.org/");

Remove all bookmarks that point to Google:

Application.bookmarks.all.forEach(function(cur){
if ( cur.url.match(/google.com/) )
cur.remove();
});

Add a new bookmark, if one doesn't already exist:

var url = "http://google.com/";
Application.bookmarks.all.some(function(cur){
if ( cur.url == url )
return true;
}) || Application.bookmarks.add( "Google", url );

If you're interested in tracking our progress on Fuel 0.2, feel free to CC yourself on the tracking ticket for it. If all goes well, this should be in your hands by the time the Firefox 3.0 betas are rolling out. I'm really excited to see some new applications come out that are built on this code.

Tags: javascript, extensions, firefox, mozilla, programming, fuel

5 Comments on 'Fuel 0.2 Progress'

Advancing JavaScript with Libraries

April 24th, 2007

This is a presentation that I recently gave at Yahoo for a number of their developers. It was on the importance of JavaScript Libraries, and how their introduction and use changes how JavaScript development works.

Specifically, I discuss some of what I've learned from developing, and working with the users of, jQuery and developing the new FUEL library for Firefox 3.