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:
Package | License | Current Version | Latest Update | Contributors |
---|---|---|---|---|
AngularJS | MIT | 1.0.8, 1.2.0 rc 2 | 2 Days Ago | 392 |
Knockout | MIT | 2.3.0, 3.0.0 beta | 3 Days Ago | 38 |
Knockout.js External Template Engine | MIT | 2.0.5 | A year ago | 3 |
RequireJS | MIT or BSD | 2.1.8 | 6 Days Ago | 53 |
SammyJS | MIT | 0.7.4 | 6 Months Ago | 47 |
Durandal | MIT | 2.0.0 | 1 month ago | 27 |
Finch.js | MIT | 0.5.13 | 5 months ago | 2 |
flatiron director | MIT | 1.2.0 | 4 months ago | 42 |
$script.js | ?? | N/A (source) | 5 months ago | 8 |
Jasmine | MIT | 1.3.1 | 18 hours ago | 49 |
Jasmine.Async | MIT | 0.1.0 | 1 year ago | 1 |
Squire.js | MIT | N/A (source) | 2 months ago | 6 |
Latest Update + Current Version as of when I added the table row.
Browser Compatibility:
Package | Browsers |
---|---|
AngularJS | Not Documented? (extra requirements for IE8-) |
Knockout | IE 6+, Firefox 2+, Safari (desktop/mobile), Chrome, Opera |
Knockout.js External Template Engine | ?? |
RequireJS | IE 6+, Firefox 2+, Safari 3.2+, Chrome 3+, Opera 10+ |
SammyJS | IE 8+, Firefox 3+, Safari 3+, Chrome 5+, Opera 10+, Mobile WebKit |
Durandal | Not Documented? |
Finch.js | Not Documented? |
flatiron director | ?? |
$script.js | IE 6+, Firefox 2+, Safari 3+, Chrome 9+ |
Jasmine, Jasmine.Async | Not client facing. Supports a wide range of browsers, including PhantomJS. Chutzpah plugin for Visual Studio (no ncrunch yet though) |
Squire.js | Also 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 🙂