Breffni Murdoch | 7:30 am Nov 28, 2011

No Comments

Tweet

Share

Web App Development #1: Single Page Web Apps

This post is Part I in a series on tools and techniques we find useful at NewBay for developing single page web applications.

The NewBay UI team specializes in developing these applications, leveraging all the goodness the latest advances in HTML5 and JavaScript bring, along with all the great new frameworks available in this space.

Single page web apps are essentially single page websites that, once loaded to the browser, require no further user navigation away from the page. All subsequent communications with the server occur on demand, usually driven by user actions. Along with this reduced navigation, using HTML5, CSS, and JavaScript allow a web page to be authored with much greater interactivity, effectively behaving more like a native application, whether on desktop or mobile devices. Like all good applications, web apps exist to solve a problem for the user, as opposed to a web site which is often just a source of information.

Web apps bring great advantages:

• Usability
The traditional web site architecture involves more regular calls to the server to load new pages. The inefficiency brought about by “page switching” incurs delays, and is very disruptive to the user experience. Single page apps are smarter. Once the app is loaded subsequent requests are typically for data, they are streamlined (apps are only given what they need), and they can cache this data locally as required, which all results in greater responsiveness for the user.

• Server Load
This streamling of requests reduces the bandwidth requirements (especially important on mobile devices) and reduces server load. Additionally, most of a web apps business logic resides in the browser, removing the burden from the server, and greatly aiding scalability.

• Better Architecture
Web app architecture gives the server the primary responsibility of providing a data layer, typically by exposing Restful APIs. This seperation of concerns allows additional clients (e.g. desktop apps, native mobile apps, Blackberry WebWorks apps) to independently leverage the data layer, as outlined below:

Data in RESTful architectures is typically JSON (which clearly suits web apps). NewBay’s LifeCache APIs also allow data to be expressed in other formats such as XML.

Tools and Techniques

Building single page web apps can be challenging. jQuery, the most popular JavaScript library, is great for rapidly developing web apps, as it has a large active community of plugin developers. However, using jQuery alone to create non-trivial apps can produce an unwieldy amount of code, leading to a collection of disparate jQuery plugins, glued together by event listeners, which attempt to coordinate user requests amongst user interface elements.

Even with great team discipline and code structure, these architectures can only grow so much before the inevitable ‘spaghetti code’ syndrome kicks in. Part of the reason for this is the browser Document Object Model (DOM), and its negative influence on an app’s design. jQuery sits directly on top of the DOM, and while great for easily manipulating the DOM to create cool widgets, it has no role in the business logic of an application.

So whats needed is a mechanism of decoupling the DOM from the applications data. Additionally a proper solution needs to detect changes in this data and if required reflect these changes in the DOM (the UI).

Model View Controller architectures have been great at solving these problems on the server-side, and thankfully there has been great activity in this space on the client-side over the last couple of years, with numerous frameworks now available to make developers’ lives easier.

Part II of this blog series will discuss the popular Backbone framework, and how we use it within NewBay to build awesome UIs.