Angular 2 Alpha - First Impressions
19 May 2015
Having (mostly) enjoyed using Angular 1.x on a couple of projects at my previous job, and using TypeScript on some side projects, I was thrilled to find out that the Angular and TypeScript guys were teaming up for the next major release of Angular.
Naturally I couldn’t wait to get started with the alpha of Angular that was recently released by the team. Now that its a snap to get up and running, I had no excuse not to try it by building out the MVP of my next startup. I present to you…
There are plenty of guides out there on getting started, so I won’t go into those details. Instead I want to tell you about some of the awesomeness that you can expect and some of the issues that you might run into while running the alpha.
It’s Not Angular
The first thing I noticed is that it feels almost nothing like Angular 1.x. While a lot of people have said this is a bad thing, I see it as a huge improvement. I have to commend the team on having the guts to really throw almost everything away (including backwards compatibility… big time) to build something much simpler to use and more intuitive. Writing Angular 2 code just feels a lot more right. Everything feels less magic — although there is still some magic in the dependency injection and annotations, it’s more obvious what is going on. It feels like writing normal JavaScript, and the addition of ES6 classes and type annotations thanks to TypeScript make reasoning about the code much easier.
While I do sympathise with those maintaining large Angular 1.x codebases, I think taking the time to upgrade will be well worth it.
Normal Classes
Services that provide data to your application no longer need to be created
with the special angular.factory function, they can simply be written as standard
ES6 classes. This means code will be much more interoperable with other frameworks
if you choose to use them. Where it felt like Angular 1.x owned your whole application,
this no longer seems to be the case in Angular 2.
Writing a component (essentially a directive with a view) now involves creating a normal ES6 class and attaching annotations for the Angular specific things, such as templating.
More Sensical Templating
The new templating language is vastly different from Angular 1.x, but also vastly easier to learn. While reading markup in Angular 1.x, it could often be confusing knowing whether an attribute was an expression or a value. The new templating notation makes this blindingly obvious:
Attributes attribute="value"
Properties [property]="expression"
Events (event)="expression"
I believe a lot of the freaking out during the original announcement was due to these changes, but in reality this will probably be the easiest part to migrate.
Everything is a Component
Clearly a lot of effort has gone into thinking through the component model and how it will integrate with Web Components when they become a thing. The idea is that you compose your application with components, whether those are one-off or reusable components. While Angular 1.x had directives and controllers and the associated confusion over which one to use, Angular 2 throws that away and says just use components.
It seems they have taken a lot of inspiration from ReactJS in this sense. Although I haven’t tried, I imagine it would not be much of a stretch to use Angular 2 and ReactJS components side-by-side.
It’s Still Alpha
Angular 2 is still very early Alpha, but it is good enough to build some working prototypes with. A few of the things that you might run into getting started now:
- A lot of the APIs are still changing, so a lot of examples online from even just a few months ago already don’t work.
- The TypeScript type definitions are not yet complete, which means sometimes
the TypeScript compiler will complain about a module’s class not existing
even though it does. Currently it seems only the
@Componentand@Viewannotations are defined in the definitions file, while@Directive,@Injectetc are still unrecognised. - Dependency injection doesn’t seem to be working for me, but I was still able
to instantiate the required class with the standard
new DataStore()and use that instance without any issues.
In Summary
Yes, Angular 2 is really different from Angular 1.x, but that is a good thing. Learning Angular 2 from scratch will be significantly easier than learning Angular 1.x from scratch. So if you’re willing to throw away a lot of knowledge and a lot of code for the sake of sanity, I believe it to be a worthy cause.
You can find the source code to Angular 2 Googly Eyes on GitHub
