RJV 's Blog

Sunday, 24 August 2014

KnockoutJS and AutoPostBack="true" - I

I had to check this out. What could be the difference if the developer were to use KO and not ASP.Net?

The only difference is the programming language of use - C# or jQuery / Javascript.

The resultant output is this below

No button click event just the AutoPostBack property of the drop down list set to true.

I will first share the ASP.Net code and then dwell into the equivalent KO code.

You need JSon.Net installed and referenced to the project, an app_id to consume the JSon data resultset from openexchangerates.org, VS 2012 for web and you are good to go.

The HTML source of the .aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetExchangeRates.aspx.cs" Inherits="GetExchangeRates" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

Currency
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>


</div>
</form>
</body>
</html>

Here is the aspx code behind.

using System;
using System.Collections.Generic;
using System.Net;
using Newtonsoft.Json;
public partial class GetExchangeRates : System.Web.UI.Page
{
static JSon_SampleData.CurrencyRates obj;
Dictionary rateValues;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
obj = new JSon_SampleData.CurrencyRates();
obj = Download_Serialized_ExchangeRate("http://openexchangerates.org/api/latest.json?app_id=");
rateValues = new Dictionary();
rateValues = obj.Rates;
foreach (var raate in rateValues)
{
DropDownList1.Items.Add(raate.Key);
}
Session["rateValues"] = rateValues;
}
}

private static T Download_Serialized_ExchangeRate(string url) where T : new()
{
using (var w = new WebClient())
{
var json_data = string.Empty;
try
{
json_data= w.DownloadString(url);
}
catch (Exception) { }
return !string.IsNullOrEmpty(json_data) ? JsonConvert.DeserializeObject(json_data) : new T();
}
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
rateValues = (Dictionary)Session["rateValues"];
foreach (var raate in rateValues)
{
if (raate.Key == DropDownList1.SelectedItem.Text)
{
TextBox1.Text = raate.Value.ToString();
break;
}
}

}
}

And the Class to hold the JSon data.

using System.Collections.Generic;

namespace JSon_SampleData
{
public class CurrencyRates
{
public string Disclaimer { get; set; }
public string License { get; set; }
public int TimeStamp { get; set; }
public string Base { get; set; }
public Dictionary Rates { get; set; }
}

}

Reference the JSon Data class in your ASP.Net website.

I will post the KO code in the next part and get back to the BDD and Agile part.

Saturday, 23 August 2014

KnockoutJS, Jasmine but why PhantomJS ? - II

However, since Jasmine is based on testing Behavior against expectations, it is necessary to mention Behavior Driven Development (BDD) and the artifacts that matter for BDD like user stories, scenarios and enhancing code quality through better testability provided by tools like Slim (which enable creation of Scenarios and testing them (thereby, increasing the quality of code because in Agile, the simple thumb of rule is, the more testable the code, the better the quality of code.)), this brings us to the most relevant point of them all (that which is directly related to Agile) - how to select the right tool for an Agile team, not in terms of technical correctness but in terms of fitting in with the underlying development model!).

The tool must be selected in accordance to the basic principles of the model. For instance, BDD stresses on testing behavior foremost so Jasmine, Slim. But what about KnockoutJS?

KnockoutJS is the most compatible tool for an Agile development model like BDD because it allows for testing the changes to the View through the ViewModel ! This does not mean that to be Agile-compatible, a language has to provide for measures to test its view through the viewmodel but that the abilty to abstract the viewmodel away from the view allows for testing 'model' code independently!

To make it more clear, in HTML, if you were to enable instant change reflection to the client page, you will have to wire the onchange or keyup event for the control but can you test if it is working correctly? No. Because the code is wired within the HTML DOM and although there may be ways to access the HTML DOM (so to say), it is cumbersome, not possible to test independently and not suited for Agile. It is more like how fitNesse was used in .Net - contrived and hard-wired.

In the previous part, the reference to PhantomJS's console runner was only to enable GUI reporting of the Jasmine tests.

But, having said, it is not just for a web UI based test report that you need to use another tool; you could as well use the Jasmine test runner and achieve the same results as below:

The script is the same (as in part I) except that the Jasmine Test runner's HTML will no longer refer to PhantomJS's ConsoleRunner but instead to Jasmine's HTMLReporter !

Below is the HTML for the Jasmine's Test Runner.

<!DOCTYPE HTML>

<html>

<head>

<title>Jasmine Test Runner</title>

</head>

<body>

(function() {

var jasmineEnv = jasmine.getEnv();

jasmineEnv.updateInterval = 1000;

var htmlReporter = new jasmine.HtmlReporter();

jasmineEnv.addReporter(htmlReporter);

jasmineEnv.specFilter = function(spec) {

return htmlReporter.specFilter(spec);

};

var currentWindowOnload = window.onload;

window.onload = function() {

if (currentWindowOnload) {

currentWindowOnload();

}

execJasmine();

};

function execJasmine() {

jasmineEnv.execute();

}

})();

</script>

</body>

</html>

Alright, but what exactly am I driving at?

That, this much has only been unit testing of code.

If you want to use an Agile development method like BDD or TDD, the reporting plus the test tools themselves may have to be different due to many other artifacts of the Agile development life cycle like CI, E2E, Code Coverage etc.

And this is where tools like Slim come in. If you have already read my earlier post on using Jasmine and Slim, then the next part will have nothing new.

Next part - how to use Slim with KnockoutJS and Jasmine to enable BDD.

KnockoutJS, Jasmine and Phantom - I

What AngularJS or Javascript with RegisterClientScript blocks could not do, KnockoutJS does and satisfactorily simply !!

What this means, in Asp.Net terms, is equivalent to setting AutopostBack=true or using a jQuery callback function.

Working on client-server technology, especially for Asp.Net developers, frequently makes one think, "If only the code did not do so many round-trips to the server with post-backs and could do simple UI changes that reflect back instantly to the user...".

I mention this, not as a declaration of my own long-felt personal wish but, because this is what the KnockoutJS documentation or the help resources miss out that does not make more ASP.Net developers take to KO nor is there sufficient mention that because it is plain Javascript, it helps Agile development methods to quickly tap into the many already available unit testing and functional testing tools like Jasmine, Slim or PhantomJS and set up a robust team of "high speed development" corridors!

KO also makes things more interesting to the technical-jargon-smitten-adrenaline junkies, who must have a technical discussion on design patterns and architecture to even say "Hello World!" !.

Because KO enables client-client 'post', it means a fresh look at the way the view-model works and is understood in MVM becomes important - now, it becomes MVVM (the additonal 'V' in the model is actually viewmodel together).

The additional tier in the architecture is ok, not as a compromise that you cannot do anything about anyway, but seriously as an efficient workaround that not only improves performance but also helps Agile immensely!! How?

With and because of KO, you do not need to think of Selenium as an additional tool to burden your team with because testing the VM itself with Jasmine or other unit testing tools should suffice !!

And also, there is no need to learn an additional tool like Slim to integrate your tests because PhantomJs provides a command-line executable (or rather, an executable).

That is a lot of advantages of KO, I hope I am not putting down other equally or more efficient language tools. Yes, KO is not a framework as AngularJS probably is.

So, here goes as I whet my appetite...

HelloWorld.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello, KnockoutJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="knockoutjs.3.2.0\content\scripts\knockout-3.2.0.js"></script>
<script type="text/javascript" src="HelloKO-Script.js"></script>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h3>Hello, <span data-bind="text: fullName"> </span>!</h3>
</body>
</html>

Of course, the reference to the jQuery script is still necessary because of the $ functiion callback in the below script.

And the Knockout script (and no pun intended!)

// HelloKO-Script.js

var HelloViewModel = function (firstname, lastname) {

var self = this;

self.firstName = ko.observable(firstname);

self.lastName = ko.observable(lastname);

self.fullName = ko.computed(function () {

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

}, self);

};

$(function () {

ko.applyBindings(new HelloViewModel("Ravichandran", "Jv"));

});

Simple four terms to explain is all that is required - the ViewModel that is, quite apparently, the viewmodel, the observable method of KO that 'observes' the 'fields', the computed keyword of KO to take an action and the applyBindings that applies - here is the magic! - the KO bindings, in this example the 'data-bind' to the 'value:' binding.

The above program will simply output this -

But the magic is when you make any change to either of the field and,

The applyBindings is what activates KO and the callback magic with the help of the $ jQuery callback mechanism to make the UI update happen!

You can download KO separately or use the NuGet tool in VS 2012. I used the latter - copy the package after downloading with NuGet into the relevant folder and modify the script src path.

The Jasmine tests are equally simple !

All you need in Jasmine is a spec file (same name as the CUT or Script Under Test) and the Jasmine framework.

The spec file

"HelloKO-Script-spec.js"

describe("My Name", function () {
it("concatenates firstName and lastName and displays full name", function () {
var target = new HelloViewModel("Ravichandran", "Jv");
expect(target.fullName()).toBe("Ravichandran Jv");
});
});

The describe keyword describes the function and gives it a name as parameters, defines a target variable 'target' and calls the 'expect' method of the Jasmine framework to match a given value with a call to the HelloKO-Script.js method, fullName().

To run and see the test results, you could use your own CSS or PhantomJS or Slim.

Step 1
Download Jasmine and PhantomJS and place the downloaded folders in the bin/root or wherever you have the HTML page.

Step 2
Create a new HTML page and insert the below code -

<!DOCTYPE HTML>
<html>
<head>
<title>Jasmine Test Runner</title>
<link rel="stylesheet" type="text/css" href="Jasmine\lib\jasmine-1.2.0\jasmine.css" />
<script type="text/javascript" src="Jasmine\lib\jasmine-1.2.0\jasmine.js"></script>
<script type="text/javascript" src="Jasmine\lib\jasmine-1.2.0\jasmine-html.js"></script>

<script type="text/javascript" src="phantom-jasmine-master\lib\console-runner.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="knockoutjs.3.2.0\content\scripts\knockout-3.2.0.js"></script>


<script type="text/javascript" src="helloko-script.js"></script>


<script type="text/javascript" src="helloko-script-spec.js"></script>
</head>
<body>


<script type="text/javascript">
var console_reporter = new jasmine.ConsoleReporter()
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().addReporter(console_reporter);
jasmine.getEnv().execute();
</script>

</body>
</html>

That is it! Run the above HTML page and see the results. If your steps 1 & 2 were correct, you should see the below result screen else make sure the <script tags' src location are matching with your path.

If you do not like the PhantomJS script, you could use Slim instead but for that you will need to download Slim, know how to use and start the fitNesse server, write the Slim test suite and finally run the Slim fixture !!

With PhantomJS, you modify just the TestRunner HTML page as and when you need to modify the path to the script source file and the Jasmine spec file.

Ideally, they say, you should mock the jQuery $ method, too, but that, again, as they say, is yet another story - more in the context of TDD !

Tuesday, 19 August 2014

Angular.Js - Funny parser !!

You will need a HTML5 compatible browser to try this but it will be sure to rock you.

The funny part is line # 5. You are welcome to leave funny or witty comments. Please do not get overboard over the technical aspects, though.

If you remove the line, the result will be 5 !!!

The code:

1. < !doctype html >
2. < body >
3. < div ng-app="" ng-init="quantity=1;cost=5" >
4.

5. < p > {{quantity=quantity+1}} < /p >
6. Total in dollar: {{ quantity * cost }}
7.

8.

9.
10.

But the same when used within the scope of an angular module will work predictably as below. This is because the

tag that was the application's main entry point in the above scenario (where ng-init is initializing the 'quantity' variable but the increment was happening inside an AngularJS expression), is now being used as a controller by the module.

The $scope of the controller is the application (the div tag) it is referred from.

But the good thing is that there is no index out of bounds exception and so the control moves to the next line even if the index used for an array element is out of bounds !!

And, the best part is it works like the good old pointers !!

Result is {{ points[5] }}
Result is {{ points[2]+points[4] }}
Result is {{ points[2+1] }}
Result is {{ points[2*2] }}