Angular 2+: The Best Practices & Tips to Use the Best Modern Framework

Short description of the article

• Intro

• Features recommendations

• Project structure recommendations

• Performance recommendations

• Conclusion

Intro

Nowadays the modern frameworks provide a lot of instruments to make life of developers much more easier. The frameworks is aming to simplify code writting process and consequent maintenance of it. Nevertheless, the wide range of frameworks' options may affect the quality of the code, especially if it is a large scalable project. The reason of low quality code might be the neglaction of the guidelines for working with a particular framework. In other words, neglaction to follow the "style guide".

In fact, Angular is considered as one of the most powerful JavaScript frameworks for front-end development, but simulteniously, it is not a simple framework to use. This article, we will focus on 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

AngularCLI

Speaking about the modern usage of Angular, the Angular CLI is the one that need to be mentioned. This tool allows to improve the efficiency of working with the project for every developer. The possibilities of Angular CLI encompass the creation of a new project, the adjustment of its parameters, the extention of new features, serving and much more. To use these features it is necessary to install Node.js v8.9 or higher and NPM v5.5.1. 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 to 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

Check out the Angular CLI website in order to get additional information about techniques, tutorials and much more.

SASS

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 used 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

RxJs is tricky 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. Furthermore, you have to study the basic capabilities of RxJs, so you might see all the advantages of the reactive approach and simulteniously 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. They affect both the names of components, services, resolvers, directives, pipes, and their joint organization within a single project. Let us take a look at 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 which 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

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 optimizing output build. Check out ng build page for more information regarding this issue.

Conclusion

As you can see Angular framework is one of the most powerful JavaScript frameworks for front-end development, therefore knowing the tips and tricks regarding its implementation will help you to do a high-quality work at the end. The article was focusing on precise recommendations that we hope you find useful. In case you have any questions or suggestions, feel free to contuct us!