All of these advantages led more and more companies to rewrite their apps from their own solutions built on top of other libraries to AngularJS.
AngularJS is a great way to kickstart an app or MVP. With a rising popularity and more and more features coming to the core, the Angular team decided to rewrite the original framework, introducing Angular 2. Some say Angular 2 and AngularJS share only one thing: the name. There is a migration path (called
ng-upgrade) from AngularJS to Angular 2. However, Angular 2 is still a brand new framework sharing only some concepts of its predecessor.
The whole concept of application structure has changed in Angular 2. Previously it was the MVC framework that allowed you to create applications in the pattern of rather tightly coupled entities like controllers, views, services, etc. The whole architecture of AngularJS looked like this:
img – ng1 architecture
Now, the concept of directives has been pushed further to be much closer to the Web Components’ standard and React’s way of structuring the application. It is all about components in Angular 2. It means the whole application is now a component, which contains another set of components (which can be routable). It ends up with a tree-like structure:
img – ng2 architecture
The purpose of the Angular 2 application architecture is to create components that don’t depend on each other, which are as loosely coupled as possible.
The important thing is to introduce two ways of creating the components:
Having such a tree of components makes a big difference in performance. The purpose with AngularJS wasn’t to create the most efficient framework, but instead the easiest one to write in. As performance became more of a problem, Angular 2 was introduced to solve the issue. AngularJS had a digest cycle, which allowed changes to trigger updates up and down. Angular 2, on the other hand, has a directional graph of components that is always being checked once (due to one traversal path from the root to the leaves). According to the Angular core team members, these changes made Angular 2 applications work 3-10x faster than the same apps created with the latest AngularJS.
Angular is now more than ever considered a framework. The tool that the Angular team gave us is a complete solution. This is the opposite of React (which is just a library for rendering a component), but here we are able to create whole applications without using any third-party solutions. The framework provides us with the following blocks to use:
It all makes Angular not only a framework, but a whole platform.
We mentioned how Angular 2 is a first citizen framework. This is incredibly powerful, but has its own drawbacks. The problem is mainly zone.js, which is interfering with most of the asynchronous operations that are taking place in the browser. It can break your existing code if you’re trying to merge it with another framework or library. Due to this inconvenience, you should be very careful when trying to upgrade your existing non-Angular app step-by-step (but it is possible). On the other hand, it’s highly recommended you upgrade your AngularJS app (ng-upgrade will be helpful), and we cover this topic later in the book.
Now you should be convinced that there are two easy paths to start with Angular 2:
Another good question is: it is good for my team? As you can probably see, we’re going deeper and deeper trying to introduce even more tools and concepts. They make a small barrier at the beginning of a project, but they are beneficial in the long run. It also makes Angular 2 a solution to use with a big team. Most of the conventions that are there help with the maintenance of a complex application. It also makes Angular 2 a better tool for long-term projects.