Joseph Smarr is the Chief Platform Architect at Plaxo, Inc., where he's led the engineering of Plaxo's address-book integration application. In the course of building Plaxo 3.0, which involved an ambitious foray into rich internet application design, Joseph and learned a host of lessons about the importance of performance and the means by which it can be achieved. Many of those lessons ("premature optimization is the root of all evil") will be familiar. But some run contrary to what are commonly thought of as best practice in frontend engineering — for example, the Plaxo team found that in some cases they could achieve substantial gains by attaching event handlers inline using DOM level 0 syntax (e.g.
<div onclick="someGlobalFunction();">) rather than attaching them via DOM level 2's favored
In sum, Joseph argues for a four-point approach to achieving maximum performance in your web-app:
- Be lazy: Don't load or do things before you need to; maybe you won't need to load or do them at all.
- Be responsive: Make things happen quickly. If you can shave 100ms off of an interaction by responding to a
mousedownevent instead of a
clickevent, do it.
- Be pragmatic: Frontend engineering is hard enough. Don't make it harder than it needs to be.
- Be vigilant: Blank web pages are fast. Web pages become slow because you put stuff in them; slowness is your resonsibility. Vigilance is required to prevent slowness.
Joseph visited Yahoo! this week to reprise his recent talk from OSCON in which he enumerates these lessons and fleshes them out with practical detail and the wisdom of experience. Our thanks to Joseph for the visit and for allowing us to share his presentation publicly on YUI Theater.
This video is available in Flash format on Yahoo! Video and as an MPEG-4, iPod-compatible (and iPhone-compatible!) download (change the extension from
.mp4 if your video software doesn't recognize the extension).
Joseph also features in a video this week from the ScobleShow on PodTech (iPod compatible download), where he discusses some upcoming Plaxo features including an online identity aggregator based on microformats.
In Case You Missed...
Some other recent videos from the YUI Theater series:
- Matt Mlinac: "The YUI ImageLoader Utility" (Yahoo! Video | .m4v download)
- Shawn Lawton Henry: "Web Content Accessibility Guidelines Update" (Yahoo! Video | .mp4 download)
- Joe Hewitt: "An Introduction to iUI" (Yahoo! Video | .m4v download)
- Karo Caran: "An Introduction to Screen Maginfication Software" (Yahoo! Video | .m4v download)