Angular2 close

Well, not really ...

Angular is probably the most popular js framework. At least, not a single holivar is complete without mentioning it. And as we all already know, the second version of this framework is being prepared for release. Which, in essence, will be another tool designed for other purposes. I think, the following picture walking online will be appropriate.



But for now this is only an abstraction. The current state of the new Angular is the 40th iteration of the alpha version, which is available from October 9th. Of course, it is impossible to use the second Angular on products, but you can see what it is preparing. Actually, what I want to show.
')
Having searched several guides and tutorials on Angular 2.0, I can say with confidence that none of them is a worker - the changes between iterations are so serious. Even the “five-minute start” on the official website does not work with exact copying of the code and requires additional attention.

But to the delight of beginners, there is a sandbox for Angular 2.0, which includes a more or less stable iteration with all the dependencies that are necessary for optimal performance. This is the 20th iteration, which came out still far in the spring and how unsurprisingly does not contain some chips, which can be read in some manual. But for the demonstration, I think, that's enough.
What will change in the new Angular compared with the current version. In a nutshell, this is:

1. Shadow DOM support;
2. Using isolated contexts instead of scope (something similar to the syntax of controllerAs, but available out of the box);
3. The rejection of the concept of describing directives in favor of creating components for an application using classes and annotations (shadow DOM chips).

In addition, the developers decided to abandon the main features of Angular 1.x - two-way data binding. All this should lead to an increase in application performance on this framework.
All the rest of the material can be found on the net, which has a huge amount of it.

In order to compare two almost different frameworks, I decided to write the same template application. This is PhoneCat from the official website of Angular version 1.x. Reconsideration for the first version and creation on the second.
To make things easier for you, the application that will be written on the first version will be written in the 2015 or es6 language standard, since this is one of the standards that Angular 2.0 will support out of the box. This suggests that developers replace their own Angular modules of version 1.x with modern language standard modules.

And, actually, that's what happened ...

Bootstrapping

Or application initialization.



In Angular 2.0, the well-known ng-app directive disappears, which is necessary to establish the entry point into the application. Instead, you need to declare the main component (class App), which in turn will pull up the rest of the application components.

After importing all dependencies into the main “module” using Component and View annotations, we describe our component: which selector it will be available for, and which template will be substituted for it. The dependencies of all other components that will be applied on the main template are also indicated. For example, the For directive or its component, such as phoneItem. As a result, we need to get some tree-like hierarchy of components that are directly or indirectly dependent on the main one. And by the way, the question of organizing this hierarchy in the form of a file structure remains open, since it is not clear how to organize the application. Or to store components of different levels in the application hierarchy on the same file system level or to produce endless branches of directories?

For my sample applications, based on their complexity and best practices in project organization, I chose the following structures.



After all the declarations, we initialize the application with this bootstrap instruction (App);
It is worth noting that the initialization of the application on Angular version 1.x is not much different from the second version, except for the manipulations with the DOM.

Dependency Injection (DI)

Or dependency injection.

One of the main features of Angular version 1.x is the affordable out-of-the-box DI, which easily allows you to follow the divide and conquer principle when developing applications. When translating into a program code, complex entities of the real world can be deterministic and separated into different modules represented by objects that serve the benefit of the entire system. Such an approach at times facilitates the development and understanding of the concept of the application itself. Moreover, such systems are very easy to test, since there is no need to drag a huge chain of dependencies, but only be content with a single module.

But in this implementation there is, of course, a flaw. This is due primarily to minification and other optimization techniques. Since this DI relies on the parsing of the names of dependencies represented by strings, this leads to a crash with the above minification. Of course, there are many ways to work around this, but all this is not a pure concept of this framework.

Angular 2.0 does not have this problem. It's no secret that the new Angular supports TypeScript, which almost completely deprives it of the problems associated with non-strict typing.



In addition, Angular 2.0 has a unique feature in the DI area. This is the so-called child injector.
As already mentioned, applications on the new Angular will look like some hierarchical structure of components. And to facilitate the connection of parent components with children, child components will be able to inherit their dependencies. And now there is a mechanism by which the setting of this inheritance occurs. You can choose which dependencies will go further, and which ones are best left only at this level.
Besides all this, dependencies in the new version of the framework can also be loaded asynchronously.

However, the concept of introducing dependencies for the new Angular is extensive, and you can also find a lot of information about it on the web. One has only to say that the reasonableness of the new approach is getting closer and closer in quality to the server method of organization. Like, for example, in .NET or Java.

Templating

Or templating in applications.

If in the first version of the framework with templates everything is clear (we write a template for each of our conditional "components", and they are in turn substituted into the "socket", creating the illusion of many pages), then in the second version it is already a full-page one-page application. One input - many components with independent logic of work. Therefore, cases where without a directive is not enough in the first version, you have to decide differently in the second. Moreover, in the absence of two-way data binding, sometimes crutches have to be used with non-standard and creative solutions.



On the features of the syntax of declaring variables or using cycles for repeating constructions, I think it makes no sense to stop. This is all easily searched on the net.

And it is worth mentioning, as already mentioned, that the new Angular supports the shadow DOM. This opens up new opportunities in the area of ​​increasing productivity, since it is possible to assemble ready-made pages on the server side, freeing the client from thinking.

Routing

Or routing.

Now there is still not enough data on how the routing mechanism will look in the end, in the new version of Angular. But the concept of using components leaves its mark. It is known that routing will be very similar to the server-based organization method, which, for example, now uses Express for node.js, namely Router.

It will be possible to create several endpoints, they are also components or individual child applications that have different routing configurations. Now something similar can be done with the help of ui-router, which in its arsenal has the named ui-view, capable of simulating "components" in terms of the new version of Angular.

Directives, Services, Filters ...

As already mentioned many times for the second version, components are all. Only services, having migrated, became what, in fact, they should have been in the first version. In the new Angular components take on almost everything.
In the end, it turns out that the new Angular is the Angular, which was supposed to be existing. But why did the first version turn out different?

The fact is that when Angular version 1.x was created, almost five years ago, it was not intended for developers. It was a tool designed more for designers who had to simply and quickly build static HTML. Over time, this has undergone changes. Developers put a lot of effort to adapt this product to modern realities, constantly updating and improving it. We did everything to constantly stay “afloat”, since the needs of modern web applications were constantly changing. However, there are limitations to everything that exist because of the initial misunderstanding of the purpose of the product. Many of these limits concern performance and performance issues. To solve these problems, new approaches and strategies are needed.

PS Project sources can be found here and here .

PPS And of course, I would like to constructive criticism for this awkward excursion into the second Angular. Perhaps Sure, a more modern version of the framework is already being used in applications that I have not yet found. I would be happy to help in this.