For a few years now there has been a steady trend toward more powerful websites. Websites with more features, new interactions, beginning to resemble desktop applications. Google is a known proponent of this approach, and they’ve come up with an operating system that is basically a browser running client side applications.
Definition of a client side app
Benefits of client side app
A powerful, fast, responsive and dynamic UI. Desktop UI metaphors such as context menus, interactive visuals, drag and drop and others that allow for complex and intuitive user interaction. A comprehensive user interface experience where all aspects and features are contained within a unified application. Less reliance on links and standard web elements adhering to a hyperlink document metaphor. Dynamically updated interface immediately connected to a back end service – think instant messaging or Google Wave instead of a forum as an example.
Proponents of client side app
How to think about a client side app in the implementation
The danger is to think that some use of AJAX and dynamic UI elements is enough but it isn’t. The common refrain is the comparison to a desktop application, so let’s pursue that analogy.
There is a benefit to be realized from drawing a connection between a client side application in a browser and a desktop application. Desktop applications don’t download parts of its UI from a remote server. For example, some web sites may use XMLHTTPRequests to grab server side generated HTML from the backend. Desktop apps don’t do this, they can’t (unless they use something like a WebView), and neither should your client side application. Grab your data from the backend as a desktop application could handle it, as JSON or XML, and allow the client side application to determine how to display this information to the user. From launch until close, your client side application should render the UI, not the backend.
Desktop applications do not display an inordinate amount of buttons that send you to other desktop applications. In fact most desktop apps never send you to another application. In a client side application links to other sites take you out of the application to some other place: a link closes your application if it does not open a new tab or window. How many desktop applications have interface features that simultaneously send the user to a different desktop app and then closes itself?
The initial HTML is really an application download
The best way to think about a client side app is to imagine that the initial HTML download is an application download. Allow the client side application to perform the rendering of information and UI elements. Don’t utilize back end generated HTML, even if there is a small performance hit: you’re loading an application, not a website document. The first time a user downloads your application it is also an installation. You prepare the client side database/storage mechanism, you obtain user preferences, you explain your application. Smart use of browser caching can help prevent new downloads of your application on subsequent visits. Updates are actually new versions of your application that will require a new download via cache busting techniques.
Compile your application
Make use of tools such as Google Closure’s comiler. Make use of sprites and condense your CSS into a single file. Think of using tools such as buildbot and scons to generate the application that will reside in production to help you with these steps.