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:
THanks for this post. Maybe another interesting source for you could be HTML5 Boilerplate framework that also contains a web.config for ASP.net.
@Rene – Thanks for the link! Yes, the HTML5 Boilerplate is a great starting point.
This looks very cool! You show a screenshot of logging in but when I tried to do it, I don’t have an account and it seems that there isn’t anywhere to create one. Can you comment accordingly? Thanks
Stephen, you rock for always sharing your knowledge like this – THANK YOU! I’ve got
One thing I noticed – it seems you need to give it quite some time to download the data before a search can be performed. I was stuck with my query wondering what button I needed to push – tried ‘enter’ too. A loading animation of some sort or a notice to the user could be helpful, in my opinion.
Just nitpicking though. I’ve downloaded the project and look forward to learning from it – thanks again!
Actually, I just tried it again in another browser and it was lightning quick. Was probably just a slow connection from here.
Stephen, this post is very useful, and i tried it live and it is amazing how fast the application runs even here in Togo (Africa) where our connection speed is 512 kb/s.
I just wondering how the security of such an application is performed. Since the data is loaded in the client browser, this application will not have security vulnerabilities. If there can be security holes how can we fix them?
nice stuff , want to know more info about language
hey ,great work.much appreciated for your efforts to write down such useful content for us
Abercrombie & Fitch Tees
A&F Tees T-shirt Women
A&F Classic Shirts Men
A&F Men Jeans
A&F Long sleeve POLOS
A&F Long Sleeve Tees Mens
A&F Men Outerwear
A&F Men Hoodies
A&F Wonen Hoodies
Bags Shoes <br />
Gucci Bookbags<br />
Cheap Gucci <br />
Wholesale Gucci <br />
Cheap Gucci Bags <br />
D&G Jeans <br />
Jeans Clothing <br />
Cheap Jeans Clothing <br />
Cheap Nike Shoes <br />
Nike Men’s Shoes<br />
Cheap Gucci Shoes <br />