Progressive Enhancement vs. Single Page Apps – A Comparison

angularjsdesign-patternshtmlprogramming practices

I just got back from a conference in Boston called An Event Apart.

A really popular theme amongst the speakers was the idea of progressive enhancement – a site's content should go in the HTML, and JavaScript should only be used to enhance behavior.

The arguments that the speakers gave for progressive enhancement were very compelling. Not only is it a solid pattern for supporting older browsers, and devices on a network with low bandwidth, but HTML fails much more gracefully than JavaScript (i.e. markup that is not supported is just ignored, while if a browser throws an exception while executing your script – you are hosed).

Jeremy Keith gave a particularly insightful talk about this.

But what about single page web apps like Backbone and Angular? The whole design behind these frameworks seems to push the developer toward moving content out of the HTML, and into something like a JSON API.

I can not seem to gel these two design patterns: progressive enhancement vs. single page web apps. Are there instances when one is better than the other? Or are they not even antagonistic technologies, and I am missing something here with my mental model?

Best Answer

It seems to me that single-page apps draw a line in the sand of progressive enhancement. Where before we might try to work around the fact that implementations and features vary between browsers going back for decades, SPAs assume that there's a certain baseline that we can reasonably agree most visitors of a given site will meet. I don't think the two are at odds. You can still continue to progressively enhance after the SPA starts, like starting with a <video> tag, then layering your own feature-rich player on top of that.

Then there are visitors with scripting disabled, but they know what they're getting into. I don't see why developers should bend over backwards for those visitors, aside from a "You need scripting for this site" note. If we allow that, why not also cater to visitors with CSS disabled? How about images disabled? These are core web technologies. They should not expect to have a fully functional web experience when they go picking and choosing pieces.

To ensure I don't get away without a car analogy, I should not expect my car to work if I decide I don't like certain features. I could tell civil engineers, "I disabled my headlights, so please make sure to install street lights every 125 feet everywhere I might visit." Without headlights, my car would work a lot of the time, but some places I'll be unable to visit.

Related Topic