AngularJS

Jul 22 2014

I've been at my current job, Grand Round Table, for about two months now and I am learning a lot. Our web application (and my main responsibility) uses AngularJS which I've learned a lot about so far. I've been intrigued by the framework for a while now and am excited to get to work on it in a meaningful way. At my previous job we wrote our web apps in Backbone. Simply put, in comparision, Angular is awesome. Here are some of the aspects of it that I like so far.

  1. The main thing I've noticed about Angular is that it gives you all of the components that you need including services, injectors, controllers, scopes, filters and a lot more. It gives you so much freedom and tools, in fact, that I imagine that if you're doing something in Angular that seems awkward, you should probably think about how you are architecturing your app. Services in particular have been great for me. Basically they are singleton objects that lazily instantiated when they are needed. This allows you to inject them (more on that later) wherever you need them and you'll know that you are always using the exact same object. Because of this they are great for sharing state across different components. In the past I have had to create Backbone models that do something similar and that is pretty easy to do, but Angular has functionality for them right out the box.

  2. The documentation and community are top notch. I've found that this is becoming increasingly important with any technology and if I wasn't lazy I could show you some Google search chart that shows AngularJS on the uptick. Stack Overflow is helping me find the answers that I need quickly, but it goes beyond that. Often errors in Angular will log to the console a URL that will explain the error in more detail. In most cases this has helped me solve the problem pretty quickly.

    Additionally, the actual documentation on the website is very thorough and includes testing example, such as here. That is awesome.

    And I shouldn't forget to mention that Angular is the only web framework in Philadelphia to have a Meetup group (thx RJ Metrics!).

  3. I don't know if I completely understand the right way to use directives yet, but they are extremely powerful. Basically, as I understand them, they allow you to create custom HTML elements that can perform their own interactions with optional access to methods and data on other components like a controller. Conceptually they seem similar to web components (Polymer being an example library) that are modular, isolated pieces of code. This makes them easily shareable and reusable like the sharing of modules in the NodeJS ecosystem.

    One great example of this is the UI Bootstrap project, which has created Angular directives for the Bootstrap JavaScript components. We're using the pagination directive in our app at Grand Round Table and it's saving us a lot of time. I've been really suprised by how many quality custom directives there are, like this Elasticsearch one and the this Famo.us implementation which again points back to the quality of the community around Angular. The framework also comes with a collection of filters out of the box like ng-repeat, ng-selected, ng-model and a lot more that solve a lot of common problems easily.

  4. I've grown to really like a more expressive HTML document. When non-Angular users talk about Angular, they usually talk about how it feels "gross" to have JavaScript and custom elements in their HTML. Once you can get over the inital hurdle of doing something "weird", you can start to see the benefits. In Angular it seems that a sign of a well designed app is that you can get a gist of what it does by reading the HTML. A well-named filter, for example, can allow you to see what it is doing without reading the code because you're piping some expression of data to it. A jQuery-based app may be structured differently: you add custom classes to your HTML elements that have nothing to do with CSS styling but are used by jQuery to select elements and do something to them. So you've got your HTML in one or more pages (since you should be using templates/partials at some point) and then your JavaScript in a bunch of other files and you're flipping back and forth, trying to keep it all straight in your mind. How is this beneficial?

  5. In Angular, testing is important and there are tools built into the framework to help you with it: mainly dependency injection. Also, as I mentioned above, the documentation includes testing examples and Angular plays well with BDD/TDD unit testing tools like Mocha or Jasmine. Beyond that the Angular team has created Protractor, an end-to-end testing framework that is pretty impressive. It allows you to create a test that performs interactions on your application, like using a login page. We don't have E2E tests yet at GRT, but I'm working on it.

There's a ton of other good things about Angular that I'm not mentioning and I suggest you give it a try. Coming from Backbone it's really a breath of fresh air to use a fully fleshed-out framework that gives you tools for everything that you may come across. This really isn't a knock on Backbone though as it doesn't seem to intend to be a full framework but rather a few well-composed components that can be used in a variety of ways (for good and evil). If you look at the changelog for Backbone the updates are pretty minor at this point as the framework is pretty much completed. It still holds a place and the excellent MarionetteJS makes many things easier for you.

I'm sure eventually something better will come along and EmberJS and Om look like promising tools that I want to check out at some point. But for now, Angular is making my life easier.

Send a pull request for this post on GitHub.

Dave Walk is a software developer, basketball nerd and wannabe runner living in Philadelphia. He enjoys constantly learning and creating solutions with Go, JavaScript and Python. This is his website.