File Under: Web Apps, Web Basics

Building Better Single-Page Web Apps

Single-page, application-style websites offer web developers a way to replicate the user experience of native apps, particularly on mobile devices. Indeed, the application design model — that is, a single webpage that never needs to refresh or reload — is the basis for some of the web’s most popular sites like Facebook and Twitter.

But such app-based sites often break fundamental tenets of the web, eschewing HTML source for JavaScript, breaking the browser’s back button and removing the ability to link deep into the application. Some of these problems are addressed by standards like the HTML5 History API, which allows applications to update the URL bar without refreshing the page, but not every app bothers to take advantage of such recent developments.

The potential problems single-page apps can cause are not, however, sufficient reason to avoid them, argues Mozilla Developer Evangelist Christian Heilmann. Done responsibly and in keeping with the best practices of the web, the single-page app can be part of the future of the web, writes Heilmann.

Among the benefits of single-page apps are speed gains — stripping away the HTML means there’s very little to load initially and subsequent data loads can be done in very small increments, which makes for very fast apps. With the rise of web apps targeting mobile devices the speed advantages make single-page apps appealing to developers. Indeed, Heilmann believes “single page apps … are necessary for the web to be an apps platform.”

Naturally there will be problems with the rise of apps. “We have to battle two main issues,” writes Heilmann, “old conditioning of users and sloppy development for the sake of doing something ‘new’.”

In other words the danger isn’t the single-page concept itself, which, if done right, will yield an “app” that also has all the benefits of the web — deep linking, bookmarking, and indexing. It’s the latter problem Heilmann mentions, one that’s neatly satirized by sites like Hipstergrammers, that causes many developers concern: new just for the sake of new.

Heilmann’s post does a great job of cutting through the hype behind single page apps and presenting them for what they are — another tool with both positive and negative trade offs. Be sure to read through the whole article which offers a great list of potential problems and how to avoid them.