Angular Best Practices and Standards

Angular is a TypeScript-based free and open-source web application framework. It is a complete rewrite of AngularJS.

This article outlines a few of the standards and best practices of Angular that you could use and experience when developing the applications.

1. Avoid ‘any’ type
2. Avoid Logic in templates
3. Use Lint Rules
4. Break large components into small reusable components
5. Documentation in Code
6. Use Environment Variables
7. Small functions
8. Maintain proper folder structure
9. Follow consistent Angular coding styles
10. Use Lazy Loading

Let’s go through this one by one!

1. Avoid ‘any’ type

Typescript is a type-checking language. But there may be some instances like where you need dynamic contents, where you don’t know the exact data type of some variables etc. In such cases, you can use the data type ‘any’ to tell typescript that the variable can be of any type.

But using ‘any’ always is not a good practice. Using ‘any’ tells the typescript to skip the type checking. This may expose your code to issues that are difficult to trace and debug which will cost you a lot.

You can minimize these issues by trying to declare variables or constants with a type other than ‘any’ whenever possible.

Another advantage of having good and proper type declarations in the application is that it makes refactoring easier.

2. Avoid Logic in templates

A template in an angular application defines the component’s view. It is very important to keep them neat and understandable.

If you add logic in the template, it becomes difficult for unit testing and will lead the application more prone to bugs. Even if you have a simple logic in your template, it is better to extract it out into its component.

3. Use Lint Rules

Linting forces an application codebase to be cleaner and more consistent. Lint rules will ensure the readability of the code. Having lint rules will give a nice error when you do something that you should not be. It is widely supported across all modern editors and also possible to customize with your own lint rules and configurations. You can apply lint rules for Typescript and SCSS.

Before Angular 11, linting was supported via a library called TSLint. However, the TSLint has been deprecated. Fortunately, thanks to tools from the Angular ecosystem, migrating to ESLint has become easier.

ESLint is compatible with both JavaScript and TypeScript. This makes jumping between the two languages a bit easier, especially for new developers.

tslint, eslint and stylelint have many inbuilt options.

Some lint rules even come with fixes to resolve the lint error.

4. Break large components into small reusable components

If there are parts which you need in many places in the code in the application, extract the parts which can be reused in the component and make it a new one. Make the component as dumb as possible where the component does not contain any special logic in it and operates purely based on the inputs and outputs provided to it.

As a general rule, the last child in the component tree will be the dumbest of all. (You may have to use property and event bindings to pass inputs to the components and receive output events from the components, respectively.)

This will be very effective for many reasons.

If the UI has to be changed at any point, there is no need of going around and changing the UI code in all the places where it is used. Instead, you can change the code in the common component created.

Also, It is very difficult to debug, manage and test Large components. So If the component becomes large, break it down into more reusable smaller components, so that you can easily manage, maintain and debug with less effort. Reusable components reduce duplication of code, therefore, making it easier to maintain and make changes.

5. Documentation in Code

The same developers will not always be involved continuously with the same project they work on. So always document the code as much as possible. It will help the new developers involved in a project to understand its logic and increase readability.

For methods, you need to define them using multi-line comments on what task the method actually performs and all parameters should be explained.

6. Use Environment Variables

The default environments in angular are development and production environments. Angular has different environment configurations to declare individual variables for each of the different types of environments. It is possible to even add more environments, or add new variables in existing environment files.

E.g:

Dev environment -> environment.ts

Production environment -> environment.prod.ts

The environment variables are applied automatically from the specified environment file during the application build.

7. Small functions

Always try to define small functions which would have a limit of no more than 75 lines.

Advantages of using small functions are that it is easier to test and reuse since they may probably do one thing and serve one purpose. Also they are easier to maintain and read.

8. Maintain proper folder structure

Creating and Maintaining a proper folder structure is an important factor developers should consider before initiating any angular project. The folder structure should be easily flexible to adapt new changes throughout development.

Below image shows one of such example folder structure.

9. Follow consistent Angular coding styles

It is better to follow a set of rules as much as possible in order to have the project with the proper coding standard and a best user experience. Here are a few out of them.

• Files should be limited to maximum 400 lines of code.
• Define small functions which are limited to not more than 75 lines.
• If the values of the variables are not varying, then declare it with ‘const’.
• Use dashes to separate words in the descriptive name and use dots to separate the descriptive name from the type.
• Use lower camel case to name properties and methods.
• Do name an interface using upper camel case.
• Use upper camel case when naming classes.

10. Use Lazy Loading

Lazy loading is the process which loads some features of the Angular application only when their routes are navigated for the first time. Lazy loading will load something only when it is used. This helps to improve the application’s performance and helps keep initial bundle sizes smaller, which can decrease the application load time by not loading the modules that are not used.

So, try to lazy load the modules in an Angular application whenever possible.

For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop your custom web app using Angular, please visit our technology page.

Content Source:

1. medium.com