Angular: state of affairs in 2019
Now summer is the time of year when various conferences and other events are held all over the world. Programmers at this time literally floods with new information, which is usually quite difficult to assimilate.
The front-end universe resembles a train that moves non-stop. We all know how difficult it is to keep up with this train. Watching conference videos takes a lot of time, and as a result, it’s completely understandable that many of us, after office work, prefer to watch movies on Netflix.
')
The author of the material, the translation of which we publish, says that this is why I decided to help everyone who wants to understand the Angular innovations. Here we will talk about the current state of Angular, about the fresh features of this framework, about current trends.
In accordance with the data provided on ng-conf 2019 by Angular development team member Brad Green, the scope of Angular use increased by about 50% over the year!
It is clear that this data could be affected by the fact that many projects are in the process of transition from Angular 1.X to more recent versions of the framework. But 50% is still an impressive figure.
Angular doesn't grow as fast as Svelte or Vue. This framework is not as widely used as React. But, in contrast to what can be read about other frameworks on resources like Reddit or Twitter, Angular is in good health and is used by millions of developers and teams.
Even taking into account the fact that Angular has a lot of useful built-in tools, created by the main development team, its ecosystem, which the community of enthusiasts contributes to the development of, is extremely large. She is also represented by projects of very high quality.
Together with the base framework, you can use a lot of interesting tools. Namely, we are talking about the following:
In the following sections we will focus on some particularly interesting tools that can be used in the development of Angular-projects.
These are not empty words. Here you can find a good story about how the BlueWeb project, serving half a billion users annually, was updated from Angular 7 to Angular 8 in one working day. This is an impressive achievement, considering that the transition from the second to the fourth version of Angular took 30 days from the same project.
This proves the great value of the Angular CLI. The use of this tool can raise the productivity of work to a level that I personally have not met before.
Nowadays it becomes very difficult to imagine working without an Angular CLI.
Angular Schematics is something that Angular developers are likely to use on a daily basis. For example, I am sure that you often use this command:
It is based on the Schematics tool built into the Angular CLI.
It may be news to you that developers have the opportunity to create their own Schematics rules. Their use facilitates working with frequently used code fragments.
API Builders allows you to extend or supplement existing commands . For example, you can create a team that performs tests using Jest and Cypress, rather than using Jasmine and Protractor. You can, for example, use an alternative linter.
At the time of this writing, Angular 8 has already been released, containing various improvements and new features.
There is nothing here that would seriously change how this framework is used. Such a statement regarding a new version of an instrument is usually perceived as good news. But in Angular 8 there are many improvements that are not visible, so to speak, "to the naked eye." Thanks to them, Angular-projects are becoming smaller and faster. These improvements make the development of Angular applications even more enjoyable than before. In addition, in the new version of the framework, there is an almost ready-to-use new rendering system.
“Differential loading”, judging by the name of this technology, may seem like something very complicated, but in fact it is not. In a nutshell, thanks to this feature, the compiler generates two bundles. One - for modern browsers. It does not have a polyfill code. The second is for older browsers.
The newest browsers download modern bundles. And old browsers that need polyfills download assemblies designed specifically for them.
This is a very useful innovation. Since most users are very likely to work in recent browsers, this leads to the fact that polyfill bundles, larger than modern bundles, are used by only a small number of users.
You, probably, have already heard about web workers, so we will not deal with the essence of this technology here. But you may not know how easy it is to integrate web workers into applications in the new release of Angular. Here you can read more about this.
The CDK is a toolkit released by a team that develops Angular components. In it you can find abstractions used by Angular Material , which are independent of styles.
For example, thanks to the CDK, the developer has directives that allow the following features to be implemented:
The CDK is an extremely useful tool due to the fact that most applications can use high-quality widespread abstractions, each of which implements only limited functionality. This is much better than the widespread and not always justified use of full-scale components. Angular Material is a wonderful set of components, but the strength of the CDK is that this tool allows the developer to create their own components from the basic building blocks.
Ivy is a very interesting new development, which is a rendering engine. Work on the Ivy has not yet been completed, by default this engine is still disabled. But, starting with Angular 7, it can already be turned on and used. Ivy is expected to be the main rendering engine in Angular 9.
Here's what to expect from the full-featured Ivy engine:
If we talk about debugging, here is a screenshot where you can see the trigger point in the Chrome console.
Debugging code
As you can see, the
Ionic is a mobile application development framework. Although its basic components are created using Stencil, they give the developer abstractions that allow Ionic to be used with Angular and with other frameworks.
NativeScript is a native mobile application development framework, similar to React Native. It features deep integration with Angular — along with Vue support and the ability to use it to develop in pure JavaScript. Unfortunately, my experience with him was not particularly successful. I can’t put it on par with React Native. However, if you are seriously engaged in the development of mobile applications - try NativeScript.
Jasmine and Protractor need no introduction. These are standard tools for testing Angular applications. They are well tested by time, they are regularly updated, and they work great with Angular.
Testing Angular-based applications using Jest and Cypress was made possible by new tools based on the API Builders, part of the Angular CLI.
Jest is a unit testing framework based on Jasmine. It is developed in Facebook. This is a standard framework for testing React projects, it is widely distributed due to its speed. Many prefer to use it, rather than Jasmine. If you are also inclined towards Jest, you can now use it to test Angular applications.
Cypress is a highly respected framework for end-to-end application testing. The developer community does not accidentally treat him very well. It does not depend on Selenium or WebDriver. Cypress allows you to work with command logs, can manage network traffic. It is quite stable, so you can expect that the results obtained with its help will be quite understandable and predictable.
Angular Testing Library is a toolkit for testing user interface components with a focus on replaying user actions.
This means that this library pushes the programmer to ensure that he does not work with the components programmatically. It aims to test the behavior of components. The library performs the actions that users normally perform.
For example, when working with tools from this library, such constructions are not used:
Instead, the user's natural behavior is simulated:
NgRx is a library for managing the state of applications, created under the influence of ideas embedded in Redux. NgRx is most likely the most common state management library in Angular-development. The name of the library suggests that it uses RxJs streams seriously.
NGXS is an alternative state management library in Angular applications, similar to Redux. If we compare NGXS and RxJS, then it turns out that the peculiarities of NGXS are that it uses many classes and decorators. This is done to reduce the volume of the template code. Probably, this feature of NGXS can be decisive in choosing a library for managing a state if the one who is looking for such a library is used to using classes.
Akita is a state management library developed by Datorama. This library is also based on RxJS. If we compare it with the previous two libraries, it turns out that its feature is that it can also be used in projects in which Angular is not used. This means that the choice of the Akita library, in the long term, may lead to improved opportunities for reusing the project code.
I can give a positive answer to the question in the heading of this section. It all depends on whether you like libraries that resemble Redux, and whether the project needs a library to manage the state. If desired, you can create services that store state using standard RxJS tools.
StoryBook is not really a library of UI components. This is a tool that allows you to create isolated components and allows you to research components and their variants.
This is a great tool. Previously, it was available only to React-developers. I envied them then. But now Angular developers can use it, so I just can not mention it.
Here we will say a few words about the notorious Angular Material library, which gives a modern developer a pleasant set of components designed for the latest Angular version.
Firebase is an application development platform owned by Google. The consequence of this is that there is an official library for Firebase and Angular - AngularFire . This library uses observable RxJS objects for streaming data. It is deeply and efficiently integrated with Angular.
Perhaps you think that the pleasure of working with GraphQL is available only to React-programmers. If so, then you are mistaken. There is a version of the Apollo library for Angular. What can be created using this library is an excellent alternative to Firebase. Apollo is suitable for those who prefer to work with GraphQL.
NestJS is a Node.js web framework designed for developing server applications. From the examples to him it can be concluded that he was greatly influenced by the basic concepts of Angular. These are modules, controllers, conveyors, and so on. If you like Angular, then you will probably like NestJS.
If you are using Nx Workspaces , then creating a full-stack framework for an application based on Angular and NestJS is a matter of executing one command in the console.
As a result, it can be said that the vast ecosystem that has developed around Angular offers to everyone, high-quality and reliable tools for solving a wide range of tasks.
Of course, I can not tell here about dozens of my favorite libraries and tools. If I did this, this material would be infinite. But I hope that this article provided you with an overview of the phenomenon of modern web development, which is called “Angular”. I hope that here you have found something that, in the future, you can use in your projects.
Dear readers! What do you like (or don't like) most about Angular 8?
The front-end universe resembles a train that moves non-stop. We all know how difficult it is to keep up with this train. Watching conference videos takes a lot of time, and as a result, it’s completely understandable that many of us, after office work, prefer to watch movies on Netflix.
')
The author of the material, the translation of which we publish, says that this is why I decided to help everyone who wants to understand the Angular innovations. Here we will talk about the current state of Angular, about the fresh features of this framework, about current trends.
About the growing use of Angular
In accordance with the data provided on ng-conf 2019 by Angular development team member Brad Green, the scope of Angular use increased by about 50% over the year!
It is clear that this data could be affected by the fact that many projects are in the process of transition from Angular 1.X to more recent versions of the framework. But 50% is still an impressive figure.
Angular doesn't grow as fast as Svelte or Vue. This framework is not as widely used as React. But, in contrast to what can be read about other frameworks on resources like Reddit or Twitter, Angular is in good health and is used by millions of developers and teams.
Angular has a large and dynamic infrastructure.
Even taking into account the fact that Angular has a lot of useful built-in tools, created by the main development team, its ecosystem, which the community of enthusiasts contributes to the development of, is extremely large. She is also represented by projects of very high quality.
Together with the base framework, you can use a lot of interesting tools. Namely, we are talking about the following:
- Deep integration with excellent, dynamic tools. Among them are TypeScript and RxJS. The development of these technologies has a direct positive impact on Angular.
- Different types of libraries for managing the status of applications.
- Means for analyzing and improving the quality of the code. Such as Codelyzer .
- Libraries of user interface elements, components, directives, pipelines, and so on.
- Large selection of plugins for different IDE.
- Libraries and frameworks for testing applications.
- High-quality, detailed documentation, work on which involved and members of the community, and the team Angular. This includes practical advice, manuals, training materials, books, video courses. Although this is the last item on this list, it is nonetheless as important as the others.
In the following sections we will focus on some particularly interesting tools that can be used in the development of Angular-projects.
Angular cli
â–ŤAngular CLI and the extremely simple process of updating Angular
These are not empty words. Here you can find a good story about how the BlueWeb project, serving half a billion users annually, was updated from Angular 7 to Angular 8 in one working day. This is an impressive achievement, considering that the transition from the second to the fourth version of Angular took 30 days from the same project.
This proves the great value of the Angular CLI. The use of this tool can raise the productivity of work to a level that I personally have not met before.
Nowadays it becomes very difficult to imagine working without an Angular CLI.
â–ŤSchematics tool
Angular Schematics is something that Angular developers are likely to use on a daily basis. For example, I am sure that you often use this command:
ng generate component my-component It is based on the Schematics tool built into the Angular CLI.
It may be news to you that developers have the opportunity to create their own Schematics rules. Their use facilitates working with frequently used code fragments.
â–ŤAPI Builders
API Builders allows you to extend or supplement existing commands . For example, you can create a team that performs tests using Jest and Cypress, rather than using Jasmine and Protractor. You can, for example, use an alternative linter.
New interesting features of the framework
At the time of this writing, Angular 8 has already been released, containing various improvements and new features.
There is nothing here that would seriously change how this framework is used. Such a statement regarding a new version of an instrument is usually perceived as good news. But in Angular 8 there are many improvements that are not visible, so to speak, "to the naked eye." Thanks to them, Angular-projects are becoming smaller and faster. These improvements make the development of Angular applications even more enjoyable than before. In addition, in the new version of the framework, there is an almost ready-to-use new rendering system.
â–Ť Differential load
“Differential loading”, judging by the name of this technology, may seem like something very complicated, but in fact it is not. In a nutshell, thanks to this feature, the compiler generates two bundles. One - for modern browsers. It does not have a polyfill code. The second is for older browsers.
The newest browsers download modern bundles. And old browsers that need polyfills download assemblies designed specifically for them.
This is a very useful innovation. Since most users are very likely to work in recent browsers, this leads to the fact that polyfill bundles, larger than modern bundles, are used by only a small number of users.
â–ŤWeb Workers
You, probably, have already heard about web workers, so we will not deal with the essence of this technology here. But you may not know how easy it is to integrate web workers into applications in the new release of Angular. Here you can read more about this.
CD CDK Toolkit
The CDK is a toolkit released by a team that develops Angular components. In it you can find abstractions used by Angular Material , which are independent of styles.
For example, thanks to the CDK, the developer has directives that allow the following features to be implemented:
- Work with objects in the style of "Drag-and-Drop."
- Use text areas that automatically resize.
- Popup windows.
- Virtual Scrolling.
The CDK is an extremely useful tool due to the fact that most applications can use high-quality widespread abstractions, each of which implements only limited functionality. This is much better than the widespread and not always justified use of full-scale components. Angular Material is a wonderful set of components, but the strength of the CDK is that this tool allows the developer to create their own components from the basic building blocks.
Ivy rendering engine
Ivy is a very interesting new development, which is a rendering engine. Work on the Ivy has not yet been completed, by default this engine is still disabled. But, starting with Angular 7, it can already be turned on and used. Ivy is expected to be the main rendering engine in Angular 9.
Here's what to expect from the full-featured Ivy engine:
- Reducing the size of bundles.
- Debugged templates.
- Faster build projects, accelerate their testing.
- Correction of existing errors.
If we talk about debugging, here is a screenshot where you can see the trigger point in the Chrome console.
Debugging code
As you can see, the
ngForOf directive gives us information about the passed value.Angular and mobile platforms
â–ŤIonic
Ionic is a mobile application development framework. Although its basic components are created using Stencil, they give the developer abstractions that allow Ionic to be used with Angular and with other frameworks.
â–ŤNativeScript
NativeScript is a native mobile application development framework, similar to React Native. It features deep integration with Angular — along with Vue support and the ability to use it to develop in pure JavaScript. Unfortunately, my experience with him was not particularly successful. I can’t put it on par with React Native. However, if you are seriously engaged in the development of mobile applications - try NativeScript.
Testing
â–ŤJasmine and Protractor
Jasmine and Protractor need no introduction. These are standard tools for testing Angular applications. They are well tested by time, they are regularly updated, and they work great with Angular.
â–ŤJest and Cypress
Testing Angular-based applications using Jest and Cypress was made possible by new tools based on the API Builders, part of the Angular CLI.
Jest is a unit testing framework based on Jasmine. It is developed in Facebook. This is a standard framework for testing React projects, it is widely distributed due to its speed. Many prefer to use it, rather than Jasmine. If you are also inclined towards Jest, you can now use it to test Angular applications.
Cypress is a highly respected framework for end-to-end application testing. The developer community does not accidentally treat him very well. It does not depend on Selenium or WebDriver. Cypress allows you to work with command logs, can manage network traffic. It is quite stable, so you can expect that the results obtained with its help will be quite understandable and predictable.
â–ŤA set of Angular Testing Library tools
Angular Testing Library is a toolkit for testing user interface components with a focus on replaying user actions.
This means that this library pushes the programmer to ensure that he does not work with the components programmatically. It aims to test the behavior of components. The library performs the actions that users normally perform.
For example, when working with tools from this library, such constructions are not used:
myComponent.onClick(); Instead, the user's natural behavior is simulated:
const { getByText, click } = await render(CounterComponent, { componentProperties: { counter: 5 } }); click(getByText('+')); Condition management
â–ŤNgRx
NgRx is a library for managing the state of applications, created under the influence of ideas embedded in Redux. NgRx is most likely the most common state management library in Angular-development. The name of the library suggests that it uses RxJs streams seriously.
â–ŤNGXS
NGXS is an alternative state management library in Angular applications, similar to Redux. If we compare NGXS and RxJS, then it turns out that the peculiarities of NGXS are that it uses many classes and decorators. This is done to reduce the volume of the template code. Probably, this feature of NGXS can be decisive in choosing a library for managing a state if the one who is looking for such a library is used to using classes.
â–ŤAkita
Akita is a state management library developed by Datorama. This library is also based on RxJS. If we compare it with the previous two libraries, it turns out that its feature is that it can also be used in projects in which Angular is not used. This means that the choice of the Akita library, in the long term, may lead to improved opportunities for reusing the project code.
â–ŤCan I just take RxJs?
I can give a positive answer to the question in the heading of this section. It all depends on whether you like libraries that resemble Redux, and whether the project needs a library to manage the state. If desired, you can create services that store state using standard RxJS tools.
UI component libraries
â–ŤStoryBook
StoryBook is not really a library of UI components. This is a tool that allows you to create isolated components and allows you to research components and their variants.
This is a great tool. Previously, it was available only to React-developers. I envied them then. But now Angular developers can use it, so I just can not mention it.
â–ŤAngular Material
Here we will say a few words about the notorious Angular Material library, which gives a modern developer a pleasant set of components designed for the latest Angular version.
Backends for Angular Applications
â–ŤFirebase
Firebase is an application development platform owned by Google. The consequence of this is that there is an official library for Firebase and Angular - AngularFire . This library uses observable RxJS objects for streaming data. It is deeply and efficiently integrated with Angular.
â–ŤGraphQL
Perhaps you think that the pleasure of working with GraphQL is available only to React-programmers. If so, then you are mistaken. There is a version of the Apollo library for Angular. What can be created using this library is an excellent alternative to Firebase. Apollo is suitable for those who prefer to work with GraphQL.
â–ŤNestJS
NestJS is a Node.js web framework designed for developing server applications. From the examples to him it can be concluded that he was greatly influenced by the basic concepts of Angular. These are modules, controllers, conveyors, and so on. If you like Angular, then you will probably like NestJS.
If you are using Nx Workspaces , then creating a full-stack framework for an application based on Angular and NestJS is a matter of executing one command in the console.
Results
As a result, it can be said that the vast ecosystem that has developed around Angular offers to everyone, high-quality and reliable tools for solving a wide range of tasks.
Of course, I can not tell here about dozens of my favorite libraries and tools. If I did this, this material would be infinite. But I hope that this article provided you with an overview of the phenomenon of modern web development, which is called “Angular”. I hope that here you have found something that, in the future, you can use in your projects.
Dear readers! What do you like (or don't like) most about Angular 8?
Source: https://habr.com/ru/post/459298/
All Articles