Web Development

I have been reviewing Javascript frameworks for a few months now. Javascript Frameworks (aside from Mootools, jQuery, etc) have risen due to the need for Separation of Concerns, Testability, Abstraction and many others.

I never really focused learning any of these javascript frameworks. I have always liked to learn at least one but never had the chance to master one.

At my current company, there has been a rise of clients wanting to have their applications built using some sort of Javascript Frameworks with the likes of BackboneJS, Ember and AngularJS. For me, this was a wake up call to master something other than simple jQuery, Mootools or any low level DOM manipulation library.

I’m not good at comparisons nor am I going to elaborate on any reasons why I chose KnockoutJS. I simply liked how easy it was to develop simple scripts using it.

For now, I have been simply trying out samples and playing with them.

HTML Markup

<div class="offset2 span8 margin-bottom body">
  <p>First name: <input data-bind="value: firstName" /></p>
  <p>Last name: <input data-bind="value: lastName" /></p>
  <h4>Hello, <span data-bind="text: fullName"></span>!</h4>
  <p>First value: <input data-bind="value: firstValue" /></p>
  <p>Second value: <input data-bind="value: secondValue" /></p>
  <h4>Hello, <span data-bind="text: calculatedValue"></span>!</h4>

Javscript Code

function ViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Smith");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

    this.firstValue = ko.observable(1);
    this.secondValue = ko.observable(2);
    this.calculatedValue = ko.computed(function() {
        return parseInt(this.firstValue()) + parseInt(this.secondValue());
    }, this);

ko.applyBindings(new ViewModel());

As you can see, KnockoutJS is quite intuitive. It is easy to understand. This is just one reason I have taken a liking of this wonderful framework.