Illustration Angular 2+: What are the best practices & tips when using one of the best modern frameworks?

Angular 2+: What are the best practices & tips when using one of the best modern frameworks?

Today modern frameworks provide a lot of instruments and make life of developers easier and the code written by them more understandable and maintainable. But the abundance of opportunities sometimes adversely affects the quality of the code, especially if it is a large scalable project. One of the reasons for this effect is that developers don't follow the guidelines for working with a particular framework. Such recommendations in the slang of programmers are known as “style guide".

Angular is rightly considered one of the most powerful JavaScript frameworks for front-end development, but at the same time, it can not be called a simple framework to learn and use. In this article, we will consider the best practices of modern Angular development, with which high-quality web applications are created.

Also read our article: Creating Basic Angular Application in 10 minutes: Step-by-Step Guide - Part 1

1. Features recommendations

features

AngularCLI (https://angular.io/cli)

Speaking about the use of Angular's modern possibilities, it”s Angular CLI that comes to mind first of all. Indeed, this tool allows the developer to improve the efficiency of working with the project significantly. The possibilities of Angular CLI encompass the creation of a new project, the adjustment of its parameters, the addition of new features to the project, serving and much more. To use these features it is necessary to install Node.js v8.9 or higher and NPM v5.5.1 or higher in the system. Next, you should install Angular CLI to the system globally with the next command:

npm install -g @angular/cli

After that, Angular CLI will be available for use. Here is an example of commands for creating and running a development server for the new Angular application:

ng new new-project-name
cd new-project-name
ng serve

Full information can be found on the official website (https://cli.angular.io/).

SASS (https://sass-lang.com/)

Another best practice of Angular development is using SASS for components styling. Firstly, there is a lot of well-known benefits of using it: variables, mixins, functions, etc. Secondly, SASS preprocessor is the default for many popular 3rd-party-libraries for Angular, such as Material Components, which also use it to manage the themes of the design. By default, when a new project is created using Angular CLI, it sets CSS for styling.
To set SASS as default for it you need to run the next command:

ng new new-project-name --style=scss

Angular Dependency Injection

When Angular 7 came, it brought a new way to provide injectable services. Earlier services have been provided in NgModule only (preferably in the Core module). Now, when a new service is generated with Angular CLI, it is automatically provided in the root module, using "provideIn" key of @Injectable() decorator.

@Injectable({
  	providedIn: 'root'
})

"Root" is the default value which was sat by Angular CLI and could be replaced with any NgModule of application.

RxJs (https://rxjs-dev.firebaseapp.com/)

RxJs is difficult to learn and to understand. But Angular widely uses it. In order to apply the methods of reactive programming successfully, the developer should start thinking in terms of streams, not actions. And as soon as you study the basic capabilities of RxJs, you will see all the advantages of the reactive approach and understand why this library plays such a significant role in the Angular framework.

Briefly, it uses an observer pattern that involves the presence of a certain subject and a number of observers. The observers subscribe to the subject events (change of state), and when it happens, they respond by calling their methods. Ultimately, RxJs makes it possible to create a more readable and maintainable code.

Also read our article: Optimization of the Angular 2+ app download speed

2. Project structure recommendations

For best maintenance, Angular projects have a typical project structure, components naming and must comply with the uniform rules. These rules have been written in details by Angular Team in the Style Guide section of the Official Website (https://angular.io/guide/styleguide). They affect both the names of components, services, resolvers, directives, pipes, and their joint organization within a single project. Let us talk about one of the most useful recommendations for project organization.

First of all, we have to create a correct structure of Angular modules. In the style guide, we can read about the app, shared, core and feature modules.

App module - the main (root) module of every Angular application. The existence of this module is defined by the philosophy of Angular, which says, the application has to have at least one root module.

Core module - another significant module of the Angular application. It is used for importing 3rd-party-libraries, providing singleton services, etc. In general, the Core modules should make the App module more readable, taking over part of the functional.

The purpose of the Shared module is for import and re-exporting reusable components, pipes, directives, and Angular modules, which could be used many times. Using it, you can get rid of the need to import a number of modules into the module of some features, importing instead only one Shared module.

Also, the Angular team recommends creating its own feature modules for each independent feature. This makes the project easily supported, allows you to formalize the structure of components more accurately and to make the component available for lazy loading.

3. Performance recommendations

performance

Angular since version 2+ gives developers a wonderful opportunity to use lazy loading modules. Its mechanism involves downloading the component modules as they become necessary as a result of the user's routing navigation. Using lazy loading allows developers to minimize the size of the originally downloaded application, limiting them to only those components, that are used on the page which is loaded. All other components that are available by routing will be lazily loaded after navigating the corresponding routing. In cases with large scalable projects, this approach gives a significant gain in application performance and minifies download time.

Below there is an example of a code that describes the routing configuration with a lazy loaded Products module.

const routes: Routes = [
  	{
    		path: 'products',
    		loadChildren: 'app/products/products.module#ProductsModule'
 	 }
];

Another way to get the best performance of the Angular application is production build. Angular CLI only generates a development build script (with "ng build" script) when generating a new project by default. To get more productive build we have to add to package.json next script:

"build:prod": "ng build --prod --build-optimizer --vendor-chunk" 

These flags modify a lot of build options for minifying and optimizing output build. More info about it can be found here (https://angular.io/cli/build).

Rate this Article

( ratings, average: out of 5)

Twitter Facebook Google+