Danielle Ferguson
December 31, 2015

Initial Takes on AngularJS vs. KnockoutJS from a .NET Developer

Danielle Ferguson

General use JavaScript libraries and frameworks have been revolutionizing web development for a decade now. Since the release of jQuery in 2006, JavaScript libraries have been quickly replacing traditional use of JavaScript. Today, more than 65% highest traffic sites on the web use jQuery. Since then, a number of other frameworks and libraries have been introduced. In this post I am going to concentrate on two such libraries, AngularJS and KnockoutJS, and provide some general comparisons from the perspective of a .NET developer who is fairly new to each.

The Basics

Before getting into my personal thoughts on these frameworks, let’s take a look at a little background information. I am not going to give any code examples in this post since they can be found in numerous places around the web, including on each project's respective website (knockoutjs.com and angularjs.org)

AngularJS

AngularJS was initially released in 2009 and has grown in popularity since then. According to the AngularJS Wikipedia article,

AngularJS is an open-source web application framework mainly maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Which is a technical speak for "it gives developers a convenient and reusable way to maintain a data model on the client side for single page applications."  

Angular's stated design goals are to decouple DOM manipulation from application logic and the client side of an application from the server side, and also to provide structure for the complete application creation process.

KnockoutJS

KnockoutJS was initially released the year after AngularJS in 2010, and its Wikipedia description is

KnockoutJS is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates. The underlying principles are a clear separation between domain data, view components and data to be displayed and the presence of a clearly defined layer of specialized code to manage the relationships between the view components. These features streamline and simplify the specification of complex relationships between view components, which in turn make the display more responsive and the user experience richer. Knockout was developed and is maintained as an open source project by Steve Sanderson, a Microsoft employee. As the author said, "it continues exactly as-is, and will evolve in whatever direction I and its user community wishes to take it", and stressed, "this isn’t a Microsoft product".

On its surface, this description sounds very similar to the Angular description. An open source JavaScript framework that allows simpler client-side manipulation of a data model and supports separation of model from view. The lack of mention of "single-page applications" is a note that will be important when we go to compare the two frameworks.

Knockout's stated key concepts are to allow declarative binding of the model to the view, automatic UI updates when the model changes, dependency tracking to automatically update computed values and to allow html templating.

It can be seen both from the description and key concepts that knockout puts much less emphasis on its ability to decouple parts of the application than Angular does.

Comparison

The first difference that was immediately obvious to me is that Angular is not designed to play very nicely with non-angular parts of a site. You can make it work, but is definitely a challenge. With Knockout, it is quite easy to have even a very small Knockout part of an otherwise non-Knockout page and I have done this numerous times in existing .NET applications.

The other thing that struck me fairly quickly is that Angular is a complete framework for single page apps and as such is considerably more involved and feels a more intimidating to a beginner. With knockout, there is very little plumbing or understanding needed to get a simple example running. When I was first introduced to Knockout, it seemed quite intuitive, but Angular has taken me longer to warm up to.

One thing with Knockout that can initially be confusing to a beginner is the conversion that is needed between a regular JSON object and a Knockout observable. In order for any model to be operated on by Knockout, it needs to be an observable. Unfortunately, since your server side code will provide and accept only JSON objects, conversion is necessary after data comes from the server and before it is sent back. Angular on the other hand, works directly with JSON objects eliminating the need for conversion.

Another thing that is less streamlined in Knockout is the ability to reuse components. When combining Knockout with MVC.NET, it is not hard to treat pieces as reusable components by putting the markup in a partial that can then be placed in multiple locations, but the script that includes all of the model interactions must be included on any page where the component would be used. In Angular, the ability to add custom directives makes this much more obvious.

The last notable difference I observed was the habits that seem to form with the scripts for each framework. In my experience Knockout tends to encourage long rambling scripts and does not enforce or encourage separation of concerns among different parts of your model. Angular is quite the opposite. Separation of concerns seems to come more naturally. 

The lists below give a summary of the pros and cons for each framework that were discussed:

Angular Pros

  • Complete solution for single page apps
  • Works directly with JSON
  • Built in way to create reusable components
  • Separation of concerns is easier to implement and enforce
  • Great informational links when a console error does show up

Angular Cons

  • Difficult to integrate into non-angular
  • More intimidating to beginners
  • Need to have a fairly good understanding of the overall system to get started
  • Often there is no console error when something fails

Knockout Pros

  • Easily integrated into existing sites and pages
  • Fairly simple concept
  • Can learn as you go

Knockout Cons

  • Developer is responsible for converting between JSON and observables
  • Less obvious how to reuse created components
  • JavaScript files tend to be rambling and have minimal separation of concerns

Sources

https://en.wikipedia.org/wiki/JQuery

https://en.wikipedia.org/wiki/Knockout_(web_framework)

http://knockoutjs.com/

https://en.wikipedia.org/wiki/AngularJS

https://angularjs.org/

5 Comments

  1. 5 Chris 31 Dec
    Excellent rundown of the basics and really like the Pro/Con analysis at the end.  Helps clarify the strengths and weaknesses of each along with which to use when.  Thanks for sharing. 
  2. 4 Keith Beard 31 Dec
    I highly disagree with the con's of angular. We are a .Net shop and are in the process of converting our frontend to angular. Yes there was a learning curve. But that is nothing less to be suspected. You can easily begin to integrate an application with angular. Without the entire app relying upon it and we are doing so now. The only downside I see is being prepared for the switch to angular 2 to utilize its shadow Dom and routing capability. If your a .net developer get comfortable with OOP using typescript. If you want to stay ahead of the game.
  3. 3 Danielle 04 Jan
    Keith,  Thanks for the thoughtful response! I certainly do not claim to be an expert on the subject as I am just learning Angular myself and I definitely appreciate other thoughts on the matter. With regards to the "difficult to learn" related cons to Angular, this was strictly a comparison to Knockout. In my experience it is much easier for .NET devs to pick up knockout than Angular. Definitely wasn't saying it was an impossible task, just as you said, there is a learning curve that seems steeper in my experience than the curve to get going with knockout. There seems to be a lot of pieces of Angular that are enforced "by convention" limitations that can be confusing when you are first getting into it. 

    I would be interested in learning what you mean by "you can integrate into an application without angular" and what your approaches for such have been. What I was referencing was not that you couldn't have an angular app within a .NET app as we have done that successfully, but more that it was more difficult to have a small section of a page be angular in an otherwise non-angular page. With knockout, it was very obvious to me how this could be done, but with angular it seemed to be more of a mystery. I would love to hear more about approaches used to accomplish this.

    Thanks for the great advice on how we can be prepared for Angular 2!
  4. 2 chris kluis 08 Mar
    React's continuing to pick up steam, but it looks like Angular 2 has been heavily influenced by React - have you guys experimented with either yet? We're in the process of getting ready to upgrade a legacy webforms app to a MVC + (js solution) and I'm just soliciting opinions to share.
  5. 1 Danielle 08 Mar
    Hi Chris,

    We had noticed the same trend with React, but we haven't tried it just yet, so unfortunately, I can't weigh in on it yet. We are hoping to try a project using React shortly, and I am sure we will have a post about it when we do. We have done some reading and experimentation with Angular 2, but nothing major yet. Sorry I couldn't be more help. 

Comment

  1. RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
    RadEditor's components - toolbar, content area, modes and modules
       
    Toolbar's wrapper 
     
    Content area wrapper
    RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
    It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
    Editor Mode buttonsStatistics moduleEditor resizer
      
    RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
       

Subscribe to Our Blog

Get the latest blog posts sent right to your inbox so you never miss an informative post from Mercury.

 

Get Your Share On!

 

Tags