Backpack’s Pages tab has been completely rewritten in the new version. We moved nearly all of the application’s UI logic out of hand-written JavaScript files and into Ruby using RJS templates. This resulted in approximately 1600 fewer lines of application JS, and let us deliver pages with substantially less markup, since the edit states are now loaded on-demand instead of included in bulk with each page load.
Keep reading for more details on how we’ve improved Backpack’s internals, and for a look at several JavaScript libraries we’ve developed in the process.
We’re running Backpack on the latest versions of Rails, Prototype, and script.aculo.us from SVN. This lets us use Edge Rails’ support for asset hosts to circumvent the 2-connection HTTP limit for delivering assets. We’re also now using Rails’ asset concatenation for CSS and JavaScript files, which, when combined with gzip compression, results in extremely speedy page loads.
Most of the custom JavaScript in the new Backpack is used for wiring the interface in reusable ways. We’ve built a handful of mini-libraries that sit on top of Prototype and script.aculo.us, and we’re using them in several of our other applications in addition to Backpack.
One of these libraries adds support for specifying a CSS selector for script.aculo.us Sortable containment. It uses Prototype 1.6’s new Function#wrap to add the behavior in an aspect-oriented way without modifying the original Sortable source code. This is the library that powers Backpack’s widget reordering. It’s currently being used in Backpack and Basecamp.
Another library, internally called Hover Observer, uses an unobtrusive technique (monitoring the entire page for mouse movement) to add and remove a “hover” class on element hierarchies with certain class names. Combined with CSS, this allows us to easily show the edit/delete/move “nubbins” when you mouse over widgets on the page, or show drop-down menus when you mouse over applications in Open Bar. The library also lets us specify enter and exit delays, so if you accidentally mouse outside of a target area, the hover class isn’t removed immediately. Think of it as a cross-browser implementation of the :hover CSS pseudo-class, on steroids. Hover Observer was developed for Backpack and is now being used in Basecamp and Highrise.
The last library is tentatively known as Transitions, and provides an extremely simple API for animating transitions between DOM states. The animation resizes and fades an element’s content from one state to another, much like the effect you see when switching preference panes in OS X System Preferences. You’ll see the effect when you edit any item in Backpack. Because the API is simple, RJS-compatible, and easy to integrate into existing applications, we were able to develop it and drop it into Backpack in a single weekend. I’ll post more on this library when it’s ready for public consumption.
I’m extremely pleased with how everything turned out, and I’m looking forward to open-sourcing as much of our JavaScript infrastructure as possible in the very near future. If you have a Backpack account, I hope you’re pleased with the changes, too. :)
Noah Everett
on 02 Aug 07Sounds great…where’s the download link? ;)
Thijs van der Vossen
on 02 Aug 07Sounds great, we’re looking forward to the release of these JavaScript libraries as Open Source.
Jim Geurts
on 02 Aug 07Any chance of making the mini-libraries available to the public?
Daniel Drucker
on 02 Aug 07The library also lets us specify enter and exit delays, so if you accidentally mouse outside of a target area, the hover class isn’t removed immediately.
I noticed that and was wondering how you did it. It’s really great.
Randy J. Hunt
on 02 Aug 07Thanks for this one, Sam. Granted, I haven’t see any of it yet, but a little bit of innovative motivation on a day plagued by cross-browser issues keeps the buzzy get-things-done feeling alive.
shane
on 02 Aug 07Sam, the new backpack specifically in the UX department is an absolute pleasure. Thank you for all the improvements I certainly appreciate it!
Christopher K
on 02 Aug 07A comment about the writing in this article.
I liked this technique. First paragraph you give a tatse on what’s all about and then one is presented with the deal: “Keep reading for more details on how we’ve improved Backpack’s internals.”
For the record: I skipped the rest of it :-) Non-techie.
Daniel
on 02 Aug 07It is just a matter of using setTimeout and cleanTimeout in Javascript and not showing the thing directly. It is just a pitty that this old technique is not used more widely on the web.
Ethan Poole
on 02 Aug 07Have you ever considered using jQuery?
Christophe Porteneuve
on 02 Aug 07Ethan: man… friggin’ awesome comment. Sam loved it!
Mark Garrigan
on 02 Aug 07Have you guys considered mootools? http://mootools.net. The three libraries described in this article already existed in mootools and its lighter than prototype and scriptaculous. I understand that rails and prototype/scriptaculous are rather connected. It just seems that they are lagging behind in developing a solid javascript framework. Especially when it comes to documentation. http://docs.mootools.net/ is far superior to any documentation I’ve ever found for scriptaculous.
SS
on 03 Aug 07Noah and Jim, right now I’m wrapping up the first release candidate of Prototype 1.6, which should be out next week. I hope to have time to release these libraries shortly afterwards. I’ll be sure to post about them here on SvN when I do.
Ethan and Mark, we’re very happy with Prototype and script.aculo.us at 37signals, but thanks for your concern. Prototype has served me quite well since I created it in early 2005.
Anonymous Coward
on 03 Aug 07snap!
Mark Garrigan
on 03 Aug 07Sam… Prototype and Scriptaculous had served me well enough for a little over a year also. And, I definitely commend you on your creation of Prototype. I probably didn’t make it clear enough in my original comment, but I think the current bottle neck is in Scriptaculous. I admittedly haven’t looked at the new prototype website and documentation. I just did. Very nice work! I had always blindly relied on Scriptaculous for effects because I wasn’t quite sure I understood how to use prototype. With the current prototype documentation (sorry if its always been there.. and i just didn’t know about it) I would feel much more confident using scriptaculous.
Again… great work on prototype and incredible work making it all come together in your Apps. I meant no harm by my suggestion of mootools… The learning curve of mootools for me was just much more shallow than that of the prototype scriptaculous combination. Which is what my opinion was based on.
Jon Hohle
on 03 Aug 07It sounds like you’re adding several JS methods to elements using CSS selectors. Have you used Behaviour? That’s what the whole library’s about.
Prasanna
on 03 Aug 07Sam,
Thanks man!. You save my daily life with your Prototype and I am only glad that more is coming!. Thanks again
Mike Papageorge
on 03 Aug 07“we were able to develop it and drop it into Backpack in a single weekend”
Heh, now if everything was that simple, you would be saying “we were able to develop it and drop it into Backpack in two working days”... :-)
Chris Kampmeier
on 03 Aug 07@Noah, Thijs, Jim: it’s just Javascript, and the code is delivered to the browser as-is… HoverObserver starts on line 6349, the Sortable wrapping is around 6218, and Transitions (apparently not related to scriptaculous’s existing code of the same name) is on 6929.
One thing I love about Rails (and see throughout your code here) is the refusal to use acronyms, abbreviations, and so on. It makes the code very readable. I think of most Javascript code as being especially notorious in this department.
One question: the Transitions library you’re describing sounds a lot like Scriptaculous’s “Morphing” functionality. If I’m making the right assumptions here, then I’m curious about what kept you from using Effect.Morph? Transitions looks a lot leaner on its face—were you just trying to keep it simple?
Shane Vitarana
on 03 Aug 07Sam- I’d love to see Hover Observer released to the public. I remember you showing me an early version of it. I’ve been trying to do this myself but keep running into inconsistencies with the “nubbins” exit delay as you hover in and out of the target element a couple of times.
carlity
on 04 Aug 07great, can’t wait to test out the resuling open source libraries!
Anonymous Coward
on 05 Aug 07test
Sasikumar
on 06 Aug 07As these are all the common requirement for all web applications, browser vendors should bundle these useful js libraries (if open sourced) and make it available for the browser vm.
Tret
on 06 Aug 07“Especially when it comes to documentation. http://docs.mootools.net/ is far superior to any documentation I’ve ever found for scriptaculous.”
This rendered scriptaculous useless for me, I achieved 100 times more in about 4 hours with mootools than I did in 4 days of pissing about with that pitiful scriptaculous wiki (Wikis like that are just so damn lazy)
This discussion is closed.