Why use Angular in 2024

As a web developer, you have many excellent options for your frontend in 2024. We are truly lucky to have such abundance. But with so many options, what do you choose? 🤯 I worked with Angular for the last two years. Here are my 7 reasons to choose Angular:

1. Turn-key Framework That Scales

Angular is a comprehensive framework created and maintained by Google. It provides a complete solution for developing serious enterprise web apps. Unlike React that requires additional libraries for features like routing, state management, or form handling, Angular includes all these features out-the-box. No more decision fatigue! ✅

A lot of things are included so you have less third-party dependencies to worry about. Which is a big deal if your project is 2+ years old and your job is to keep it up-to-date.

Speaking of personal projects, lots of them never happen simply because devs are too overwhelmed with choices for every part of the apps. Simplicity helps.

2. Backed by Google, Robust Ecosystem

Angular has a robust ecosystem supported by a large community and backed by Google. This means you have access to a wealth of resources, including documentation, tutorials, libraries, and third-party tools. The strong community support ensures that you can find solutions to common problems and stay updated with the latest best practices.

Lately, Google has been on a pretty predictable schedule, shipping backwards-compatible updates to Angular every 6 months. Most of the times you can upgrade by simply running the CLI command.

3. State Management with RxJS or NgRx

Managing the state of an application can be challenging, especially as it grows in complexity. Angular leverages the power of RxJS, a reactive programming library, to handle asynchronous operations and state management effectively. RxJS provides a range of operators/pipes that make it easier to work with observables and manage data streams in a reactive way.

For a more complex state management, Angular developers often turn to NgRx, a state management library that integrates seamlessly with Angular and is built on top of RxJS. NgRx follows the Redux pattern, providing a single source of truth for the application state and enabling predictable state transitions. It makes it easier to debug and test applications since the state changes are traceable and maintainable.

Let's import RxJS into our project then fetch and map some data for our service:

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) {}

  // Fetch users from API and transform data
  getUsers(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map(users => users.map(user => ({
        id: user.id,
        name: user.name,
        email: user.email
      }))),
      catchError(error => {
        console.error('Error fetching users', error);
        return [];
      })
    );
  }
}

4. Dependency Injection

Angular's built-in dependency injection (DI) system enhances the modularity and testability of your application. With DI you can inject services and other dependencies into your components, making it easier to manage and test your code. This leads to more maintainable and scalable applications.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ExampleService {
  getData() {
    return 'Data from service';
  }
}

import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`,
})
export class ExampleComponent {
  data: string;

  constructor(private exampleService: ExampleService) {
    this.data = this.exampleService.getData();
  }
}

Separation of concerns. Nice.

5. Powerful CLI

Angular's Command Line Interface (CLI) is a great tool that simplifies/speeds up the development process. The CLI can generate components, services, modules, and more with simple commands, ensuring best practices and reducing the amount of boilerplate code. It also provides tools for testing, building, and deploying your application.

With these four lines you can create the whole project starter in seconds, run the local dev server and see your app in the browser:

npm install -g @angular/cli
ng new my-first-angular-app
cd my-first-angular-app
ng serve

🪄

With another line you can create a new component or service and insert it nicely in the project:

ng generate component my-new-component

Speaking of boilerplate code, looks like it's Google's intention to reduce its amount in the future updates. Things like Standalone Components are already included.

6. Component-Based Architecture 🧱

Components encapsulate the UI and behavior of a part of your application, making it easier to manage and test, like legos. This architecture allows developers to build complex applications by composing simple, reusable components.

7. Performance

Angular is designed to build high-performance and scalable web applications. Ahead-of-Time (AOT) compilation, lazy loading, and efficient change detection mechanisms all contribute to the great performance of Angular apps.

Example of Lazy Loading:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () =>
      import('./feature/feature.module').then((m) => m.FeatureModule),
  },
];

Conclusion

In 2024, whether you're building a small app or a large enterprise-level solution, Angular provides the tools and features you need to develop high-quality, maintainable, and scalable web experiences.