Building a Rich Internet Application with HTML5, CSS3, Javascript and KnockoutJS

Are you migrating from Silverlight to HTML5? After reading this article, you will know how to re-use some silverlight techniques on the web

This Article is part of a three-part series:

Part 1: Creating a project backbone with support for navigation between pages

Introduction

I spent the last two years building Silverlight and Windows Phone applications. Before that I created ASP.NET websites and web applications. It’s safe to say I have seen a lot of applications and enjoyed creating almost all of them. In my opinion using server side techniques to create HTML and serve it to the browser was the best option until a few years ago. This has all to do with the horrible cross browser compatibility of the nineties and zero’s.

Silverlight was great in the way that it had one plugin for many browsers. Almost everything worked across browsers and OSses. After ten years of working mainly server side it was also an eye opener for me how powerful asynchronous rich internet applications in the browser are. So when Microsoft sidetracked Silverlight, I started looking for alternatives. Only to find my first love back: HTML and CSS! And it turned out the retarded cousin Javascript also made great progress. Not the language itself –which was always great– but how people use it.

Our goal here

I’m going to show you a way to create rich internet applications with HTML5, CSS3 and Javascript. We will use two libraries (KnockoutJS and jQuery) and what we build will work in recent versions of Chrome and Firefox. Silverlight developers will learn how to translate their knowledge about the navigation framework, animation, MVVM and databinding to HTML5. This is what the app will roughly look like:

office space

I prepared a project with the minimum required stuff for you to download as a starting point.

Fire up your favorite IDE and open the project. You should see something like this:

ide

I created a few empty folders to host our models, viewmodels and helper code. I used this structure in Silverlight and found it to be very convenient.

Run the project in a web server on your machine and this it what you should see:

pages

If you click the buttons nothing happens yet. Lets fix that! We need a place to store viewmodels and navigation info. Let’s add an application class to the project.

app = {};

app.initialize = function () {
}

And include it in index.html:

<script type="text/javascript" src="Lib/jquery-1.7.2.min.js"></script><script type="text/javascript" src="Lib/knockout-2.1.0.js"></script>
<script type="text/javascript" src="app.js"></script>
var Navigation = function (startupView) {
  var self = this;
  this.navigate = function navigate(view) {
    self.loadView(view);
  }

  this.loadView = function (view) {
    var contentframe = $("#content");
    contentframe.load("Views/" + view + ".html", function () {
    });
  }

  this.loadView(startupView);
}

We use the jQuery load method to load HTML and inject it in the #content div. This method only works if you run in a webserver. Your address bar should start with http://, not file://. Include Navigation.js in index.html:

<script type="text/javascript" src="Lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Lib/knockout-2.1.0.js"></script><script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="helpers/navigation.js"></script>
<script type="text/javascript">
app.navigation = new Navigation("customers");
</script>

This creates a new navigation object and passes a default view. To prevent the Navigation class to be instantiated in a global variable, we create it in our application object (app)

Time to test! Run the project and you should see something like this:

result

If that works, let’s add event handlers to the buttons to navigate. Find the buttons in index.html and add the handlers:

<button onclick="app.navigation.navigate(&quot;customers&quot;);">Customers</button>
<button onclick="app.navigation.navigate(&quot;invoices&quot;);">Invoices</button>

You should be able to navigate between the customer and invoices views by clicking the buttons.

And that’s part 1 of this tutorial. In the next part we will add support for history and deeplinking