Friday, June 6, 2014

Developing Web applications using structured HTML diffs

The current trend in Web development is toward single-page applications, whose prevailing architecture I described in an earlier post. However, a lot of the functionality of modern webapps is conceptually pretty simple, and it's easy to imagine that the Web could have supported such applications from the start, with just one small architectural tweak to HTML.

What if clicking on a hyperlink didn't navigate to a new page by default, but instead loaded a set of changes from the server in some structured text format, like "append such-and-such HTML to the element with such-and-such ID", and applied these changes to the HTML of the current page? A subset of that functionality has always been possible with IFrames, where clicking a link would reload a separate region of the page. But in full generality, it seems to me that such an "HTML diff" protocol could be simple enough and general enough to support many use cases of current web apps.

For example, such functions as adding a product to a shopping cart, or switching from logged-out to logged-in state, or loading an additional set of blog posts at the bottom of the page, can all be expressed as HTML diffs that leave most of the page intact, and only add/delete/update the contents of specific elements. With built-in browser support for HTML diffs, many Web applications could be implemented without using JavaScript at all, using only plain hyperlinks, and everyone would be able to use their favorite server-side languages to generate the diffs on demand.

Another nice feature is that HTML diffs would work together well with CSS transitions, which can play a smooth animation whenever an element's contents change, without the need for JavaScript. For example, clicking a hyperlink on the page could smoothly expand a list of items, by loading its contents from the server and applying a diff to the current page.

To increase responsiveness, we could use ordinary HTTP caching to prefetch and cache certain diffs. In fact, some of the diffs could even be static files on the Web host, so you can implement some dynamic-looking features without any client-side or server-side coding at all! I don't expect that to be very useful, but it's certainly a nice feature to have.

Overall I'm not convinced that the approach can remove all uses of client-side scripting, because it wouldn't be able to support very interactive applications like Google Maps. But at least it might help reduce the complexity of some business webapps, by removing the need for huge stateful client-side frameworks like Angular or Ember. Also surprisingly, I haven't been able to find any previous descriptions of this idea, though I'm sure someone must have come up with it before.

No comments:

Post a Comment