Why use KnockoutJS

I put together a bit of a proposal for my team and thought I'd post it today.

THE GOAL

As far as I know, we’re all in favor of decoupling.

Decoupling code has the purpose of separating code into pieces so that changes are easy.  MVC is an example, in that its purpose is to separate the logic layer (controller) from the view, and pull the objects out into their own little place (the model) so they can pass between the two.

We do this with N-Tier applications as well, as we’ve started pulling our model and logic out into separate projects in visual studio, creating a logic dll and a model dll that is used by the web application (or other application) front end, and separating the database from the webservice from the front end.

THE PROBLEM

In decoupling, some people get a bit too gung ho and try to decouple everywhere.   In fact, you’ll see this on Stack Overflow a lot.  The problem I see is that we’re decoupling at the wrong place much of the time.  If you think of decoupling like making independent pieces of a robot that work uniquely, you would want the robot’s arm to attach to any of a number of robots and work the same regardless.

The difficulty here is that in my robot example, the arm isn’t generic, it’s proprietary.  Here’s a bit of sample code I’m toying with.

Let’s say we decide to switch our back end from C# to Perl or PHP or node.js, or we simply want to reuse this code in another project.  What then?  We can’t reuse this code.  It’s essentially trash.  That’s not what decoupling is about.  We’re supposed to have code that’s decoupled so that it is reusable.

Good decoupling separates the pieces in generic ways that they can be changed smoothly.  We’ve all had this issue when buying a laptop or phone charger and finding out that the makers didn’t use generic hardware.  Instead, we have to buy some proprietary hardware or a new phone/laptop just to get by.

THE SOLUTION

Fortunately, there is a solution.  What if the code I’m showing you instead looked like this:

Look at that, pure HTML5 markup, no mixed in C# (razor’s nice, don’t get me wrong).  The only tweak is that little data-bind attribute.  That’s from the library I’m suggesting that will clean this code up.

http://knockoutjs.com/

KnockoutJS works a lot like some other JS libraries to make JS more object oriented, but it has the most important thing of all.  There are a lot of high-quality tutorials on both the project’s primary website http://learn.knockoutjs.com/ as well as Pluralsight Training.

It can use HTML templates cleanly, meaning it can wrapPartialViews without the need for C#, if we really wanted to go to that extreme.  But the truth is it does it by binding to a Javascript model.  Does this mean we have to re-create our model in JS? Nope.  Knockout can take a JSON string from the server parse it and use it as our ViewModel on the fly.  Basically, on the front end we’re working with the same objects we were on the back end, without any proprietary syntax.

I really think this is the best way to cleanly decouple our View.