Search code examples
javascriptweb-applicationsdecoupling

What is the best practice to decouple GUI design from server-side development when developing modern web applications?

We are currently developing a few web applications and are letting our designers convert signed off paper prototypes into static web pages. In addition to having hyperlinks between pages the designers have started adding jquery calls to update elements on the pages by fetching data from static json files. Once the designers are finished and handoff the completed web pages, CSS, and JavaScript files; the server-side developers then edit the pages and replace the references to the local static json documents with references to live json urls that return the same json data structures.

My question: What are efficient ways to decouple GUI design from serverside dev and reduce the integration time and effort? Some examples:

  • Do you have the developers manually change every json reference in the designers' prototype web pages?
  • Do you add a global variable somewhere to enable the designers' pages to be easily switched back and forth between using static and dynamic data?
  • Do you make the web pages self-aware of when they are running from a web server or just being served from a folder somewhere?
Solution

  • It depends on how much state information does your application need to manage. The examples you have given mention only read operations from the server. Are there any writes? Both read and write operations can potentially fail. Do your designers take care of those cases, or the server-side team jumps in and patches up the GUI later on?

    I think it's best to provide a mock server-side implementation of your services for the designers. The server mock could simulate real life behavior as in throw errors and exceptions beyond just the happy path. It really is much less of a hassle to install a simple web server nowadays and a single script that acts as a mock service, rather than trying to create processes for later integration.