Building Fast Webapps, Fast (Lessons From Creating the Meebo Bar)

Web Performance Ballroom AB
Average rating: ***..
(3.81, 16 ratings)

Summary

If the Meebo Bar is slow, hundreds of unforgiving partner websites and hundred of millions of users are affected. However, time spent on optimization is time away from feature development, and if we fall short on feature parity we lose market share to our competitors. As a result, it is crucial that we make good decisions about what and when to optimize. “Building Fast Webapps, Fast” tells stories of good and bad decisions we have made when faced with performance challenges for the Meebo Bar. Interlaced with high level optimization guiding principles, it is intended to be a fast-paced and fun story of how to take ownership of your web product’s performance.

Overview

Many developers and entrepreneurs will be at Velocity 2010 because they understand the importance of their web applications to be lightning fast. However, a competitive everyday reality will often force us to prioritize building web applications fast over building fast web applications. Striking a balance between the two is a continuous challenge for any business trying to make it in a crowded web space. Lose yourself in optimization, and your competitors will run circles around your feature set. Build an unscalable architecture, and you will find yourself hitting unexpected brick walls both left and right. 

In the world of web applications, traditional laws of optimization may not always apply. It can be hard to know if it is javascript computation, dom manipulation, or layout and rendering that is making your web application slow. Even if you do know what your bottle necks are, how do you decide if they are worthwhile to tackle immediately? Here’s how we did it:

“Do Less” - Delegating mousedown for thousands of draggable page items
In C it is easy to do Bad Things that makes your code slow. In Javascript, it is not as easy to shoot yourself in the foot with inefficient memory management, and it is rare to require tight loops and efficient computation. The guiding light to successful web application optimization is not to do things more efficiently, but rather to simply Do Less. The best indication of what to do less is simply to count number of executions of each function.

“Hypothesize, Experiment, Optimize” - Who knew smileys could be so slow?
Premature optimization is the root of all evil. To avoid deep and dark rabbit holes when optimizing, it helps to have a rigorous methodology for finding and eliminating bottle necks. Start out by hypothesizing what you think is slowing down your web application. Then perform an experiment to show that you were right or wrong. When you are dead certain that you know what the bottleneck is and how to eliminate it you can start the actual optimization. Not a moment before.

“Optimize in Isolation” - Making buddylists with thousands of buddies scroll fast.
This one follows as a conjecture to Hypothesize, Experiment, Optimize. When performing your experiments, set up test environments that eliminate as many variables as possible. Recreate the problem on a blank page, and confirm that your optimization strategy works. Once the problem is conceptually solved, integrating the solution into the production code base will be much easier. 

“Just In Time Code” - A thousand DOM traversals can be pretty slow, but just one will always be fast
Another way to do less right now is to do it later instead. Web application javascript code is usually event driven, by user action as wellas by information sent from the server. If you find your code doing too much at any one time, search for things that don’t have to be done until the user does something or some state changes on the server.

“Just In Time Optimization” - Building the Meebo Bar
To round it all off, this meta-principle is meant to show that the optimization guidelines apply to you as well as your code. Just In Time Code tells us our code can wait with its work until its necessary – similarly, we as coders and product managers need to not spend time optimizing things that are not a problem. Architecture with foresight can prevent pitfalls down the road. However, you never know what road you end up going down.

Conclusion

We need best practices to guide us along the way of web application optimization. While building the Meebo Bar the simple advice “do less” has come up in many shapes and forms, from making long buddy lists scroll fast to persisting a static UI element with lots of state across page views. Learn the ways in which to do less and take ownership of your web application’s performance, by making good decisions about when and what to optimize

Photo of Marcus Westin

Marcus Westin

Meebo

Marcus Westin has been working with Meebo since 2008. He’s all about the web and enjoys his javascript in the raw, sans library. Before Marcus came to Meebo he spent his spare time learning the ins and outs of frontend technology while studying for a BS in computer science at the University of Chicago. Catch him on a good day and he won’t stop talking about the open web. 

Marcus has previously spoken at OSCAMP on decoupling data and UI layers and given a lightning talk at Ajax Experience on unobtrusive javascript Inclusion using iframes. He also frequents the various bay area js meetups as a speaker, audience member, and organizer.

Photo of Martin Hunt

Martin Hunt

Game Closure

Martin Hunt has extensive experience with web architecture, comet, performance optimizations, and cross-browser development. In addition to industry experience at Meebo, he has degrees in CS and mathematics from Harvey Mudd College and has enjoyed dabbling in image processing research and iPhone development. He is a contributer to open source software, leading recent development of js.io, a platform for writing cross-browser and server-side JavaScript with advanced package management and comet support.

Martin built the first several iterations of the Meebo Bar front end and has identified and proposed solutions to a number of technical issues plaguing third-party JavaScript content on the web, particularly with regards to performance. Many of these will be highlighted and explained in depth at the Velocity presentation.

Comments on this page are now closed.

Comments

Picture of Vik Chaudhary
Vik Chaudhary
06/24/2010 3:30pm PDT

I learnt something new that helped shave 100KB of JavaScript from the site www.indianbento.com. Learnt that rounded corners are now easily supported in Firefox and Chrome. Come on IE8!

Picture of Jon West
Jon West
06/24/2010 8:05am PDT

This is at least the 2nd or 3rd time I’m hearing about the “load JavaScript by iframe injection” technique and I’m ready to go test it on our sites at Shopzilla! Great talk.

Picture of Steve Souders
Steve Souders
05/25/2010 2:52am PDT

The Meebo bar has undergone an amazing number of performance improvements. When I heard what they had done, I knew I wanted them to present at Velocity. Come hear what they fixed, what was important (and what wasn’t) and some tricks on the actual implementation. Anyone care about widgets and mashups? Anyone using 3rd party content on their web site? You need to hear this talk.

For Velocity China sponsorship information for companies outside China, contact Yvonne Romaine at yromaine@oreilly.com.

  • Google
  • Strangeloop
  • Yahoo! Inc.
  • Dyn Inc.
  • Facebook
  • Schooner Information Technology
  • Tilera
  • AlertSite
  • AppDynamics
  • Aptimize
  • CDNetworks
  • Circonus
  • Cloudscaling
  • Clustrix
  • Coradiant
  • Dell
  • DTO Solutions
  • MaxiScale
  • Neustar
  • Nokia
  • NorthScale, Inc.
  • Shopzilla
  • Splunk
  • Virident
  • Zoompf
  • Neustar

For information on exhibition and sponsorship opportunities at the conference, contact Yvonne Romaine at yromaine@oreilly.com

Download the Velocity Sponsor/Exhibitor Prospectus

Download the Media & Promotional Partner Brochure (PDF) for information on trade opportunities with O'Reilly conferences or contact mediapartners@ oreilly.com

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

To stay abreast of conference news and to receive email notification when registration opens, please sign up for the Velocity Conference bulletin (login required)

View a complete list of Velocity contacts