Angular 2 is at
rc.5 as I write this. There is not quite a 2.0 release.
After nearly six months working with the various release candidates, here's my review of using using Angular 2 to largely re-build an Angular 1 app and integrate it into a mixed Angular 1 and 2 environment. This will give you a high level overview of what is different in building an app for Angular 2 and serve as a launch pad into your own research.
This article will be helpful if you are looking on starting a new project and trying to work out whether to start with Angular 2, migrate from 1 to 2, go React, or something else.
What is all this about Components?
Each generation of web framework brings something new to help with the more complex challenges we face in software engineering in the browser. Where Angular 1 arose to answer the question “How do I build a complete fully-featured single-page app?”, both Angular 2 and React both arrive to answer the additional question “How do I build a complete fully-featured single-page app in a maintainable way, using real software engineering?” Components just seem like the obvious next step as we build more complex interfaces made of many parts. React does this in a less bundled chose-your-own-bits way; Angular 2 in a bit more complete framework kind of way.
I'd say you really want to build component-based if you are doing anything more than making a quick one page website. You need a component-based approach If you are looking to re-use bits of your app, work with a style guide, or have more than trivial QA/testing.
So, your component ends up with an HTML template string compiled in and if you choose, an array of CSS strings compiled in. When the component is rendered by Angular 2, the component’s CSS is written to a head style tag and targeted with a unique attribute for this component only.
This does make it nice and easy to pick up a component, satisfy its dependencies and test it as an individual item.
Less a Global Soup
sometimes-dashed sometimeCamelcase naming system left a lot of room for duh! Errors, conflicts and confusion.
This has all changed. You have to be explicit in component metadata about dependencies, directives to be used in templates, services to be provided, input and outputs. Up until
rc.5 that could mean quite a lot of metadata for a non-trivial component, however this latest release candidate provides (and requires use of) an angular Module abstraction to collect a bunch of services, directives etc together. This looks good though I haven’t tried it yet.
Less global soup also means you can bootstrap multiple angular apps in one browser completely separately, or even bootstrap Angular 1 and 2 apps separately alongside each other. It it easy to confident about this with Angular 2 because it just doesn’t appear to leak stuff all over the browser global space.
And, biggest of all, the need to be explicit, especially with the inputs and outputs of components, means the rendering is targeted on what has changed only. Therefore it is faster. We haven't measurd it, but it looks much quicker than Angular 1 for the same complex pages.
Going Reactive: Promises replaced by Reactive RxJS streams
The next step beyond promises has been taken up. Most places where you’d expect a promise to be returned (eg http service calls) with an async. result will now provide an RxJS stream to subscribe to. At the basic level, this is like a Promise that can return multiple values in a stream. Like a
then called multiple times. There’s a brain wrench in here, a slight syntax change over promises, and done carefully you can end up with an app that has flexibility in the time domain. Connect it to websockets and it keeps changing as the inputs change.
An early design decision in this app we’re working on was to build a subject-based configuration system using RxJS Subjects. This means that we can in real-time change configuration inside the app and it will change form as it needs to. Change detection and publishing the change is all done by RxJS -- all our app has to do is subscribe to and listen for config changes. We use this config to propagate view changes, query results and display size changes amongst other things and the app just responds as it happens. There’s no writing code to make things dynamic as such. It will hurt the head initially if you haven't dealt with it before. This guide helps.
My Overall Review: The Gut Feel
Too many words already, so a bit of my gut feel to finish off. This is a good framework and at
rc.4 it is solid. It feels maintainable. It is expressive, in that it is easy to get stuff done in the templates and in the component TypeScript itself. There is a step up in seriousness -- be ready for that or go for something lighter-weight. It is fast compared to Angular 1. The reactive feel is enjoyable.
I’d pick it up for the next reasonably-sized project or maybe even a small one.