Mischiefblog
I make apps for other people

The Delightful web application pattern

Posted by Chris Jones
On September 22nd, 2011 at 16:39

Permalink | Trackback | Links In |

Comments Off on The Delightful web application pattern
Posted in General

Delightful, the Dynamic, Lightweight, RESTful web application pattern places rendering into the browser with Dynamic HTML (DHTML) and decouples display and application logic. The browser is responsible for laying out and rendering the application page, and fetches content from a REST service back end via JSON over AJAX. The REST service exposes the page content as URIs (essentially documents) and supports the full stable of HTTP actions.



You’ve seen parts of this pattern used elsewhere with DHTML and AJAX web pages. I just haven’t seen it named anyplace.

REST
REST isn’t essential to the pattern; it would work with other message types (XML-RPC, SOAP, etc.). REST, however, has distinct advantages:

  • Resource orientation (bookmarkable, native URI referencing, documents from a server)
  • Takes advantage of existing HTTP authentication schemes (Basic, Digest, OAuth 2.0)
  • Easy to test the service
  • Very easy to mock the service for UI testing

Dynamic HTML
Conventional web applications render the web content on the server side and depend on having a browser to interact with the user. With little change in this pattern, we’ve been pushing the rendering load to the server since 1993 and developing what are in essence single-platform apps.

Modern browsers are far more capable than their ancestors two decades ago and can easily handle dynamic rendering of page content. In 2010, the Gartner Group predicted mobile browsers would overtake PC-based browsers by 2013 and will be the primary browser by 2015. Given that a conventional web application requires a different front-end to be coded, compiled, and deployed for each platform (mobile, tablet, PC), moving rendering to libraries specific to the platform begins to make more sense.

Major companies recognize the advantages of HTML 5, JavaScript libraries, and ubiquitous web access. By developing apps today using these standards, we can be well-positioned for whatever kind of browsing is to be used in the future. Proprietary extensions and plug-ins looks to be on the way out.

As an aside, my phone has a faster, more powerful processor than any PC I owned until 2003.

Relieving web development pain
Delightful alleviates several pain points when developing web applications:

  • Rich Faces hides JavaScript – in Delightful, the JavaScript is available
  • Deployment – deploy the static content and service separately or bundled, Delightful separates your service and client changes so they aren’t tightly bound
  • Applying the designer’s vision – the page can be created by your designer and the JavaScript inserted via script tags, mock content can be cleared through DOM manipulation
  • Testing and automation – while nothing makes Selenium better when you change DOM IDs, Delightful application layers can be separately tested and support unit testing and mocking

Decoupled
Applications built using the Delightful pattern don’t care what implements the REST service or even what kind of front-end ultimately consumes the data. I wrote a WSGI service in Python for a Delightful hands-on workshop, but could have just as easily done it using Jersey or Node.js. The web application didn’t care because the service implemented REST.

The front-end can likewise be anything that communicates with servers via REST and accepts JSON content: web applications, mobile apps, PC applications, or other services.

Why JSON?
JavaScript Object Notation is lighter-weight than XML, easier to navigate, standardized, and available in major languages. It natively supports types like lists and maps and allows for the arbitrary definition of object properties. JSON is compact and very fast to interpret. Check out my Amazon Hack Day 2009 project for an example of a big dataset loaded and dynamically filtered via JSON.

Using a backing database like Mongo with JSON can be a huge win in a Delightful application.

AJAX
Asynchronous HTTP requests to the server can be used to speed up the page’s time to glass. A properly constructed page will render before the content is available, giving very fast apparent feedback to the user.

Why Delightful?
I like the name and it is almost an acronym. It really is a delight to develop web applications using this model and I was able to walk into my presentation and workshop with confidence that it works. Delightful applications work well on my tablet, phone, and PC with no recompile, redeploy, or special effort required.

Comments are closed.