Why Use AngularJS?

Tuesday, February 26, 2013

AngularJSSince I started a series of posts on AngularJS, I've had a few people ask me why I like the framework.

One year ago I wrote a post with the title "Plain Old JavaScript". This post originated after working with various frameworks and deciding that two-way data binding was not a feature I was willing to achieve by sacrificing JavaScript objects on the Altar Of Observability.

Specifically, the func-ifying of object properties to raise change notifications corrupts my models with infrastructure. The functions make the code harder to change, harder to work on as a team, and harder to debug. These are my personal feelings based on my own observations, and I'm not saying the approach is wrong or doesn't work.

You can like caramel, but I prefer chocolate.

We can both eat ice cream with a dessert topping.

Changes

One of the reasons I kept coming back to Angular was because it offers two-way data binding without funcing up the model. At first I couldn't believe the change detection could possibly work, but it does work well by using some smarts. There are watchers, listeners, and a snapshot strategy that will look for changes after your code executes and manipulates the model. The change detection feature includes my favorite comment of the entire Angular code base (in the $digest method):

// Insanity Warning: scope depth-first traversal
// yes, this code is a bit crazy, but it works and we have tests to prove it!

So, it does work, and there are tests to prove it.

Pieces

Angular is broken down into components like controllers, views, models, and services. These names are familiar to anyone who has worked on projects using separated presentation patterns. There are also directives, filters, modules, and other abstractions that seem to achieve the right balance of complexity versus separation of concerns.

Patterns

Model View Controller and Dependency Injection are the two patterns that jump out at the start, but there are other comfortable, familiar patterns in Angular, including it's approach to view composition and dependency management. 

Tests

Angular help you write test friendly code. Even the tutorial demonstrates unit tests and end-to-end tests using Jasmine's BDD syntax.

What's Wrong with Angular?

Not every framework is perfect, and you'll find scenarios where Angular is not a good fit. There are certainly scenarios when change detection will be milliseconds slower than observing changes. It's not obvious how to track animations or respond to focus events. Form validation is subpar. Angular is not minimalistic and comes with strong opinions. Writing lower level components, like custom directives, requires some focused effort. You also need some understanding of prototypal inheritance to avoid getting into trouble in more advanced scenarios.

Parting Words

I like Angular because I have fun writing code on top of the framework, and the framework doesn't get in the way. Models are just models, and views have sexy {{data.binding}} expressions. I do have an affinity for { and }.

I also believe AngularJS is the framework in the best position to take advantage of future improvements in the JavaScript language and the DOM APIs.

That's why I like AngularJS, but frameworks are a personal choice.


Comments
gravatar Rob Tuesday, February 26, 2013
Now...suppose that Durandal could make KO's observables work without functions...and suppose we had a different view engine...without data-bind attributes, but with a {} syntax or maybe even a razor-like @ syntax...would that tempt you?
gravatar Scott Allen Tuesday, February 26, 2013
@Rob: Very much so :)
gravatar Rob Tuesday, February 26, 2013
I thought so. Well, we don't have it yet...but there is a plan around both of those things :) Technically, there's an extensibility point for the view engine today, I just haven't bothered to write it yet. The observable func issue is different. There's some prototype code around that being thrown around, but I think full support will likely require some new features in knockout. We shall see...
gravatar Giuseppe Tuesday, February 26, 2013
Hello Scott. I've read your post series on AngularJS: very nice read, quite useful. My question: would you choose AngularJS for a production-ready project for one of your customers? Say for a typical business web app managing orders/items/whatever. Thanks!
gravatar amir jalali Tuesday, February 26, 2013
what about emberjs and its lovely handlebars?
gravatar Ravi Tuesday, February 26, 2013
I too like Angular JS for same set of reasons. It makes scripting very easier at the same time supports very nice separation of concerns. Thanks for sharing your opinion and boosting up my energy level :)
gravatar Stacy Tuesday, February 26, 2013
Thanks Scott for summing up Angularjs! However for practical web apps, of course there's a lot more to consider. In general terms, do you think angularjs(+web api) is a credible production ready replacement for MVC4? Or do you see angularjs used with MVC4 mostly to componentize interactivity in an otherwise MVC4 app?
gravatar Thai Tuesday, February 26, 2013
If KO's observables work without functions, I'm very happy to switch back to KO.
gravatar Colin J Tuesday, February 26, 2013
I hope you will consider doing an AngularJS course for Pluralsight. That would be awesome.
gravatar Steve Gentile Tuesday, February 26, 2013
Thanks Scott! I just finished a large KnockoutJS SPA, and built in much of the routing, view composition, with a hypermedia touch - and quite honestly, I think AngularJS solves much of that without needing to pull in several other 3rd party libraries. Rob, I must say that would help - the one thing with KnockoutJs that became messy was that we were basically needing to use ko virtual (which doesn't feel right having 'commented code' being 'real code') - I prefer the {{ over it. So I would welcome what your suggesting. What KnockoutJS and also, I'd say the same for Backbone, is it's not seemly designed to build a SPA that might be large. That and although we made good use of bindinghandlers to wrap up DOM and create components, it is still missing a good widget approach. Seems every project has these jQuery components that want to be added. So a good widget/component model is vital. Not to talk bad about KnockoutJS, I really found good things with the binding and binding handlers, but I would have to say, the AngularJS binding and directives - with the injection, etc... is quite powerful. Not only that, AngularJS can play well with RequireJS as well - ie. https://github.com/sgentile/angularjs-requirejs-lazy-controllers. Stacy, not sure if you should replace with MVC4 - depends on your requirements and the type of application you are wanting to build, but certainly a strong SPA framework needs to support the same concepts: routing, back button support, view composition/dynamically loading of partial views/templates, client side validation, etc... for anything larger. This is why I'd prefer AngularJS over something like KnockoutJS - although it can do this with other third party libraries, I believe it's intended for building pages where you intensive client side behaviors, it's not strong in areas of view composition (which is why you would need something like Durandal..!). It definitely eases the pain of pure jQuery AJAX DOM manipulation of shoving html into div tags and trying to update the html.
gravatar Stacy Tuesday, February 26, 2013
Thanks Steve, appreciate the feedback. I've been kicking the tires a bit, and will setup webstorm/mac to get started with angular next week. I like the instant side-by-side html view, rather than compiling in visual studio. I'll develop the web api in my windows vm, and network them together for integration tests.
gravatar Ricardo Trujillo Wednesday, February 27, 2013
Interesant point of view. Since we use AngularJS on the client, we spend more time defining the applications architecture, design , or implementing good bussiness logic on the server, than codifying old javascript. Some languages like coffe script or type script help much , but angular is another world. We love Angular. And if you have scenarios where Angular is not a good fit, you can use another library. (Jquery, Underscore...). But major problems are usually solved in an elegant manner (without practically no javascript code!) Congratulations to the angularJS Team. We see too much future to this approach for web development.
gravatar Juan Carlos Garcia Wednesday, February 27, 2013
I like AngularJS i have been using it for about 6 months, but there are some minor issues that still today annoy me and don't have straight solution like: 1 - Having a dataentry form, and after invoking a ng-click action, setting the focus on an specific element in the UI (without using DOM manipulation in the controller) 2 - Clearing a form to its pristine state and so the backing model. Besides those point i like AngularJS
gravatar Ravi Wednesday, February 27, 2013
Juan, Feature of clearing form to pristine state is available in Angular 1.1.1. I used it in my last blog post: http://sravi-kiran.blogspot.com/2013/02/FormValidationUsingAngularJS.html
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!