Developing metro apps (HTML & JS): My point of view

Last Friday I attended the first windows 8 developer day in Belgium. A great opportunity to learn a bit more about developing Metro apps. One of the demos given by Giorgio Sardo showed how easy a HTML 5 application could be copied and pasted into a Metro app without having to rework even a single line of code. At first sight this looks pretty amazing, but I got me thinking.
The first thing I noticed is the fact that the HTML 5 application was actually a game. That is one of the reasons it could be easily ported to a Metro app. If we would want to port a business app like an e-commerce site, that wouldn’t be so easy. One of the important issues when developing Metro apps is the design. The philosophy of Microsoft when designing an application is that all applications have a similar look & feel and should react on the same way.
Almost all websites are designed for a single resolution and that is in contrast with the Metro philosophy where all apps should optimize their viewport for every screen. This means you’ll have to redesign your application so it changes its content to fit to the screen. Also you should implement the capabilities to change the view depending on the position of your device (landscape or portrait mode) and the multitask options which allows you to run multiple applications side by side.
Next to the Metro design these Metro apps should at least have some specific windows 8 features like redefined search and sharing capabilities. It's only at this point you really start to take advantage of some of the new windows 8 features. But the most important thing you should implement is the live tile. This must engage the user to consume your application. You can do this by providing the user real-time information about your app.
A second consideration is the fact when you just copy and paste your web application, you don’t take advantage of all the possibilities present in WinRT. With WinRT you can make calls to the operating system. For example you can access the webcam, save a file to the file system; share data … Developing Metro apps with JavaScript also brings the WinJS namespace. In here we find the Promise object that enables an easy way for the developer to handle asynchronous calls. Because all calls that take more than 50ms are preformed asynchronous by default, this can come in handy when you are making WinRT calls.
After the theoretical part, it was time for the real work: an App-a-thon. Here we got the possibility to put all our theoretical knowledge into practice. Together with 4 RealDolmen colleagues (Maarten Balliauw, Xavier Decoster, Wesley Cabus and Angelo Trotta) we developed a metro Nuget Package Explorer. This allows the users to view NuGet repositories and their package details. All this information gets retrieved from the given feeds and gets stored in an IndexedDB for performance. The application is completely build in HTML5 and uses JavaScript for the logic.
Surprisingly, developing this application went pretty fast. I took some time to adjust to the fact your writing a client application with JavaScript, but all knowledge about JavaScript in the past, could be reused pretty easy. There was one thing we were struggling with. When working with the promises you have to be very careful to call objects in the UI-thread, otherwise you can get some strange exceptions.
Conclusion
After a whole day Windows 8, I really excited to start develop metro apps. Enabling developers to develop a metro app in HTML/JS was definitely a good choice Microsoft made. This way a whole new group of developers can start building Metro apps. But the business has to be aware that you can’t just copy and paste your web app in a Metro project and call it Metro app. Metro apps have a philosophy and that should be respected. Also it would be a shame if you wouldn’t take advantage of all the new features that Metro apps provide.
I’m looking forward to the next app-a-thon and hope that our team can come together again to win the contest this time. (Ended second last time.)
Currently I’m trying to port our Linq2IndexedDB project to use the WinJS promises instead of the jQuery promise. I hope to announce this feature in the near future.

JavaScript: Change entered character in keypress event

Recently I came across a problem with a numeric input field. For globalization issues a decimal had to be separated by a comma instead of a dot. So there were 2 solutions in this case. I could prevent users from typing in the dot, or I could replace the dot by a comma when typed. I went for the second one, because on the numeric keypad you only have a dot. So this way it would be easier for the users to input the decimal. It also works the same as applications like Excel who change the dot to a comma to if your regional settings are set that way.

At first sight this looked like an easy chore. In most cases the keypress or keydown event gets handled and the keyCode of the dot gets blocked. Instead the comma is added at the end of the current value of the input field.

   1: // All decimal input fields have a class named 'number'

   2: $('input.number').each(function (){

   3:     $(this).keypress(function(e){

   4:         // '46' is the keyCode for '.'

   5:         if(e.keyCode == '46' || e.charCode == '46'){ 

   6:             //Cancel the keypress

   7:             e.preventDefault(); 

   8:             // Add the comma to the value of the input field

   9:             $(this).val($this.val() + ',');

  10:         }

  11:     });

  12: });

  13:  

In most cases this will do, but when users start editing the decimal, troubles arrive. When the user types a dot inside the number, the comma will be added at the end of the number. But this isn’t what the user wants. He wants to have the comma placed on the location where he type the dot. After some googling, I found the following solution:

   1: // All decimal input fields have a class named 'number'

   2: $('input.number').each(function () {

   3:     $(this).keypress(function(e){

   4:         // '46' is the keyCode for '.'

   5:         if(e.keyCode == '46' || e.charCode == '46'){

   6:           // IE

   7:           if(document.selection){

   8:                 // Determines the selected text. If no text selected,

   9:                 // the location of the cursor in the text is returned

  10:                 var range = document.selection.createRange();

  11:                 // Place the comma on the location of the selection,

  12:                 // and remove the data in the selection

  13:                 range.text = ',';

  14:           // Chrome + FF

  15:           }else if(this.selectionStart || this.selectionStart == '0'){

  16:                 // Determines the start and end of the selection.

  17:                 // If no text selected, they are the same and

  18:                 // the location of the cursor in the text is returned

  19:                 // Don't make it a jQuery obj, because selectionStart 

  20:                 // and selectionEnd isn't known.

  21:                 var start = this.selectionStart;

  22:                 var end = this.selectionEnd;

  23:                 // Place the comma on the location of the selection,

  24:                 // and remove the data in the selection

  25:                 $(this).val($(this).val().substring(0, start) + ','

  26:                  + $(this).val().substring(end, $(this).val().length));

  27:                 // Set the cursor back at the correct location in 

  28:                 // the text

  29:                 this.selectionStart = start + 1;

  30:                 this.selectionEnd = start +1;

  31:             }else{

  32:                 // if no selection could be determined, 

  33:                 // place the comma at the end.

  34:                 $(this).val($(this).val() + ',');             

  35:             }

  36:             return false;

  37:         }

  38:     });

  39: });

What we do is use the provided functionalities in the browsers for detecting selections in an input field. If no text is selected, the range will return the location of the cursor inside the input field. This way we can provide the correct implementation. So even when text is selected and the dot key is pressed, the selected text will be replaced by the comma.

LINQ to Indexed DB

Since I started experimenting with the Indexed DB API, I have been searching for a simple way to add, retrieve, change, … data. In the beginning I wrote a little framework that provided some methods to retrieve, add, … data without having to think how to setup a connection. For experimenting this was enough, but when I started to build some demo apps, I noticed a needed a more generic way to do my CRUD operations.

So I start searching the internet for frameworks around the Indexed DB API’s. One project I found very interesting. It was the one of nparashuram. He was started with a Linq 2 Indexed DB Framework. Everything was still very basic, but it was well structured. Also it was only compatible with Firefox and Chrome, but not with the IE prototype and IE 10. So I contacted nparashuram and we decided to keep working on it together.

The framework is based on promises. This way we can easily handle the async calls which the Indexed DB API uses. We also use it as return value of the query you make. This way you can easily decide whether you want to use the complete method or the on progress method when retrieving multiple records. Also I believe this will be a programming model which we will see more and more in the future. Certainly if we want responsive applications.

The framework takes away the complexity of opening a database, creating transactions, … the only thing you need to worry about is how to structure your database and how to query. It also provides a way of creating the database structure while querying. This way you don’t have to create object stores or define the structure. Just inserting data to an object store, the object store will be created if not present.

The code of the framework can be found on codeplex and works as an extension on the jQuery framework. If you have some feature request you can add them here. Or you can contact me if you have some questions about it.

Keep following my blog or codeplex for new features and samples on this framework.

Web worker: running js tasks in the background

Since JavaScript is more and more used for building applications, rather than providing extra features, you need to take care you don’t freeze the UI. This is one of the reasons why the W3C introduced the web worker API. This API provides a way to run JavaScript in a thread different form the UI thread. This way long running code such as sorting large array’s, won’t freeze the the UI or make your application unresponsive. Generally, workers are expected to be long-lived, have a high startup performance cost and a high per-instance memory cost.

workers

When we want to run code in a thread different from the UI thread, then we need to put this code in separate file. This file, will then be called by the worker to run in another thread. The only thing you need to do in the in the code that will run in another thread is calling postMessage method whenever you want to send data to the UI-thread.

Continuous worker

This code will start running when ever a worker with that file is instantiated and will continue running.

Example of a file (prime.js) to run in the background:

   1: var n = 1;

   2: prime: while(true){

   3:     n += 1;

   4:     for (var i = 2; i <= Math.sqrt(n); i += 1){

   5:         if (n % i == 0){

   6:             continue prime;

   7:         }

   8:     }

   9:     // Found prime

  10:     postMessage(n)

  11: }

This code will send a message to the UI thread every time a prime is found.

   1: // Starts a new worker

   2: var worker = new Worker('prime.js');

   3: worker.onmessage = function (event){

   4:     // event.data contains a prime

   5:     document.getElementById("result").textContent = event.data

   6: }

The code above is used to create a new worker. The worker will execute the code in the prime.js file in a thread separate from the UI. In our case, the code will start calculating which numbers are primes.

The onmessage event on the worker gets triggered every time the postMessage method is called inside the worker thread. This way we can display the prime on the screen.

dedicated Worker

This worker will only start executing when you call the postMessage method on the worker.

Example of a file (sort.js) to run in the background:

   1: onmessage = function (event) {

   2:     var data = event.data.data;

   3:     var propertyName = event.data.propertyName;

   4:     var sortedData = data.sort(JSONComparer(propertyName).sort);

   5:     postMessage(sortedData);

   6:     return;

   7: };

   8:  

   9: function JSONComparer(propertyName) {

  10:     return {

  11:         sort: function (valueX, valueY) {

  12:                 return ((valueX[propertyName] == valueY[propertyName]) 

  13:                         ? 0 : ((valueX[propertyName] > valueY[propertyName]) ? 1 : -1));

  14:         }

  15:     }

  16: }

The onmessage method will handle a postMessage send to the worker. This will start the work you want to execute. In this case the code will sort an array of JSON objects on a given property. When the array and the propertyName is provided as data in the postMessage method, The data will get sorted on the property with the given propertyName. When the sort is completed, the sorted array will be send to the UI.

   1: var worker = new Worker("sort.js");

   2: var data = [{ name: "test2" }, [{ name: "test4" }, [{ name: "test1" }, [{ name: "test3" }]

   3: worker.onmessage = function (event) { /* event.data contains the sorted Array */) };

   4: worker.postMessage({ data: data, propertyName: "name"});

With the postMessage method we can provide the data that is needed to sort an array. When the sorting is completed and the postMessage method in the background thread is called, the onmessage function will be triggered in the UI thread so we can process the sorted array.

More information about workers can be found here.

Indexed DB: To provide a key or not to provide a key

I am currently busy writing a little framework around the Indexed DB API to make it easier to use Indexed DB. One of the things I was struggling with was when the key parameter must or mustn’t be provided. So I tested every possible combinations.

For this I created 4 object stores with different combinations:

• Object store 1: KeyPath: “Id”, autoIncrement = true
• Object store 2: KeyPath: undefined, autoIncrement = true
• Object store 3: KeyPath: “Id”, autoIncrement = false
• Object store 4: KeyPath: undefined, autoIncrement = false

Next, I tried adding four different combinations, and here are the results.

Add/Put parameters		Object store configuration
Value	Key	Object store 1	Object store 2	Object store 3	Object store 4
{ Name: "test" }	undefined	successful	successful	failed	failed
{ Id: 1, Name: "test" }	undefined	successful	successful	successful	failed
{ Name: "test" }	1	failed	successful	failed	successful
{ Id: 1, Name: "test" }	1	failed	successful	failed	successful

 

Conclusion

1. When a KeyPath is defined, the key parameter must be undefined
2. When no KeyPath is defined and there is no autoIncrement, a key must be provided
3. When no KeyPath is defined and there is autoIncrement, a key can be provided
4. When a KeyPath is defined and there is no autoIncrement, an attribute with the name of the KeyPath must be present.

Indexed DB: Defining your structure, the new way

Some months ago I posted a blog post about defining your database structure. Because Indexed DB is still in draft, specifications can change from time to time. This is the case for the way you want to define your database structure. As I am typing now the only browser that is currently implementing this new specification is FireFox Nightly.
The way you create object stores and indexes hasn’t changed, but the way you can change it did. Changing your database structure still happens in a VERSION_CHANGE transaction, but the developer won’t be able to manually create a new VERSION_CHANGE transaction. Instead, the version of database you want to use needs to be provided when opening a database connection. When the database doesn’t have the version you requested, an onupgradeneeded event will occur. In this event you will be able to handle all your database changes like creating and deleting objectstores, creating and deleting indexes, …
But this all means that the SetVersion method for creating a VERSION_CHANGE transaction will become obsolete. So this means you will always have to define your database structure before you can start using them, even for indexes.
So how does this new way look like?

   1: var req = window.indexedDB.open(databaseName, databaseVersion);

   2: req.onsuccess = function (e) {

   3:     // Opening of the databas in the given version was succesfull

   4: }

   5:  

   6: req.onerror = function (e) {

   7:     // Error while opening the database

   8: }

   9:  

  10: req.onupgradeneeded = function (e){

  11:     // Event for handeling the database structure changes

  12: }

  13:  

  14: req.onblocked = function (e){

  15:     // Handles the database open request while the database gets upgraded

  16: }

The onblocked event was also added with the onupgradeneeded event. The onblock event will handle attempts to open the database while the database is upgrading to a more recent version. This way you can notify the user the request was blocked and they need to retry later.

As last there is an onversionchange event added on the databse object. This event will be called when the database is about to upgraded to a newer version. This way you’ll be able to close your current connection so you don’t get an error later on.

   1: var req = window.indexedDB.open(databaseName, databaseVersion);

   2:  

   3: req.onsuccess = function (e) {

   4:     req.result.onversionchange = function(){

   5:         // Close your connection

   6:     }  

   7: }

Offline Application Caching: Make your web application offline available

In my previous post I have been talking about IndexedDB, an in-browser database. This means, once we can persist data on the client, it’s possible to make our web application offline available. For this we have the offline application caching API.

When we want to take our application offline, the first thing we need to do is creating a manifest file. The main function of this file is describing which files have to be offline available. These files will be downloaded when the users visits the web application for the first time. Also when the manifest file has been changed since the last visit, these files will be downloaded again.

Manifest file

The beginning of the manifest file is always the same:

CACHE MANIFEST

Below this it’s recommended to place a comment with some kind of version number/date. This is necessary when you want to force the browser to download the files again because you changed one or more files. This is because browsers will only update their application cache when the manifest file is changed and not if one of the resources described in the file change. This means whenever you change a file described in the manifest file, you should update the version number in a comment.

# v3 2012-01-11

Now we have three parts in the manifest file. The first one is the explicit section. This means all files that are described in this section will be downloaded. This is also the default section, so it isn’t necessary to provide the ‘CACHE:’ title explicitly. Note that the colon after the title of the section is required. In the explicit section all kinds of files are allowed, for example: html files, images, js files, … Every resource you want to describe, takes one line.

CACHE:
/Detault.htm
/Scripts/jquery-1.7.1.min.js
/Css/ui-lightness/jquery-ui-1.8.16.custom.css
/Css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png

The next part of the manifest file will describe which files should never be cached. This is the case for pages who relay on code that is executed on the server. For example a logon page. In this section you can use the “*” character as wildcard.That’s a fancy way of saying that anything that isn’t in the appcache can still be downloaded from the original web address, as long as you have an internet connection. This also means all resources on the webpage will be cached, even if they are hosted on an other domain.

The wildcard is important if we want to provide an “open-ended” offline web application. This is common for large web applications, whom we want to make offline available such as Wikipedia.

NETWORK:
/Logon.apsx
/Secure
*

The last part of the file will describe the fallback mechanisms. If you are working offline, and you request a resources that isn’t offline available, the configured resources will be shown.

FALLBACK:
/ /HTML/Offline.htm

Offline available webpages

All webpages we want to use offline need the manifest attribute with a reference to the manifest file. This way the browser knows where he can locate the file describing the offline resources.

<html manifest="/cache.manifest">

It doesn’t matter where the manifest file is located on the server. The only thing you need is the correct path to it. There are 2 extensions that are commonly used for the manifest file. These are “.manifest” and “.appcache”. It doesn’t matter which one you use, as long as the extensions are recognized by your webserver. In IIS 7.0 or higher the a MIME-type for .manifest exists.

If u are using an Apache webserver, you can use the AddType directive in your side-wide httpd.conf by adding the following lines:

AddType text/cache-manifest .appcache "access plus 0 seconds"
AddType text/cache-manifest .manifest "access plus 0 seconds"

To avoid the risk of caching the manifest files, it is a good idea to set expires headers on your web server for manifest files so they expire immediately. In Apache you can configure this as follows:

ExpiresByType text/cache-manifest "access plus 0 seconds"

For IIS 6.0 you can find the explanation here.

Application cache events

The offline application cache API is also provided with some events:

Event	Description
Checking	Fires when the browsers notices a manifest attribute in the html tag, even in case you already visited the page
Downloading	Fires if the browser starts downloading the files described in the manifest file
Progress	Fires periodically while downloading.Contains information about the number of files that have been downloaded and the number of files that are still queued
Cached	Fires when all the files in the manifest file are downloaded. The web app is now fully cached and ready to use offline. This is only the case if it’s the first time data from the manifest file is downloaded.
Noupdate	Fires if you visit an offline-enabled page and the manifest file hasn’t changed.
Updateready	Fires when downloading of the files described in the manifest file was successful. The new version web app is now fully cache. This is the case if the data from the manifest file has ever been downloaded in the past.
Error	Fires when ever something goes wrong. Possible causes: - HTTP error 404 (Page not found) - HTTP error 410 (Permanently Gone) - Page failed to download properly - Manifest file changed while updating - Browser failed to download one of the resources listed in the manifest file
Obsolete	The manifest was not found. Possible causes: - HTTP error 404 (Page not found) - HTTP error 410 (Permanently Gone) This means the application cache has been deleted.

It’s a best practice to call the window.applicationCache.SwapCache() method when the Updateready event is fired. This forces the browser to switch to the most recent application cache. If you forget to do this, the user needs to reload the webpage in order to take advantage of the new version.

Browser State

In the window object we have an interface “NavigatorOnline” which provides us information about the state of the browser. If the attribute “onLine” is false, we can be sure the browser is definitely offline. In case the attribute is true, the browser might be online, but that isn’t for sure.

window.navigator.onLine

There are also 2 events. The online and offline event that are fired when the browser either goes online or offline. You can attach the events on the following ways:

• using the addEventListener on the window, document or document.body
• Setting the .ononline or .onoffline properties on document or document.body to a JS function. (For some reason the window.ononline and window.onoffline will not work)
• By specifying the ononline or onoffline attributes on the <body> element in the HTML.

Note when using the first 2 solutions, you can only attach the events after the page load event.