One of the questions that keeps coming to me over and over again is – what is an ideal architecture for multi-device applications or rather applications that cater to multiple devices like desktop, mobiles, tablets, internet-TVs and what not?

This is quite interesting and exciting as more and more frameworks get developed. We started the multi-device world with native apps and soon realized that the model doesn’t scale. There came HTML apps (or what people naively refer to as HTML5). I won’t call them as really HTML5 (HTML5 only) apps… since you can live with HTML4 and CSS2 for most of the purposes unless you want features specific to HTML5 – most common being using audio/video since Flash is unavailable on iOS (iPhone, iPad etc).

Cross-mobile HTML apps gave birth to fantastic mobile UI frameworks like Sencha Touch, jQuery Mobile. And to access device-specific capabilities without having to maintain multiple codebases, we have amazing stuff like Phonegap and Titanium.

Great. Now that we have some great frameworks, how can we leverage them to design our application architecture?

A very common architecture that we come across, doesn’t matter how old it is – yet it is valid, is:

Notice how carefully the Web Server is separated from the Application Server. But do we really get that? Most of the applications (read: enterprise) have the Web and Application stacks on the same server… and that’s not a good idea.

Why? Well… we can’t scale the web (frontend, browser facing) servers as they tend to be heavier. Additionally, it gets harder to do a lot more of the stuff:

1. Redirecting based on the origin of request – device-based (e.g. m. for mobile, www. for standard), region-based (e.g. /hi-IN for India based, /en-US for elsewhere) etc
2. Caching – suddenly you start mixing the global-data (non-user specific), user-specific, module-specific (if the frontend is properly modularized) etc
3. Security – Ouch! All your data-calls are made from the “common server” and a compromise there can leave you at bigger risk than otherwise
4. And a lot more…

Basic rule is to ensure that the “backend servers” are separate from “frontend servers”.

So, the question now that gets in – how do I implement this in real world? And how do these new frontend (read: UI) frameworks help… let’s explore that in Part 2 of the article.

References:

1. Sencha Touch: http://www.sencha.com/products/touch/
2. jQuery Mobile: http://jquerymobile.com/
3. PhoneGap: http://phonegap.com/
4. Titanium: http://www.appcelerator.com/platform
5. The architecture of Web applications: http://www.ibm.com/developerworks/ibm/library/it-booch_web/