What Are Single-Page Web Apps?

SPAs are a refreshing departure from the days of big, multi-layered enterprise software and are a joy to use on any device. Most importantly, they pull off that all important trick of operating just like a native application.

SPAs are just what their name suggests – software applications accessed via web browsers and displayed on one, single webpage. They’re clever, too, because they can dynamically update content as the user interacts with the app without having to reload the entire page itself.

Single-page web apps generally use HTML5 and Ajax elements to create a fluid user interface that feels suspiciously like a desktop or native application.

Just as SPAs have grown in popularity, so too have regular websites that feature limited navigation and just a single page of content. But when does a regular website become a web app?

Generally speaking, webpages cease to be sources of consumption when workflows and business logic are built into them. Consider a website extolling the virtues of an accounting app and then imagine the same website with the addition of buttons, fields and the ability to create customer invoices. The latter would be termed a web app.

All of the necessary code required for an SPA to work (i.e. the HTML, JavaScript and CSS) is all retrieved with just one page load. That means the user can get cracking as soon as the webpage appears on the screen and doesn’t have to wait for tasks to update.

Due to the dynamic way in which single-page web apps update the user interface without ever reloading the page, most of the grunt takes place client side thanks to JavaScript. Crucially, the database is entirely separate from the front end of the app and when the latter needs to recall something, it is able to quickly pull it from the database.

The sheer scale of the web development landscape and the speed with which new techniques and best practices arrive can be rather intimidating, but there are some best practices when it comes to building great SPAs.

We think there are 3 key things all developers should bear in mind when building a single-page web app.

• Pick an application framework to make your life easier, such as BackBone or EmberJS.
• Use client-side templates to reduce the amount of JavaScript you’ll need to write manually (Underscore is a great resource for this).
• Build your SPA in a module-based fashion. Treat each JavaScript file as a module with its own name and relative path and lean on libraries from the likes of RequireJS to make your life easier.

Building a single-page web app requires a number of modern development techniques to sing together in Bee Gee-like harmony, but thanks to clever server- and client-side techniques, SPAs are fast becoming the most dynamic and approachable apps out there.