Several years ago, I designed and developed an application whose scope was far greater than the business folks imagined. Therefore, the timeline was far more compressed than I would have liked.

I cut a lot of corners in that project in order to get it out in time, but there was only one hack that has haunted me since I reluctantly pushed it into production: I returned a large HTML string from an AJAX call and inserted it directly into the DOM.

It was far easier, at the time, to simply loop through the highly complex query structures in my class and build the HTML structure there rather than build a JSON string and use a JavaScript parsing class to build the HTML on the browser.

Well, in a little twist of fate, there was an update scheduled for this application; and this time I had some extra time as the release date got pushed back a couple of weeks. Using that to my advantage, I finally was able to fine-tune that entire mechanism, including:

  • Passing a vastly more compressed JSON string back to the interaction layer.
  • Using a new HTMLRender class in JavaScript to parse the JSON, and then build and insert the HTML into the DOM.
  • Reduced the number of hits on the database by retrieving all information in one, massive query instead of dozens of smaller ones.
  • Increased the usage of Sencha ExtJS in the layout to make it more attractive.

    • All in all, this particular section of the application now executes about 70% faster, is less resource intensive on the database, and is easier to use.

    It’s a big monkey off my back. Not to mention that I always enjoy going back to code from previous projects and seeing how I can improve upon it since I’m always learning new tricks.