AngularJS vs KnockoutJS – Part 2


8 September 2015, by

Previously, we looked at one of the most talked-about family of JavaScript libraries: those that follow the MV* pattern to decouple the visual concerns of a web application from the data-driven business logic. This blog post serves to give a brief introduction of two of the most commonly used such libraries – AngularJS and KnockoutJS.

KnockoutJS

KnockoutJS is a very lightweight library that embodies the movement in the JavaScript community towards a more “plug and play” ecosystem: It’s very small, it does one thing, and it does it well.

KnockoutJS is a MVVM (Model-View-ViewModel) library, meaning it takes a simple JavaScript object (the view model) and binds it to HTML elements – and this is all it does! To get the code working, you’ll either need to use a third party module loading (such as RequireJS) or include the script directly.

You apply the bindings using

ko.applyBindings(viewModel, [domElement])

with the default domElement being the entire page. Once you have done this, Knockout will read any “data-bind” attribute, and apply any named ‘bindings’ (objects mapping data to changes on the page) with any arguments provided. Since viewModel is just a JavaScript object made up of key-value pairs, we can reference the properties on the model very simply by their name. If an object was of the form { name: “Sam” }, you could display it on the page in this manner:

<span data-bind=”text: name”></span>

We can even do two-way binding – that is to say that a view model can take one of its values from a data-binding on the page and use that to influence something else that happens. You do this by making a property a ‘knockout observable,’

var viewModel = {
  name: ko.observable(“Default Name”)
}

and then knockout’s “value” binding , namely

<input data-bind=”value: name” />

will mean that if you change that value on a form, it will update that variable and anywhere else that it’s referenced on the page.

KnockoutJS is so unopinionated, it really is as simple as that! There are more data bindings than we can go into here such as “css” that will affect the style of an object; and “foreach” that can display a DOM element for each item in an array. The documentation for KnockoutJS is very good, and a recommended read for all KnockoutJS new starters. http://learn.knockoutjs.com/

AngularJS

The opposite of KnockoutJS, AngularJS is a very opinionated framework and can provide most of the heavy-lifting on your site.

AngularJS can be used in a similar way to KnockoutJS, simply to do data binding between a JavaScript object and DOM elements, and can do so in a way that looks similar (though not identical) to KnockoutJS’s approach of its own HTML attribute. AngularJS has a series of namespaced attributes called directives, and a lot of them come out the box.

Once you’ve added the AngularJS file to the page, and an “ng-app” directive to the html tag at the start of the page, then directives such as ng-repeat can be used anywhere on the page:

<ul>
  <li ng-repeat="name in names">
    {{ name }}
  </li>
</ul>

Names must be an array attached to the “scope” – AngularJS’s term for the glue that holds the model and the view together. You can either bind it directly in the view, using an “ng-init” directive:

<div ng-init="names=['Sally', 'Sam', 'Sadiq']">
…
</div>

Or (and this is where the larger – but more powerful – aspects of AngularJS start to creep in), in a controller. You instruct the page which controller to use using an ng-controller directive, and you can control what is bound to the model by the $scope variable that will be injected into it:

function demoController($scope) {
  $scope.names = [‘Sally’, ‘Sam’, ‘Sadiq’]
}

<div ng-controller=”demoController”>
…
</div>

Unlike KnockoutJS, which has to be paired up with a larger number of libraries to make it usable, AngularJS comes with a lot of things out the box, making it feasible to be one of the very few JavaScript libraries on a project. There are loads of great AngularJS tutorials that go into much more detail, but some of the features include:

  • A module system. You can assign a series of add-ons to your application, decoupling parts of your code without the complexity of, say, RequireJS.
  • Dependency Injection. Rather than manually passing dependencies around, AngularJS can inject them for you, making it easier to test and fully modularise your code.
  • There’s an AngularJS module called ‘ngRoute’ that allows you to implement routing entirely client-side, making Single-Page Applications (SPAs) easier to develop.

This amount of power is why AngularJS has become such a big player in the web development market today.

These two frameworks take two very different tacks to solve the same problem – one is a minimal data-binding framework that makes it easy to integrate in with other tools; whereas AngularJS is a larger and more powerful beast. Although I imagine these descriptions will make some of you naturally favour one over the other, we plan to compare the two libraries in a future blog post.

David Simons trains developers in High-Quality Front-end JavaScript. Sign up to his next course here.

Tags: , , , ,

Categories: Softwire, Technical

«
»

Leave a Reply

* Mandatory fields


seven + 7 =

Submit Comment