31. October 2007, 10:32, by Silvan Mühlemann

Creating our AJAX photo gallery

gallery.jpg

We want you guys to be able to flickr really fast through our Supergirls, so we transformed our photo gallery into a rocket-fast AJAX-app. Keyboard addicts can use their arrow keys to navigate through the pics. Support for bookmarkable URLs and back button. Fancy script.aculo.us fades.

Ciprian, was the lead developer of that gallery. With the help of Kevin and Thilo he built this app in the last few months. Technologies? OO-PHP5 on the server side. Caching of picture queries with memcached. On the client side OO-Javascript with prototype.

IE6 challenging us

“The biggest challenge was making it compatible with IE6. First, IE6 did not support innerHTML very well so I had to create all objects via the DOM interface. Lot of work! Another tricky bug was the void(0) issue which interrupts the requests to the servers. And we could not switch everything to <a xhref="http://techblog.tilllate.com/#" mce_href="http://techblog.tilllate.com/#" onclick="aFunction();return false;"> because we have the ID of the picture after the hash sign”, Ciprian explains.

Solving the back button problem

“Even though I did research on the internet I did not find a solution which fits. I combined multiple solutions. It wasn’t a problem for Firefox because you have easy access to the history. For Internet Explorer we had to do it with an IFRAME.”

The tools of our choice

“As development tools I am using Firebug and the IE developer toolbar for debugging. And as Javascript development tool I am using the Aptana plugin for Eclipse.”

Stress test

Before going online with the service we had a beta test phase with our 1000 photographers. Part of the testing was also a stress test with Proxy Sniffer. Even though the stress test showed a 4 times faster photoalbum compared to the legacy one the load on the servers exploded on the first busy weekend: 512 apache slots on the 20 servers just weren’t enough to handle all those additional HTTP-requests coming from the new gallery. :-/

Fortunately Stefan has ten more servers ready. They will be in place this weekend to tackle the +30% increase in page views due to the AJAX gallery.

Filed under: Uncategorized —

3 Comments

  1. Alles schön und gut, jedoch ist die Galerie mit deaktiviertem Javascript nichts wert. Ich bin mir allerdings sicher, dass dies ohne Probleme möglich gewesen wäre..

    Comment by mix — 5. November 2007 @ 09:06

  2. ;)

    Comment by Victor — 5. November 2007 @ 19:56

  3. […] After we launched the new AJAX-Gallery it was clear that it was a big success. But are we able to measure this success? It shouldn’t be a big problem, we have several statistic tools to measure how many pages we deliver. For the Swiss part of tilllate we use WEMF NetMetrix to get official numbers, our own tool (”Prince analytics”) to answer some questions we can’t with other tools and at the end the Google Analytics to answer our daily questions. So as my co-worker Ciprian started to collect all this data he gets three different graphs. Not a bit different, very different. After some time we found out that we made a mistake with our own tool. This issue fixed WEMF and “Prince analytics” showed the same graph. But still, Google Analytics only show around half the numbers. The overall graph was correct, but the results of the drilldown on our gallery were wrong. […]

    Pingback by techblog.tilllate.com » Google is not enough- — 20. November 2007 @ 09:50

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

© 2017 tilllate Schweiz AG - Powered by WordPress