Having spent 7 weeks building the 30 Years of Schuh website I thought it would be useful to get my developers summary of how this was tackled. Daniel has kindly broken down the challenges he faced and some of the solutions we used on this project. This will hopefully give some of you an insight into how we built the site.
Front-end
The project was entirely created in Flash because of its interactive nature.
The interface was based on the timeline concept with parallax effect and huge amount of images being loaded on the fly. It made perfect sense to use Flash in this case. We could develop a number of optimisations to help the user interface to be as responsive and smooth as possible. One of the main goals was to keep file size low which sometimes is a main concern for clients using Flash. Nobody likes to wait so long for a 5mb website no matter how beautiful it is. However, having the opportunity to design something from scratch, do this well and use all advantages of Flash can offer it wasn’t difficult to keep final project below 200kb. I am pretty sure that with more time and graphical optimisation it could be even below 100kb. Oh, and one more thing; forget about PureMVC or other frameworks in this case. Frameworks themselves are a monster sometimes.
Parallax effect
To make the time-line experience even more interesting we decided to use many different planes and base on difference in the apparent position and move them across with different speed. That visual effect made interactivity more enjoyable however it did increase the level of difficulty of the project. From now on all the optimisation needed had to apply for every single plane and affect back-end development as well. During the movement, positions of the images were no longer fixed so it made it difficult to move them on demanding position. For this reason we had to build in some administration features to give a moderator the possibility to amend it.
Image container
The entire project was all about the visual content and image display. This element quickly became a crucial part of the entire structure and the main subject of optimisation. Keeping all the images constantly on the screen simply wouldn’t work. It also increased the memory consumption and took up precious processor cycles to render the timeline smoothly. Also loading all the images and unloading them when not needed wasn’t the best option. At the same time loaded content shouldn’t affect the user interface, so it had to be asynchronous approach. So, the image container is in fact deeply integrated with the custom loader system, internal caching solution and is constantly being used by the viewport optimisation algorithm that is checking those containers against a visible part of the screen.
With this approach garbage collector is maintaining memory usage and it let us develop a solution that can handle 500 images being loaded on load.
Back End
When you look at the whole picture this project is nothing else but a little blog system. Users can upload their own photos, post a comment and rate others peoples images. In addition to that they can also share posts and events on Facebook. For this reason we had to develop a more sophisticated registration/login system. There is a huge amount of data being transferred under the hood. And again, it has to be as small and efficient as possible. For this reason we couldn’t use standard xml as a dynamic data format. It is way to heavy and parser needed is too slow to compare to our custom protocol which is almost as small as AM3 format. Parser crunching all the information in one go.
PHP
This language comes in handy for Flash and Data Base communication. Giving us a lot of flexibility to do whatever we want to do and more importantly, can take intense calculations on the server side leaving more resources to the client. We decided not to use any framework since in our case it’s a bridge between Flash and MySQL. Files are very small and simple to make processing time needed on the 0.0001 ms level.
Data Base
It holds all the information as any typical blog system does. Nothing is too complicated
These days more and more companies are using the power of Facebook to spread news about their projects to the world. In fact for us developers it means additional work and headache. It’s not a good practice to make your website completely dependent of 3th party solution. So, when comes to Facebook connect you thinking about both. There is many different ways to deal with Facebook and Flash.
However latest AS3 Facebook API base on latest OGraph is so easy to use that front end side of this integration took no more than 3 days. And this is what we have used.
