Angularjs and Yeoman

This will be the first in a series of posts about Angularjs. Next will be the creation of a simple "edit in place". This post only gives first impressions and highlights what appears to make Angularjs + Yeoman a really different framework.

Angularjs

Angularjs is "HTML enhanced for apps" aka Superheroic Javascript MVW framework.

Quite a few articles can be found about this "new" javascript framework. It seems to be relatively new out here, but Google (they're behind it) has apparently been using if for a while.
In a word, from looking at the examples on the site, this looks awesome!

Yet another framework? Not in my opinion after playing around a bit with it. Enhanced with Yeoman for scaffolding, it becomes one of the most powerful tools ever to build web apps. Even if that's not your goal, it's very neat for creating interactivity within a single page (we'll get to an example in the second post of the series).

What makes it really different?

• Two way data binding - DOM elements become attached to your models, and vice-versa. So when you change the model, the DOM changes accordingly, and if you change e.g. the value of an input, your model is aware of it
• Separation of concerns: It becomes quickly clear what each part of the MVC is in charge of.
• Enhancing HTML with your own directives, forcing the browser to become "smarter"
• Yeoman (see below): generate your apps quickly and in a clean way
• Service/Factories for reusable parts of your app
• Dependency injection which allows you to "request" components and override those components temporarily when needed, for example faking a db connection while testing
• Test driven development: it's all up to you, but every single tutorial (from the creators anyway) comes with tests and they keep emphasizing on how you should do the same. Uses Jasmine and PhantomJS
• Scopes to separate parts of your application that do not need to interact
• Uses many other successful technologies, too many to list down, but see above Jasmine, PhantomJS, Grunt, etc.
• It's from Google. Sorry, have to say it, that does carry a certain amount of weight

It also does a lot of things that other frameworks provide:

• Routing
• DOM manipulation (mostly behind the scenes)
• Ajax via $http and $resource
• Promise objects
• JSONP support

Downsides:

• Doesn't work so well with other frameworks - (read it somewhere, need to find a reference here, because I've not even been needing other frameworks so far)
• Doesn't support some DOM events (blur, I think) but I'm sure it's a work in progress
• No animations (yet), not many plugins, though angularjs ui is a pretty good start
• Learning curve. If you come from a non-programming background, it might appear pretty scary after the basic examples
• No event delegation as far as we could see
• Many dependencies, for Yeoman anyway - though Yeoman takes you through the process of getting everything you need.

Yeoman

Yeoman helps you scaffold your apps in a  very very neat way. A simple command "yeoman init angularjs" builds your app and makes sure that you won't mix up elements of your code. Is also compiles SASS, coffeescript on the fly and has a built in web server for testing. The server watches for your changes and reloads the app automatically. A good overview is found in this video.

Conclusion

All we did in this post is mention some of the features of Angular, but have not gotten into any concrete application. So unless the words "Dependency injection" excite you, you mind find our here opinion a bit premature. This opinion was actually forged from really playing with Angular and Yeoman and will make much more sense once we've come up with part 3 in this series. But here it is.

Angular is not just another framework. It does not attempt to do the same things in a slightly different and maybe better way. It really takes a perpendicular trajectory to the common approach of grabbing HTML elements and modifying them; instead of that, it creates a permanent bond between DOM elements and models. Good coding practices and test-driven development make it a first class choice to encourage clean development.
Add Yeoman to that, and you have clean, easily maintainable code, extremely fast to scaffold.