Wednesday, October 22, 2014

A Different Angle: What is AngularJS?

This post covers my presentation, AngularJS from a Different Angle, that I presented to the Atlanta JavaScript Meetup group on October 20th, 2014. This was just over a week after the Atlanta Code Camp, when I presented Let’s Build an Angular App! Many of the attendees are local and might have attended both events so I wanted to make something unique.

600_423950092

It was then I realized that most Angular articles and presentations I see tend to walk through the Angular API. Did you know Angular has a factory? What about a service? It does dependency injection, and oh, let me tell you about the data-binding! Although that can be useful, what does it look like when you take a step back and view it from a higher angle? In other words, if I’m in charge of an upcoming project and am putting together my toolbox, how would I look at these frameworks?

Even before looking at features I’d probably want to know about real world use cases. How many times have you read a question posted that went something like, “Show me the money!” (Err, I know, it’s not really a question). In other words, what real world apps have been implemented with Angular? It’s one thing to point to a set of websites and say, “Look, that’s Angular.” It’s quite another to talk to someone on a team who built out an enterprise production app.

I’m a person that has done that several times and am happy to share the details. The largest app is one I share often because it really introduced me to the power and flexibility of Angular, and it went something like this:

  • 25 Developers at peak development
  • Globally distributed team with remote workers distributed across all international time zones (except perhaps a few bands that cross nothing but ocean)
  • 80,000+ lines of TypeScript code that probably generated to a lot more JavaScript code (but after minification/uglification I’m sad to report the codebase had only one single line of code)
  • Several hundred Angular components including directives, filters, controllers, services, etc.
  • 3 years of development (although Angular was introduced later into the cycle, which is important because it gave us insights into how it positively impacted the team)

About 6 months into the project we held a retrospective and decided to go with AngularJS and TypeScript based on a POC. After based on velocity and code quality we estimate between 2 – 4x speed of delivery of accepted code compared to before, and the team attributes a lot of that to Angular.

But What Is It?

If you want to look at it from a different angle, I believe Angular provides five fundamental services in an approach that considers testing a first-class citizen.

whatisnagular

  • Declarative expressions
  • Glue
  • A container
  • Templates (not just talking UI templates)
  • Tools

To learn more, watch the video:

 

And follow along with the slide deck (links to code samples are on the last slide):

Thanks!