David Herse is the Somethin’ Else client-side genius. This is him getting technical on the development process on our utterly fabulous web app for Last.FM, called “Discover.”

Back in August Last.fm came to us with a very interesting brief—to create a web application to navigate and share 2 million emerging artists’ tracks. We had to deliver it in a rich, immersive and unique fashion, using HTML5 and CS3 technology wherever we could. 

We stuck it into the @VoiceOfSE user-centred design process, and eventually hit on a design that seemed to tick the boxes. It was textured, playful and original (and not the same old music player)—but could we build it?

Creating an HTML5 app (or rather using rich technologies umbrella’d under HTML5) was an exciting prospect. HTML5 offers much promise in the direction the web is taking. The lines between native desktop application and the web are blurring quickly. With improved browsers and system specs why should the application stop at the door of the internet? Last.fm Discover is part of the great push toward a more sophisticated web. How that world will look exactly is still up for grabs, but if more companies like Last.fm continue to test the possibilities and support innovation, we might get to a good place sooner rather than later.

However HTML5 is not without drawbacks. The API implementations are varied, disparate and often buggy. A large portion of web users are still using antiquated browser software, unwittingly holding back advancement. A single-page asynchronous application, with full screen textured animations and multiple dynamic user journeys was going to be a massive challenge.

We started with Backbone. One of many developing frameworks for Javascript, it seemed like the best match. It has excellent built-in methods to manage your data requests, good data structures and nice integration with underscore templates. It would help us keep things in order with a tried-and-tested MCV style setup.

The next challenge was animation. We tried a few different techniques: Javascript animation; canvas animations; CSS3 transitions … Our first animation tests were promising, but as we scaled things up it started to get shaky. Safari started to glitch out. Chrome decided it didn’t want to redraw the page any more and went on holiday. Firefox took one look at the animation and passed out. Explorer just shrugged it’s shoulders at us and said ‘no’.

Hmmm. 

CSS3 transforms caused the least amount of issues so we pursued this route. We started on Safari. It turns out that if the animated element was over a certain pixel size it would have redraw issues, exposing ugly blocks of nothing where there should have been lovely green hills. We over came this with tiles. Instead of using a regular CSS repeating background for the hills, we inserted a series of image tiles. Problem solved. Except this made things 10 times worse in all the other browsers. Sigh!

Chrome had serious problems. Elements would just disappear from screen never to be seen again. The issue turned out to be two-fold. Firstly our animations had to be much leaner and precise to avoid redraw memory issues. We reworked the animations to only move elements visible on screen, anything else was hidden or remove. Secondly the problems seemed to be CSS z-index related. Chrome was having trouble redrawing objects that had been forced in front by z-index. This was a major hassle. We had to completely re-order the flow of the html file to make items appear in the correct layered order without forcing the z-index. Whew! 

Now Firefox. Wake up Firefox! Wake up! … This was bad.

Animations were horribly jumpy and random. For a long time it looked like a lost cause. But some of the animation efficiencies we made were helping. Then we discovered that the CSS scaling was causing animation position problems. It seems that when you requested an element position in Firefox, it wasn’t including the CSS scaled offset amount. This caused hills to randomly shoot off screen in all directions. So a little bit of custom calculating for Firefox and things started to move. Without hardware acceleration in Firefox, we were never able to get it to perform as well as the other browsers, but it was functioning, which was a long way from where it was.

And then there was Internet Explorer. Now, this may come as a surprise to anyone that has dealt with the Microsoft browser legacy, but IE9 gave us the least issues. There was some extra work involved in IE9′s lack of CSS transitions, but after we sorted that with a few javascript plugins, things started to work. And I’m not just saying this because they part sponsored the project. It was a bulldozer. It didn’t care what we threw at it. It just ploughed on. I was as surprised as you are.

But wait, we are forgetting something! What self respecting HTML5 project would not include support for iPhones and iPads. Let’s fire it up a take a look. Oh, it crashed. Let’s try again. Oh dear. iOS devices are amazing gadgets, but they live on a knife edge of system resources and you do have to treat them delicately. So we had to take the pruning scissors to the Discover hills to help them out. 50% less moving stuff equal 100% less crash. Not a bad trade for such an important consumer of HTML5 apps.

And so Last.fm Discover limped, hobbled and then sprung to life. A sophisticated, rich, immersive HTML5 web app beaten into existence through gritted teeth, determination and a patient Last.fm. I can hear Flash developers laughing. Why use HTML5 at all? Why bother when there are existing technologies to do what we have done quicker and easier? Well, HTML5 is more than a buzz word. It’s the hope of an open rich online world. It’s lean, clever and untethered. It’s unrestricted by OS, corporation or device. I’ll admit that HTML5 still has a long way to go, but Last.fm Discover is just one of many exciting projects that are emerging and will emerge to help to blur the boundaries of what the internet is. Yes the native desktop app is currently king. It’s mature, has excellent financial models and good purchasing outlets. The conception of the ‘app store’ has secured the native apps position. This is great! I say if we can get paid to develop native apps, lets pursue that model for as long as we can. At the end of the day developers have to put food on their computer desks like everybody else. But keep one eye on HTML5. Keep and eye on the ‘web app’. Because one day soon all the cool kids (nerdy developers) will be writing HTML5 applications, making millions and selling stuffed toy merchandise like it’s Angry Birds all over again.

And most importantly without a tool like Last.fm Discover, I would never have found my new favourite music genre “Nerd Core”. That was worth the pain.