How to design, implement and maintain a large-scale enterprise Angular application

Creating a single Angular application with Angular CLI is a piece of cake. But what makes an application a scalable, maintainable and reliable app for the long term?

In this post, I will talk about how to use TypeScript properly, useful third-party libraries (Nrwl/nx and NgRx Store) and some Angular tweaks and optimizations to build an enterprise Angular app.

Let’s get deep into it.

Read more: 8+1 Tips and Tricks for Building Large-Scale Enterprise Angular Applications

TypeScript

Typescript2

Before we go ahead with Angular tweaks, we should talk about TypeScript. It’s a strict syntactical superset of JavaScript which adds static typing to the language and is designed for developing large applications.

Type everything

As it’s mentioned, one of the main features is typing of variables. This is the key to maintaining an application in long-term. When you or your colleague look back to the code after weeks or months, you’ll immediately know what’s stored in a variable and what the parameters and the return value are of a function.

Now you know, typing is important. Moving forward, you may experience that few of the types are strings, but a fixed set of possibilities.

Strings should be safe (or use enums) if possible

For example, the input of colors may contain only “red”, “white” or “green”. For this case, you can use string values as a type like the following:

@Input()
colors: 'red' | 'white' | 'green';

Or

type COLORS = 'red' | 'white' | 'green';
@Input()
colors: COLORS;

Or you can use [string or number] enums in TypeScript, for example:

enum COLOR {
  RED = 'red',
  WHITE = 'white',
  GREEN = 'green',
}
@Input()
colors: COLORS;

Transform your API model

To take full advantage of this feature in TypeScript, you may transform your data arriving from your API. It’s mostly recommended if the API uses old (legacy) technology, and the TypeScript interfaces can’t be generated.

Tsconfig and Lint rules

As TypeScript code is compiled to JavaScript you are able to modify the options of compiling your code. We recommend to read through all the options but we would like to highlight a few of the most useful ones:

  • noImplicitAny: forces using proper typing.
  • noUnusedLocals and noUnusedParameters: help you keep your codebase clean (these were lint rules before).
  • and of course, any of the strict rules are welcomed.

Besides the tsconfig options, linting rules also recommended. Feel free to override the tslint.json file generated via the Angular CLI based on your taste. And take a look at prettier.

Nrwl Nx: Angular CLI power-ups for modern development

Nx Logo2

You are planning a large-scale Angular application, which means – of course – you will have a large codebase.

It’s recommended to organize your code into larger portions, e.g. components for the UI, common services responsible for API-connections and other middlewares. This is where Nrwl/nx can help. It adds more schematics to Angular CLI. One of the useful add-ons is schematic for libraries.

This schematic helps you generate in-app libraries where you may implement your common codebase.

Follow the Angular principles

Since you’ll build an application with your team, besides of clean code it’s recommended to follow the principles.

The Angular Style Guide gives you recommendations and examples of how to name and structure the files, how to style your code and more. The easier way to follow the Style Guide is to generate your components, services and more with Angular CLI as the schematics follow the Guide by default.

Another key principle is Don't repeat yourself (DRY). The easier way to comply with this principle is to write smart services and dumb reusable components. The components should deal only with the display logic and the services should be responsible for the business logic. E.g. you may want to open the same dialog from multiple places, so write the opening logic to the service and trigger from the component.

State management with NgRx Store

Ngrx2

NgRx Store is a controlled state container designed to help write performant, consistent applications on top of Angular. It’s inspired by Redux which means:

  • It’s the single source of truth (and it’s centralized).
  • The State is read-only (immutable).
  • Changes are made with pure functions (called reducer).

These principles help to write a reliable application in the long term and the data is always predictable.

Nrwl/nx also gives schematics to generate NgRx stores in your application following the latest principles and best practices, including a service called “facade” which wraps all the actions and selectors in a single place.

Optimizations

As your application will be large, it should run smoothly. To support scalability, you may consider optimizing your codebase to be performant in the long term.

ngFor trackBy

When you use ngFor to loop over an array in templates, use it with a trackBy function which returns a unique identifier for each item. When an array changes, Angular re-renders the whole DOM tree. But if you use trackBy, Angular will know which element has changed and will only make DOM changes for that particular element.

Subscribe in the view

Try to subscribe to the observables from the template and avoid subscribing from components if possible. The async pipes unsubscribe themselves automatically, so it reduces the risk of forgetting to unsubscribe a subscription in the component, which would introduce a memory leak. This also helps components to be stateless and it makes the code simpler by eliminating the need to manually manage subscriptions.

OnPush Change Detection

One of the biggest improvements to Angular applications is to use OnPush Change Detection. With this, Angular will react only if the source of the data is really changed. It’s effective with observables as the async pipe detects changes on its own.

It’s a good combination with NgRx Store, as all the selectors are Observables and it’s possible to store all your data there. Double win.

AOT compiler

Ahead-of-Time (AOT) compiler is also a great improvement to Angular applications. It converts your HTML and TypeScript code into efficient JavaScript code during the build process, and it provides a faster rendering in the browser.

Conclusion

Creating a single Angular application is simple, but if you consider the tips, recommendations, and principles described above, your applications will be scalable, maintainable and reliable for the long term. This makes an app a Large-Scale Enterprise Angular Application.

Further reading:

👉 8+1 Tips and Tricks for Building Large-Scale Enterprise Angular Applications

👉 Fabric.js Tutorial: The Ultimate Guide to Objects and Complex Shapes

Software Development Trends Report