Google Data » Steve Souders

Chris Anderson: CouchDB: Relaxing Offline JavaScript

Steve Souders — Tue, 29 Sep 2009 00:12:00 +0000

Last week I hosted Chris Anderson for a Google tech talk on CouchDB as part of the Web E^xponents speaker series. Chris is an Apache CouchDB committer. He is co-author of the forthcoming O'Reilly book CouchDB: The Definitive Guide and a director of couch.io.

Making web applications work offline is a hot topic. Google Gears blazed the trail, and Web Storage is part of HTML5. CouchDB is a NoSQL alternative that makes it easy for web apps to run offline. This is important because even as bandwidth grows, latency is still an issue for a significant number of users, and outages or zero-bars can and do happen. CouchDB makes this a non-issue by running your application close to the user, on their device or in their browser. Chris calls this "ground computing" - a refreshing counterpoint to the oft-used "cloud computing" label. Hear more from Chris in his video and slides.

Check out other videos in the Web Exponents speaker series:

By Steve Souders, Performance Evangelist

Aza Raskin: Conversational Computing (Ubiquity & Jetpack)

Steve Souders — Thu, 20 Aug 2009 08:47:00 +0000

Aza Raskin delivered the eighth Web E^xponents tech talk at Google last week. Aza is head of user experience at Mozilla Labs. He's an entrepreneur and Renaissance man, as evidenced by the breadth of topics in his presentation.

What I like about Aza is that he's a user advocate - sharing our frustrations over the complexities and hurdles of interacting with computers. It's not that applications lack functionality. Aza points out that "90% of the feature requests for features in [Microsoft] Word are in fact for features that are already in Word." The problem is that humans can't interact with, speak with, computer applications using a familiar language.

Ubiquity is one of the projects from Mozilla Labs that bridges this digital divide. Ubiquity is a Firefox add-on that allows users to complete tasks using a more intuitive language. One example Aza shows is highlighting part of a web page and typing "translate this to Russian". Ubiquity acts on the user's request by replacing the text in the web page with the Russian translation. Another example is typing an address in a Yahoo! Mail message, typing "map this", and having Ubiquity embed the desired Google map inside the email.

Aza calls this you-centric computing - allowing us to interact by talking about what we want to do, rather than forcing us to think about how to do it. Ubiquity achieves this, moving us from a web of nouns to a web of verbs. The point, according to Aza, is "perhaps by adding language, by making things hackable, we go from interfaces which work to our failabilities and our frailities, and instead are a little bit more human and hence a little bit more humane."

Jetpack extends Ubiquity's theme of making the Web hackable. Aza describes it as "an incredibly fast prototyping environment for changing the Web to make the Web yours. Sort of like taking the idea of Greasemonkey and mashing it up with extensions and giving it all steroids." Ubiquity and Jetpack allow each of us to make the Web our very own by modifying it to work the way we want.

Empowering users to customize the Web and more easily complete tasks moves us from a feeling of helplessness to a feeling of being in control. This is an important point and reminds me of Matt Mullenweg's talk at Velocity about slow web sites (my personal bent). There Matt says, "...when an interface is faster, you feel good. And ultimately what that comes down to is you feel in control." Empowering users is a common goal, and yet today's web applications still contain many hurdles (complexity, poor interaction language, slowness) that need to be addressed to make users feel in control and ultimately happy. Thanks to Aza and the folks at Mozilla Labs, we're moving closer to the you-centric Web each of us wants.

By Steve Souders, Performance Evangelist

Nicholas C. Zakas: Speed Up Your JavaScript

Steve Souders — Tue, 09 Jun 2009 22:14:00 +0000

Nicholas C. Zakas delivers the seventh Web E^xponents tech talk at Google. Nicholas is a JavaScript guru and author working at Yahoo!. Most recently we worked together on my next book, Even Faster Web Sites. Nicholas contributed the chapter on Writing Efficient JavaScript, containing much of the sage advice found in this talk. Check out his slides and watch the video.

Nicholas starts by asserting that users have a greater expectation that sites will be fast. Web developers need to do most of the heavy lifting to meet these expectations. Much of the slowness in today's web sites comes from JavaScript. In this talk, Nicholas gives advice in four main areas: scope management, data access, loops, and DOM.

Scope Management: When a symbol is accessed, the JavaScript engine has to walk the scope chain to find that symbol. The scope chain starts with local variables, and ends with global variables. Using more local variables and fewer global variables results in better performance. One way to move in this direction is to store a global as a local variable when it's referenced multiple times within a function. Avoiding with also helps, because that adds more layers to the scope chain. And make sure to use var when declaring local variables, otherwise they'll end up in the global space which means longer access times.

Data Access: In JavaScript, data is accessed four ways: as literals, variables, object properties, and array items. Literals and variables are the fastest to access, although the relative performance can vary across browsers. Similar to global variables, performance can be improved by creating local variables to hold object properties and array items that are referenced multiple times. Also, keep in mind that deeper object property and array item lookup (e.g., obj.name1.name2.name3) is slower.

Loops: Nicholas points out that for-in and for each loops should generally be avoided. Although they provide convenience, they perform poorly. The choices when it comes to loops are for, do-while, and while. All three perform about the same. The key to loops is optimizing what is performed at each iteration in the loop, and the number of iterations, especially paying attention to the previous two performance recommendations. The classic example here is storing an array's length as a local variable, as opposed to querying the array's length property on each iteration through a loop.

DOM: One of the primary areas for optimizing your web application's interaction with the DOM is how you handle HTMLCollection objects: document.images, document.forms, etc., as well as the results of calling getElementsByTagName() and getElementsByClassName(). As noted in the HTML spec, HTMLCollections "are assumed to be live meaning that they are automatically updated when the underlying document is changed." Any idea how long this code takes to execute?


   var divs = document.getElementsByTagName("div");
   for (var i=0; i < divs.length; i++) {
       var div = document.createElement("div");
       document.body.appendChild(div);
   }

This code results in an infinite loop! Each time a div is appended to the document, the divs array is updated, incrementing the length so that the termination condition is never reached. It's best to think of HTMLCollections as live queries instead of arrays. Minimizing the number of times you access HTMLCollection properties (hint: copy length to a local variable) is a win. It can also be faster to copy the HTMLCollection into a regular array when the contents are accessed frequently (see the slides for a code sample).

Another area for improving DOM performance is reflow - when the browser computes the page's layout. This happens more frequently than you might think, especially for web applications with heavy use of DHTML. If you have code that makes significant layout changes, consider making the changes within a DocumentFragment or setting the className property to alter styles.

There is hope for a faster web as browsers come equipped with JIT compilers and native code generation. But the legacy of previous, slower browsers will be with us for quite a while longer. So hang in there. With evangelists like Nicholas in the lead, it's still possible to find your way to a fast, efficient web page.

By Steve Souders, Performance Evangelist

Check out other blog posts and videos in the Web Exponents speaker series: