knockoutjs and MVVM

MVVM ( Model View ViewModel ) is a new architechture that is heavily followed in mainstream enterprise frameworks these days along with other frameworks. I’ll talk less about this and talk more about knockoutjs in this post. Knockout is an extraodrinary library, which if fully utilized in its best way, it can be very efficient and day saver in the end.

You can get more info about knockoutjs here at

I’ll follow through a scenerio how we can utilize knockoutjs library in the simplest way possible.

Say, we have a webservice that is returning us some Json data. We want to pull data out of it and bind to our controls back there in the html form. Lets do it here.

Suppose our html is like this:

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
Now we see that we provided just some databind attributes to the input controls. What we want is that when user adds firstname or lastName in the text boxes, it should concat those and display those in the <h2> tag which we have binded with fullName.
One classic approach would be to declare a onkeydown event on both first name and last name and in the event declaration, we can concat and set it into fullName block. For that we have to declare some extra stuff like we have to id-fy our controls, declare events, write some javascript.
Lets see a more savvy approach!
We will reference knockoutjs lib in the page, and in script portion write the following code (btw we can do the same code in seperate js file as well for clean seperation of code):
// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
ko.applyBindings(new ViewModel("Planet", "Earth"));

What we have done here is we created a view model, and we created firstName and lastName properties in it, and ensured the two way binding through ko.observable(first). And for the replacement of javascript keydown event we have done it in a more cleaner way by making a computed function fullName.

In the end i called ko.appyBindings() function that does all the magic to bind my form with my viewModel and with event notifications to and fro.
Knockoutjs is a great library and with a great future ahead. I will be posting more on this so keep looking.

Software Design Approach Level zero

“Give me good mothers, and i will give you good nation”.

This napolean law applies somewhat to software industry as well, i say “Give me good software design and i will deliver good software”

A good software design requires a lot to think and endevour. Few things are as below:

– Solve the big question “Why?”, if we clear the why in our software while designing, we are half way done.

– Team balancing and satisfaction ( Mostly we do not care about this )

– Not everyone is a good software designer. Choose wisely, else the project will be spinning in facade, unity, singleton.. and what not

–  Make the base strong.. If your base is not strong, you can also hang your project in air with just one charisma. and that is “Communication”. Keep in line with your client at all time. Do not let him loose you and vise versa.

– Do not go for complex architectures, which just makes you geeky and give you an extra raise at the end of year. This stunt does works, but can elongate or sometimes destroys the projects.

– Ask your developer at least  once that they want to do the job or not, do not be impositive.

– Do not  cheat, bluff, over show, or give false committments to your client at all.

– Keeping all points above in mind.. Now guys, design your software at last.

Happy Software designing.

debug symbols not loading when i debug in Visual Studio

I was going to debug my app, while running the website, i placed a breakpoint, but it was not hitting that breakpoint during the execution cycle. I tried to do it through “Attach to Process” method, and attaching my Visual studio debugger to w3wp.exe.

Still no clue, i searched a bit of options in the Tools -> Options -> Debugging -> General and un-check the option that says “Require source files to exactly match the original version”

This will make life easier, and enable us to debug the solution. Phew!!

MVC 3 & RAZOR crash course by Microsoft and HEC

14th and 15th Feb 2012

Higher education commission scheduled an event for All Pakistan university training for MVC 3, the attendees were subjected to be both university students and professors as well.

The event went well, we took deep insight into MVC and RAZOR in a 3 hours session each day.

14th Feb :

  1. Institute of Management Science Peshawar
  2. UET Taxila
  3. PIEAS
  4. Comsats University
  5. KPK Agriculture University
  6. Air University

15th Feb :

  1. Punjab University
  2. Kinnarid Collage Lahore
  3. Shaheed Benazir Bhutto University
  4. University of Health and Science
  5. Punjab University Collage of Information technology

I hope it went well for the attendees.

Html 5 Sessions in Pakistan’s top Universities

Discussed the awesome technology with the following universities at Higher education Commission Video Conference facility,  facilitated by Microsoft Pakistan. It was a wonderful session, we saw some live examples and have an introduction  of HTML 5.

Following are the universities who attend the HTML5 session on 3rd Feb, 2012.

 Mirpur University of Science and Technology

  1. Institute of Management Science Peshawar
  2. Kohat university Peshawar
  3. Dow university of Health and Science
  4. Punjab University
  5. Frontier Women University
  6. UST Bannu