You need to learn Angular 2

Reading Time: 5 minutes

TLDR: Even if you don’t ever plan on using Angular 2 in a production webapp, you should learn it and here’s why.

It’s no secret that with the rate of usage and adoption of Angular 1.x is incredible.

Momentum chart
Momentum chart

The ease, accessibility, and expressiveness in web development today is incredible. With the increasing size of web developers (at least in the US), scores of frameworks are being constantly released (sometimes it feels like daily). It can be difficult to pick the right web development framework for an app.

The benefits of Angular 1.x are smatterd across the Internet. Although they are out of scope for this post (and honestly, a single Google search will answer better than I could), we’re going to focus on why Angular 2 matters and what it means for you and your team.

Angular 2 is not just another framework

Component-based web development is pretty much the future of web development. If you’re unfamiliar with the component development pattern, it basically emphasizes the separation of concerns throughout a given system (Wikipedia). For all the benefits of using Angular 1.x, it requires the entire stack to be written using Angular. Web components, on the other hand emphasizes the separation of concerns and allows segmentation within an app to be written independently of each other. If you’re familiar with the module-loading mechanism in Angular 1.x, this should come as no surprise. Angular 2 takes this a step further and requires nothing else to be written using Angular.

Angular 2 is more important than you think

Angular 1.x took great ideas from other frameworks and wrapped the process into a pleasant development environment. It does a great job of abstracting a lot of difficult parts of web development so allow us to focus on the functionality of our applications. Rather than dealing with module-loading orders, finding and injecting dependencies, and made building custom components incredibly easy, we could just focus on business logic. These benefits are no longer a convenient feature, but almost a requirement out of any thick-client web framework. With transpilers (such as BabelJS), we’re taken out of the ivory tower and can (and should) start using the pattern today.

Not only does Angular 2 keep this pattern, it makes it a requirement to core development. Take the very first example in the (official current) Angular 2:

import {bootstrap, Component} from 'angular2';
@Component({
  selector: 'my-app',
  template: '<h1>My first Angular 2 app</h1>'
})
class AppComponent {
  // application logic goes here
}
bootstrap(AppComponent);

There it is, a simple component completely isolated from every other part of our application. If we want to build and use another component, we simple do. There’s no ceremony, no major refactor to support the new functionality. It just works. This idea is fundamental to using the web component pattern and it is here to stay. Angular 2 makes learning and using the pattern easy.

Another really cool and important piece to notice from the example is that the business logic of our application is just JavaScript. There’s no magic in writing JavaScript objects (well… that’s exposed to us, the developer). It is just JavaScript. This makes things really easy to test, to write, to share and expose. Seriously easy.

Sharing code (aka letting someone else do the work)

If you’ve ever built any software worth it’s keyboard salt, you’ve likely used other libraries written by someone else. We’ve already discussed how Angular 1.x abstracts away complexities in software, component-based development not only allows us to write our pieces independently, it also allows us to use other components written by someone else in another framework (be it Angular or not). This is the real saucy promise. Find yourself needing an AutoSuggestion field or a credit card checkout form? Likely someone else needs it too and has written it.

The best software I write these days is the software I don’t write.

Polymer, WebComponents, React , and Angular 2 take this concept seriously (although in different ways). In our opinion, Angular 2 takes the best ideas of these other framework contenders and wraps them up the right way. We diver deeper into these concepts in ng-book 2.

Comparing Angular 2

TypeScript

Let’s get this out of the way first: Angular 2 does not require TypeScript.

So… while trying not to start a flamewar here, but types are awesome. Typescript, the markup language sits atop JavaScript that needs to be ‘compiled’ to JavaScript (browsers don’t yet know about TypeScript). A logical question to ask is why use TypeScript in the first place? How does it make sense to compile a language that can be executed without the pains of compilation?

The answer: error checking, documentation, and share-ability. Just as tests allow us to be confident that our app is running the way that we expect, types force us to only call our functions with expected types. For instance, take the following function:

// ES6 syntax
let computeTotal = (a, b) => a + (a * b)
// ES5 syntax
function computeTotal (a, b) {
  return a + (a * b);
}

Despite the terrible naming, it’s pretty obvious what this function does, right? We pass Numbers into the function and get out another number. Later in our app we realize it’s important to show significant bits of a number to a certain amount of precision (for instance in cents). Taking our example a bit further, let’s use our computeTotal function to compute the total our customers would pay including sales tax:

// ES6 syntax
const tax = 0.075; // Sales tax here in SF, California
let preTaxTotal = 10 + 32; // Two items in a shopping cart
const total = add(preTaxTotal, tax); // $45.15

Great, now our functionality is done, right? What happens if we don’t pass a number into the function, for instance a JSON object from a backend doesn’t give us a raw number, but instead returns a string — happens more often than I’d like to admit). When we call our add function, it’s not going to do anything different than what we told it to do and it’ll look kinda funny:

// ...
let preTaxTotal = "10" + "32"; // Two items in a shopping cart
const total = add(preTaxTotal, tax); // "103277.39999999999999"

Umm… not quite right. Typing can help us fix this problem:

// ES6 syntax
let computeTotal = (a: number, b: number) => a + (a * b)

Now when we call the computeTotal function, we can ensure that we’ll only send a number in (compiled with type–checking), so rather than showing our crazy string from above, we’ll throw an error instead. If we write a test to check on the usage, we can be sure that our computeTotal function works as expected.

TypeScript is not a requirement of Angular 2, but it is awesome.

Seriously, learn Angular 2

Although there is so much more to Angular 2 than we roughly covered here, we strongly recommend learning it. Not only will it help you and your team be faster and write better code, it will make you a better software developer overall. Invest the time into Angular 2. Seriously.