On Fri, Apr 23, 2010 at 9:52 AM, Paul Irish wrote:
Hey Joel,
Congrats man this is huge. I was talking to Scott Schiller (at flickr), previously at CM, and we were both quite impressed... I wanted to ask you some questions about the site and how you got to here...
I assume there was resistance when you guys said you would do this without flash. Who gave you the most resistance (client? sales? designers?) and how did you deal with that?
Joel: Well, we didn't go into the project planning to choose HTML/SVG/jQuery over Flash at any cost. When we first received the art direction from the designers, it just looked like we could achieve it with minimal use of flash. We still use Flash for the intro video and movies. (again IE6 requirement) The designers were also willing to meet us in the middle and dial down the shapes complexity in order for us not to have to deal with animating complex SVG paths. Also, because of the unique nature of the car itself, we thought it'd fit the brand if we managed to do something a little bit 'cutting edge' technically. We received the final green light after prototyping both a flash and a JavaScript version and proving that the JavaScript version ran well enough. Now that I think about it though, the prototype we initially built did not include collisions. When we received requirements for animating collisions 8 weeks before launch, I'll admit we got a bit scared.
What were some of the technical challenges involved in creating the site?
Phil: Overall performance of the site was the most challenging aspect we encountered. Considering the amount of work the JS is handling on the frontend, it still had to perform well enough to be useable on browsers with less robust JavaScript engines. There was a couple places where we had to replace the real-time calculations with pre-computed values to get satisfactory speed on a certain line of browsers.
Choosing the right framework to build the backend was also an interesting challenge, because this was also an opportunity to work with new tech on that front. We ended up choosing to go with Grails for this project, and it’s been great to work with.
I actually just saw Raphael in a talk and demonstration by its creator, Dmitri, at JSConf. It was very impressive. How do you like working with it? What sort of performance did you see in the vml translation for IE?
Joel: It was actually another dev on the project, Evan, who first suggested we look into Raphael for rendering. Raphael is indeed very impressive and worked very well for us in the end. Dmitri's work is inspiring. The fact that it does the VML translations for IE6+ support was invaluable to us, since supporting IE6 was indeed a requirement for this project. In our case, there were some visible performance issues in IE (VML) in general when we were doing all the math (collision detection and repulsive force calculations) along with the animation. We worked around it by building a simulator that would pre-compute the x,y coordinates for the collisions on the dev environment and generate those pre-computed coordinates to be used in "canned animations" in the production environment. VML also doesn't handle animating opacities very well. So the designers had to reduce the use of shadows and alphas throughout the site. VML is also a bit slow when loading images, so for a few milliseconds, IE renders a broken image placeholder. Loading a small 1x1 image and swapping in the real image after it's been loaded alleviates this problem a bit.
There are some other places on the site where we use Raphael and SVG that aren't as obvious to the user. In the reservation area of the site, there's a range selector with hoverable arcs drawn in svg for instance. I'd definitely recommend Raphael to others for this type of work.
Now that this is launched, would you say it's entirely feasible for developers to be pushing for highly interactive sites to be done without flash as you did here?
Phil: With the right team I would say yes, it’s definitely possible to push the limits of what can be done with open web technologies. As we move forward it’s only going to become easier.