WebForms to SPA Modernization

With Single Page Application getting much attention now-a-days and is being treated as the next generation of web development. I wanted to get into that wagon. As of now there are two stable competitors providing SPA framework. They are Durandal and Angular. Both of them are popular and provide the necessary framework to build a SPA application.

I first tried to decide between Durandal and Angular for my development. In my analysis I felt that Durandal is a good fit for my situation. One of the primary reasons is that Durandal is a good fit for .NET development. Check my blog on this.

As my objective is not just to modernize this one WebForm app, but to actually onboard the SPA development. I cannot do this with just Durandal. I hence need to develop apps in both Durandal and Angular. As a startup I will use Durandal. Later I will get into Angular. I will blog on my learnings while modernizing my ancient web form application and also learning SPA.

Here are the blogs related to Web Form Modernization: (I will update this section continuously)

• Converting SQL Server Express 2008 mdf to LocalDB

JQuery UI MVC Extensions (Juime)

Juime (JQuery UI MVC Extensions) is an Imaginea’s open source MVC library which provides rich JQuery UI widgets without getting into the nitty-gritty details of javascript. Built on top of JQuery UI, it provides an easy but advanced themeable widgets that can be used to build rich interactive web applications that run on all major browsers. All this can be done without leaving the well-known MVC framework and without expert knowledge of JQuery.

Juime is a rapid application development utility which is aimed to improve developer productivity while building new generation web applications and reduce the need for learning of the JQuery UI & ajax. Further it can act as a quick jump start into the modern web application development. ASP.NET MVC developers feel home with this.

Juime was built on the following design principles to provide simple yet efficient developer experience:

• Abstract complex JQuery and JQuery UI scripts
• Lightweight as it has only dll and a minified javascript
• Follows the ASP.NET Web Forms & MVC object hierarchy so that it is easily consumed
• Cross browser support
• Ease of use
• Open source with community support

What is Single Page Application (SPA)

Long long back I read about Rich Internet Applications (RIA). As per the Wikipedia, RIA is a web application that has many characteristics of desktop application. RIA was to some extent achieved by using proprietary tools such as Silverlight, Flash, but this wasn’t truly achieved in Internet targeting larger audience. Up to now building a RIA using simple Html and JavaScript is a big pain and is not guaranteed to work on all browsers. Now-a-days the web technology has matured to certain extent that we can reliably develop RIA on Internet (cough..cough)

Single Page Application (SPA) is one of the recent tools that aids developers to bring RIA into reality for larger audience. It promises to provide better user experience and more closer look to the desktop applications which is what RIA’s goal is.

SPA by definition means one page application, in other words there will be only one page in the entire application or website. You can ask me, for any size application how this can be possible, how my entire site can has one page. Every site I have built or viewed has at least few pages and can spawn to several hundred pages. Then let me ask you this question, what does page mean to you?

As per definition a page is one which loads and unloads. If you count the number of pages loads and unloads in an application, then that application has that many pages. In SPA there will be only one page load and unload. If you observe gmail, yahoo mail or several other sites, there are no unloads and everything works on the same page.

This is paradigm shift of what you think of a page. Once we get a hang of this notation, SPA seems simpler. So in a SPA we load the page only once and all subsequent page changes or transitions are done through ajax or javascipt. As long the page structure (menus, footers, headers etc) does not change there is no need to change the page but we can change the page content through javascript.

Hence SPA is a single page application which shows different content based on the user needs without changing the base page or structure.

Two-way Data binding with Knockout

Two way data binding is a new concept for ASP.NET developers. Typically in web forms you might have bound to a GridView, DropDownList etc. This is one way binding. Once you bound the data to a control the data changes in the control are not reflected back to your source. For WPF or XAML developers two way data binding is a common concept. They embraced this binding from long time using the MVVM design pattern.

Knockout brought this two way MVVM data binding to the web. Knockout enables you bind your web controls in javascript. Once bound you can change the control values without DOM manipulation. Also the user changes are directly reflected in your model. In some situations Knockout also replaces you need for JQuery for DOM manipulation. Please note that this binding is done in javascript and is on the browser. ASP.NET MVC or Web Forms on the server side does not have the two way binding.

In this blog I will show a small example on how to do the two way data binding in javascript and manipulate the DOM and model objects.

As you see in the below screenshot there are two textboxes and a label. The label shows the full name entered in textboxes.

Whenever user changes any of the first name or last name textboxes the full name will automatically change. This is due to the magic of two way binding with Knockout.

Let’s see how to setup this two way binding.

First you need to download the latest version of Knockout. Which can be downloaded from its website

http://knockoutjs.com/downloads/index.html

Here is the code using the two way binding

<html>

<head>

    <title>Two-way Data binding with Knockout</title>

    <script src="Scripts/knockout-3.0.0.js"></script>

</head>

<body>

    <h2>Person</h2>

    First Name: <input type="text" data-bind="value: firstName" /><br />

    Last Name: <input type="text" data-bind="value: lastName" /><br />

    Full Name: <span data-bind="text: fullName"></span>

    <script>

        var person = function (first, last) {

            self = this;

            firstName = ko.observable(first);

            lastName = ko.observable(last);

            fullName = ko.computed(function () {

                return firstName() + " " + lastName();

            });

        }

        ko.applyBindings(new person("Prasanna", "Kumar"));

    </script>

</body>

</html>

Here are the salient points from the above code

• We first a ViewModel which stores the data. In the above example, person is the view model, with three properties, firstName, lastName and fullName. fullName is a computed field.

        var person = function (first, last) {

            self = this;

            firstName = ko.observable(first);

            lastName = ko.observable(last);

            fullName = ko.computed(function () {

                return firstName() + " " + lastName();

            });

        }

•  In the above view model, the properties are bound by using ko.observable & ko.computed
•  Once bound the properties should be accessed using ()

           return firstName()

•  The textbox and label can be binded by using the data-bind attribute

       Last Name: <input type="text" data-bind="value: lastName" />

Full Name: <span data-bind="text: fullName"></span>

•  Finally call the applyBindings to invoke the two way binding

              ko.applyBindings(new person("Prasanna", "Kumar"));

As you see Knockout made two-way binding very easy and with minimal syntax we were able to effectively do a two-way binding.