Monday, October 28, 2013

Application Components

It's been a busy year with our little girl, Addison, getting the house ready to put on the market and work projects.  Lo and behold, almost a year since my last blog.
This entry, more of an entry for me than anything else, is a record of components used for my last web application.  The application is a single page application used for searching call data records that have been imported from an archive of voice recordings and accompanying CDRs.
The components used in this project are :

For this project, the client has elected to deploy on IIS in a Windows Server 2008 R2 machine, but I had it running with Apache 2.4.6 in my dev environment, and trialed Microsoft WebMatrix for attempting to deploy a PHP project to my local IIS installation.  Unfortunately, WebMatrix won't deploy to localhost, and I couldn't get it to deploy to the named instanced via a specific IP address.  That's too bad, because I normally have no issues deploying C# projects via Web Deploy to my local IIS installation.  But I could run the site directly, using IIS Express, so at least I could test the URL Rewrite rules in IIS.
I decided to go with SQLite, because there are only two tables in the application, and I didn't want to have to set up MySQL or something heavier on the production machine.  The only downside with SQLite is finding a client GUI.  There were instructions for setting up Eclipse with a JDBC driver or a plugin, but the plugin was no longer in active development, and seemed to be served for end user Dropbox stores, and the JDBC drivers were old, and required JNI and compilation.  In the end, I used a Firefox addon for viewing and manipulating the database.
I did have goals of integrating jQuery Mobile, but there was a conflict with the Timepicker addon.  JQM and JQUI both have slider components that occupy the same namespace.  Unfortunately, they both work slightly different as well.  the JQUI slide providers a generic slider widget, where are the JQM slider gets applied to an input text field, and then provides a widget beside that input box. I was getting too much benefit from the Timepicker addon to dump it in favour of JQM, which doesn't offer a native integrated date and time picker.  According to the jQuery UI Road map, there will be integration of the jQuery UI slider with jQuery Mobile in jQuery UI 1.12.
Ever keen to find minimize the number of components used in a project, I also had a look around for a jQuery UI native grid. In Feb 2011, the jQuery UI Team announced they would be working on a Grid component for jQuery UI. In Oct 2011, there was another post, with the update to what was happening.  This post announced that the road map would see the grid released with jQuery UI 2.1.  jQuery UI 2.1 isn't actually on the roadmap yet, but I'm going to hazard a guess that it's going to be another 2 or 3 years at least, before it sees the light of day.  This is based on the development of the jQuery UI Selectmenu component that has been in development at least since Feb 2010, and will be getting released with jQuery UI 1.11 (currently in beta).  
In the meantime, I would need to use something else.  Since I has elected to go with jQuery, it only makes sense that I stick to something jQuery based.  I've already been bitten by using the Dojo Enhanced Grid (experimental) in Dojo 1.7.4, only to have it dropped, and the prospect of having to upgrade to 1.8 was too scary to contemplate. Especially when the newer Grid component did not support all the functionality that the Enhanced Grid did (looking at you, multi-row per entry feature).  
I've decided to try DataTables.  So far, so good.  Because it's being used to display search results, rather than a report, I'm electing to count the total rows in a search, but only return the first 500, and suggest to the user that they refine their search.  This way, I get to make use of the client side search and sorting capabilities, without having to implement ajax calls for dynamic loading.
The application has only been written for a desktop browser, but it would be nice to provide optimizations for tablet and mobile support.  This would require a little more investigation into the Unsemantic CSS Framework, and it's responsive design capabilities, and the prospect of having reflow for DataTables (for mobile views). I have a feeling that the later may have to wait until sliders are no longer an issue, and to see if DataTables and JQM reflow tables can play nicely, or waiting for the JQUI Grid, that might have JQM reflow features when it gets released.
One of the features for the application was to download the archived audio file associated with a search result.  This audio file is stored in the original TAR file that was indexed.  To be able to download it nicely, within the context of the CakePHP framework, I had to use PharData to extract the audio file from the TAR, and pass it to CakeResponse::file().  I also want to perform some sort of file clean up for the extract file, but this could not be done on a case by cases basis by the same process that served the file. I had one suggestion from a forum to detect when the download was completed, and fire an Ajax call on complete to delete the file.  Giving the an API to delete files like this (even if it was obfuscated via an id), didn't sit well with me.  Mostly because relying on the client to do issue a command to do cleanup on the server was too much of a gamble.  So I elected to have a serving process delete all extracted files that were older than a certain time.  My starting age date is 5 minutes, though this could probably some down to 3 minutes or less, given that it shouldn't take more than that to download the audio files on a local network.
I hope there was some interesting information in there.  I'll be looking forward to the development, and documentation of my next application, to see the progression of web application components used.