Eli Weinstock-Herman

AngularJS vs Knockout - Introduction (1 of 8)

Original post posted on Monday, October 7, 2013 at LessThanDot.com

I'm reviewing Angular and Knockout to determine which would fit better for a variety of upcoming projects. There are already plenty of posts out there comparing AngularJS and Knockout. I have been slowly reading through all the comparisons I could find, but unfortunately I keep running into cases where the posts are too high level, miss capabilities I need, or have errors that undermine my trust in the rest of the post.

The thing is, Knockout and AngularJS are attempting to solve two different problems. One is simply an MVVM binding framework, the other is a SPA-in-a-box solution. So instead of trying to directly compare the two frameworks, I've outlined the capabilities I need and will review how well each of the frameworks meets those capabilities. Where one library does not meet a particular set of needs, I'll look at a common solution that people use with that library. Since Knockout is purely a databinding library, I expect to have to pull in others when it's time to talk about routing, modules, and unit testing, while I shouldn't have to do this as much with AngularJS.

Here are the capabilities I need:

  • Data binding - bind HTML elements to JavaScript data models
  • Validation - validation of raw inputs by applying rules for fields or model properties
  • Serialization - easy method for serializing models to POST to server-side APIs
  • Templating - define HTML templates for re-usable complex collections of HTML
  • Modules + DI - keep my javascript files separate, help me order them properly, manage dependencies for me
  • Automated Testing - Exploring unit testing and possibilities for higher level testing
  • SPA Routing/History - make it easy for me to route between views in a single page app, with history/deep linking

Before I dive into either of these libraries, though, I need some assurance that they will support the browsers I need, won't get me into an odd licensing situation, and have sizable communities maintaining them. Here is a list of all the libraries I've incorporated in the series:

PackageLicenseCurrent VersionLatest UpdateContributors
AngularJSMIT1.0.8, 1.2.0 rc 22 Days Ago392
KnockoutMIT2.3.0, 3.0.0 beta3 Days Ago38
Knockout.js External Template EngineMIT2.0.5A year ago3
RequireJSMIT or BSD2.1.86 Days Ago53
SammyJSMIT0.7.46 Months Ago47
DurandalMIT2.0.01 month ago27
Finch.jsMIT0.5.135 months ago2
flatiron directorMIT1.2.04 months ago42
$script.js??N/A (source)5 months ago8
JasmineMIT1.3.118 hours ago49
Jasmine.AsyncMIT0.1.01 year ago1
Squire.jsMITN/A (source)2 months ago6

Latest Update + Current Version as of when I added the table row.

Browser Compatibility:

PackageBrowsers
AngularJSNot Documented? (extra requirements for IE8-)
KnockoutIE 6+, Firefox 2+, Safari (desktop/mobile), Chrome, Opera
Knockout.js External Template Engine??
RequireJSIE 6+, Firefox 2+, Safari 3.2+, Chrome 3+, Opera 10+
SammyJSIE 8+, Firefox 3+, Safari 3+, Chrome 5+, Opera 10+, Mobile WebKit
DurandalNot Documented?
Finch.jsNot Documented?
flatiron director??
$script.jsIE 6+, Firefox 2+, Safari 3+, Chrome 9+
Jasmine, Jasmine.AsyncNot client facing. Supports a wide range of browsers, including PhantomJS. Chutzpah plugin for Visual Studio (no ncrunch yet though)
Squire.jsAlso not client facing

I'll explore each capability in both frameworks as well as my opinions and frustrations along the way. Then when the whole series is posted, I'll offer a final set of opinions. The plan is to post daily (weekdays) until I get to the end, so keep an eye out on the site or follow me on twitter for updates.

I haven't actually written the last post yet, so you have plenty of time to color my opinion and point out where I did things wrong as I roll out each post :)

Knockout vs AngularJS

Comments are available on the original post at lessthandot.com