You can try out the application by visiting:
Because the app takes advantage of several advanced features of HTML5, it won’t work with Internet Explorer 6 (but really, you should stop using that browser). I have tested it with IE 8, Chrome 8, Firefox 3.6, and Safari 5.
Let me provide you with a brief walkthrough of the app. When you first open the application, you see the following lookup screen:
You can click the details link for any entry to view details for an entry in a modal dialog:
You can login to the application to make modification to the application:
After you login, you can add, update, or delete entries in the reference database:
HTML5 Local Storage
The application takes advantage of HTML5 local storage to store all of the reference entries on the local browser. IE 8, Chrome 8, Firefox 3.6, and Safari 5 all support local storage.
When you open the application for the first time, all of the reference entries are transferred to the browser. The data is stored persistently. Even if you shutdown your computer and return to the application many days later, the data does not need to be transferred again.
Whenever you open the application, the app checks with the server to see if any of the entries have been updated on the server. If there have been updates, then only the updates are transferred to the browser and the updates are merged with the existing entries in local storage. After the reference database has been transferred to your browser once, only changes are transferred in the future.
You get two benefits from using local storage. First, the application loads very fast and works very fast after the data has been loaded once. The application does not query the server whenever you filter or view entries. All of the data is persisted in the browser.
When using Google Chrome, you can easily view the contents of local storage by selecting Tools, Developer Tools (CTRL-SHIFT I) and selecting Storage, Local Storage:
HTML5 Offline App
When you first open the application with Firefox, you are presented with the following warning:
Automatic Script Minification and Combination
When you perform a build, the combine.js and combine.debug.js files are generated. The Combine.config file contains the list of files that should be combined (importantly, it specifies the order in which the files should be combined). Here’s the contents of the Combine.config file:
<?xml version="1.0"?> <combine> <scripts> <file path="compat.js" /> <file path="storage.js" /> <file path="serverData.js" /> <file path="entriesHelper.js" /> <file path="authentication.js" /> <file path="default.js" /> </scripts> </combine>
jQuery and jQuery UI
Each of the separate templates is stored in a separate ASP.NET user control in a folder named Templates:
The contents of the user controls (and therefore the templates) are combined in the default.aspx page:
<!-- Templates --> <user:EntryTemplate runat="server" /> <user:EntryDetailsTemplate runat="server" /> <user:BrowsersTemplate runat="server" /> <user:EditEntryTemplate runat="server" /> <user:EntryDetailsCloudTemplate runat="server" />
When the default.aspx page is requested, all of the templates are retrieved in a single page.
WCF Data Services
jQuery Ajax calls are made against the WCF Data Service to perform the database operations from the browser. The OData protocol makes this easy.
For example, here is the Selenium test that checks whether authenticating with a valid user name and password correctly switches the application to Admin Mode:
The results for running the Selenium tests appear in the Test Results window just like the unit tests:
The Selenium tests take much longer to execute than the unit tests. However, they provide test coverage for actual browsers. Furthermore, if you are using Visual Studio ALM, you can run the tests automatically every night as part of your standard nightly build.
You also can download the code from GitHub: