It’s not Angular 1
While the brand name and main developer team are the same, it is not Angular 1, meaning, it is a completely rewritten framework and thus migrating from 1.x to 2+ requires learning Angular 2+ as a new framework.
Learning and documentation
Angular 2+ has quite a steep learning curve compared to its rival from Facebook ReactJS. It has many templating things to know and remember making it hard at first, but when you get the hang of them, it becomes much easier. React, on the other hand, uses javascript for its templating which is more familiar outside of React world. When it comes to documentation, Angular has made it very difficult to become oriented in it. It feels more like a list of how-to guides. It also lacks complete documentation for the Angular JavaScript version (instead of TypeScript) which has been promised even before the stable release.
Versioning
If you are familiar with Angular, you will know that it used 1.major.patch where every major change introduced breaking/major update to the core, and it needed some changes to make it work again, but the patch was for bug fixes and patches. This all changed with Angular 2+, because now they (the Angular team) are using Semantic Versioning, thus making it major.minor.patch, where major means breaking change, minor means new features and patch means bug fixes. This means you are safe to update 2.x.y without worrying about things not working. This leads to the next thing to know.
It’s just Angular
With introducing semantic versioning, the term Angular 2 has lost the meaning that it had before the release caused by the complete rewrite. This allows us to keep sane package management for future Angular releases because now a lot of packages are prefixed ng2-*, angular2-* etc. The next major version will be Angular 4 instead of Angular 3, which will be released in March 2017. It is the Angular router already has the 3.x.x version and they decided to skip it to have a unified version for all Angular packages. Please don’t worry, this doesn’t mean a complete rework and relearning everything again; it will be backwards compatible with Angular 2.
Dependencies
While Angular 2+ is a fully-built framework, it still has some dependencies that are required to make it run. The main ones are RxJs and TypeScript. RxJs or Reactive Extensions for JavaScript is a library for Observable patterns. It is a different approach for data flow; it’s more like streams. No more promises, just observables with subscribers. TypeScript is a transpiler that adds static types (and much more) to JavaScript. While TypeScript is not required (Angular can run without it), it is highly recommended, because it adds so much to JavaScript and it is added to Angular 2+ by default. There is also needed a module loading library of your choice – SystemJS, Webpack or other.
Stability and guarantee
Building such a big framework as Angular requires a lot of tests to be written. This allows code change implementation to be safe, but that is not all that Angular provides. As you may know, Angular is developed by Google. What you might not know is that Angular 2.x is battle tested on all of Google’s apps that use Angular when change happens to the master branch on github. That guarantees even more tests and even more stability.
Compilation
Angular 2 introduced a feature called ahead-of-time (AoT) compilation. Before that, Angular code was only compiled in runtime, meaning that you have to provide a compiler with your JavaScript bundle, thus increasing its size and essentially the bootstrapping time of your application. It is called just-in-time (JiT) compilation. AoT allows you to compile and serve the code before the application is launched. This means that browsers have to be concerned only about rendering the app.
SEO
If your site is open for public use, an SEO (Search Engine Optimization) is a must-have in every page. You can still build a page without an SEO, but it won’t show up in search results as expected. When it comes to single-page applications, this is a very difficult task because not all search crawlers are waiting for your app to bootstrap or render. This is where Angular Universal comes in. It allows HTML to be rendered on the server side and then sent to the client. During the render, HTML gets replaced with your application code. There is one caveat though. Universal has only a few supported backend languages – NodeJS and .NET.
Conclusion
I think Angular 2 is great and my go-to framework. I have used React and Angular 1, but I still prefer Angular 2 over them. Here are a few suggestions from my experience:
- Use Webpack instead of SystemJS. SystemJS is a module loader only, while Webpack can also do bundling, minify app and run scripts on your app. Here’s a simple example; while using SystemJS my apps’ load time was ~4 seconds, then I added Webpack, which reduced it to 2.5 seconds. With Webpack it was easy to add production build, which load time is 0.6 second with AoT, tree shaking, minification and gzipping.
- Use starter repositories. For example, Angular2-webpack-starter. This will reduce the time to set up everything and be in production-ready mode.
- Update constantly. Angular 2 is still new, and being as big as it is, bugs are being found and fixed constantly.
- Be aware of AoT. While AoT is a great and powerful tool, it significantly differs from JiT. That means, not everything that works in JiT will work in AoT. Not all packages work in the AoT mode. Try to run the AoT mode build frequently.
- Try to use tools that come with Angular 2. RxJS and TypeScript will improve your JS coding style and overall quality.
- Don’t be afraid of not knowing. There is a lot to grasp, a lot to learn, but there is also a lot to gain and people who can help you. You can ask/search for help in StackOverflow or Gitter.
Angular 2 has come a long way to be where it is now, and I hope there is more to come.