Angular2 close

    Well, actually not really ...

    Angular is probably the most popular js framework. At least not one holivar can do without mentioning it. And as we all already know, the second version of this framework is being prepared for release. Which, in fact, will be another tool designed to solve other goals. I think the next picture will be in place, walking on the net.

    image


    But for now, this is just an abstraction. The current state of the new Angular is the 40th iteration of the alpha version, which has been available since October 9th. Of course, you can’t use the second Angular on the product, but you can see what it cooks. Actually, that is what I want to show.

    Having looked for several guides and tutorials on Angular 2.0, I can say with confidence that none of them are working - the changes between iterations are so serious. Even the “five-minute start” on the official website does not work with accurate copying of the code and requires additional attention.

    But to the joy of beginners, there is a sandboxfor 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 was released back in the distant spring and, as it is not surprising, does not contain some chips that can be read about in some manual. But for a demonstration, I think this is enough.
    What will change in the new Angular compared to the current version. In a nutshell, then this:

    1. Support for shadow DOM;
    2. Using isolated contexts instead of scope (something similar to the syntax of controllerAs, but accessible “out of the box”);
    3. Abandoning the concept of describing directives in favor of creating components for an application using classes and annotations (features of the shadow DOM).


    In addition, the developers decided to abandon the main feature of Angular 1.x - two-way data binding. All this should lead to an increase in application performance on this framework.
    All other material can be found on the network, of which there is a huge amount.

    In order to compare two practically different frameworks, I decided to write the same template application. This is PhoneCat from the official Angular site version 1.x. Rethinking for the first version and creating on the second.
    To make it easier for yourself, the application that will be written on the first version will be written in the 2015 language standard or es6, as this is one of the standards that Angular 2.0 will support “out of the box”. This suggests that developers are replacing their own Angular version 1.x modules with modern standard language modules.

    And, actually, this is what happened ...

    Bootstrapping


    Or application initialization.

    image


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

    After importing all the dependencies into the main “module” using the Component and View annotations, we describe our component: by which selector it will be available, and which template will be substituted in its place. It also indicates the dependencies of all other components that will be used on the main template. For example, the For directive or your component, such as phoneItem. As a result, we should get some tree-like hierarchy of components that indirectly or directly depend 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 store components of different levels in the application hierarchy on the same file system level or produce endless directory branches?

    For my template applications, based on their complexity and best practices for organizing projects, I chose the following structures.

    image


    After all the declarations, we initialize the application with this bootstrap (App) instruction;
    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 manipulations with the DOM.

    image


    Dependency Injection (DI)


    Or dependency injection.

    One of the main features of Angular version 1.x is the affordable DI out of the box, which allows you to easily follow the principle of “divide and conquer” when developing applications. Complicated entities of the real world when translated into program code can be determined and distributed into different modules represented by objects that serve the benefit of the whole system. This approach greatly facilitates the development and understanding of the concept of the application itself. Moreover, such systems are very easy to test, since you do not need to pull a huge chain of dependencies, but only be content with a single module.

    But in this implementation, of course, there is a drawback. This is due primarily to minification and other optimization techniques. Since this DI relies on parsing dependency names represented by strings, this leads to a breakdown in the above minification. Of course, there are many workarounds, but 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 loose typing.

    image


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

    However, the concept of dependency injection for the new Angular is extensive, and you can also find a lot of information about it on the net. One has only to say that the thoughtfulness of the new approach is getting closer and closer in quality to the server way of organization. As, for example, in .NET or Java.

    Templating


    Or templating in applications.

    If everything is clear in the first version of the framework with templates (we write a template for each of our conditional “components”, and they are inserted into the “outlet” in turn, creating the illusion of many pages), then in the second version this is a full-fledged one-page application. One input - many components with independent logic. Therefore, cases where you can’t do without the directive in the first version, you have to decide differently in the second. Moreover, in the absence of two-way data binding, sometimes you have to use crutches of non-standard and creative solutions.

    image


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

    And it's worth mentioning, as already mentioned, that the new Angular supports shadow DOM. This opens up new opportunities in the field of increasing productivity, since you can collect ready-made pages on the server side, freeing the client from thought.

    Routing


    Or routing.

    Now the data on how the routing mechanism will ultimately look like is still not enough 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-side method of organization, which now, for example, uses Express for node.js, namely Router.

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

    Directives, Services, Filters ...


    As 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, almost everything takes over the components.
    The result is that the new Angular is the Angular that the existing one should have been. 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 needed to simply and quickly build static HTML. Over time, this has undergone changes. The developers made a lot of efforts to adapt this product to modern realities, constantly updating it and improving it. They did everything to constantly stay “afloat”, as the needs of modern web applications are constantly changing. However, there are limitations to everything that exist due to an 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 foundhere and here .

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

    Also popular now: