Understanding Angular Development: Insights and Best Practices with Mantrax

3) Efficient Asynchronous Programming with RxJS

RxJS, a library often used with Angular, efficiently handles asynchronous data calls. It enables the handling of events independently and in parallel, preventing the web page from becoming unresponsive. RxJS simplifies asynchronous programming by using Observables, which describe how data streams interact and how the application reacts to changes within these streams.

Example: In a stock trading application, real-time stock prices can be managed with RxJS. Using Observables, stock prices can be streamed and updated in real-time without blocking the main thread.

import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-stock-ticker',
  template: `
    <div *ngFor="let stock of stocks$ | async">
      {{ stock.name }}: {{ stock.price | currency }}
    </div>
  `
})
export class StockTickerComponent implements OnInit {
  stocks$: Observable<{ name: string, price: number }[]>;

  ngOnInit() {
    this.stocks$ = interval(1000).pipe(
      map(() => [
        { name: 'AAPL', price: Math.random() * 1000 },
        { name: 'GOOGL', price: Math.random() * 2000 },
        { name: 'AMZN', price: Math.random() * 3000 }
      ])
    );
  }
}

RxJS allows for complex data handling scenarios to be managed efficiently. In enterprise applications, this can be particularly useful for real-time data updates, user interactions, and background processing tasks. For example, an online collaboration tool can use RxJS to manage real-time updates and notifications, ensuring that users receive the latest information without delays.

1) Performance

Both Angular and React are renowned for building high-performing web applications, but the question remains: which one is faster? One of the performance research suggests that Angular has a slight advantage in terms of app size, but React has an edge in terms of data binding performance. It says that newer versions of Angular are slightly faster than React and Redux, with a smaller app size of 129 KB compared to React + Redux’s 193 KB.

source : https://www.freecodecamp.org/news/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962

Angular’s performance optimization capabilities include efficient coding practices, digest cycle optimization, and $cacheFactory for memorization. Additionally, Angular’s real DOM rendering combined with its unique change detection mechanism and zones makes web apps faster. Older versions of Angular can also be used for projects that don’t require two-way data binding, reducing complexities.

source : https://www.freecodecamp.org/news/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962

React, however, boasts a virtual DOM feature that enables swift performance by rendering updates faster and refreshing data quickly, particularly in complex and dynamic applications. Moreover, React’s data binding performance outshines Angular’s, making it a popular choice for applications that require frequent data updates. Furthermore, React’s component reusability promotes code quality and maintenance, leading to consistent app performance.

As the comparison unfolds, it’s clear that both frameworks have unique strengths. Angular’s advantages in app size and performance optimization capabilities are noteworthy, while React’s data binding performance and virtual DOM feature make it an attractive choice for developers. Ultimately, the choice between Angular and React depends on the specific needs and goals of each project.

2) Data binding

Angular and React differ fundamentally in their state management architectures. Angular’s built-in data binding capabilities enable bidirectional data flow, synchronizing model state and interface elements in real-time. This automatic coordination facilitates the development of complex, interactive user interfaces without requiring extensive callback chains or additional effort.

In contrast, React’s one-way data binding approach necessitates manual management of data flow, relying on external libraries like Redux or MobX to implement unidirectional data flow. This approach grants developers fine-grained control over data manipulation but requires more hands-on effort to manage complexity.

Angular’s two-way data binding leverages the TypeScript type system and dependency injection framework to ensure seamless coordination between components and services. This integration enables efficient data sharing and reduces the need for explicit data binding code. This technique is the most efficient technique for fetching data from large ERP (Enterprise Resource Planning) based software like medical software, or accounting. Thus it is more easy to build ERP software.

React, on the other hand, relies on virtual DOM manipulation and explicit state updates to manage data flow. While this approach offers precise control over data rendering, it requires more manual effort to optimize performance and manage complexity in large-scale applications.

3) Testing

Angular’s testing framework is designed with testability in mind, acknowledging the challenges of achieving comprehensive testing in dynamically typed languages like JavaScript. To address this, Angular incorporates various features that facilitate robust testing, including:

• • Isolation of unit code

• • Dependency injection for easy component decoupling and mocking

Angular’s built-in testing tools enable comprehensive testing and debugging of entire applications with a single tool, streamlining the testing process.

React, on the other hand, requires a suite of tools for different testing types. However, React’s testing approach offers advantages like:

• • Mocking of non-existent parts in the testing environment

• • Predictable tests through data or function mocking

• • Continuous test execution as part of the development process

React’s test runners, such as Mocha, Ava, and Jest, enable concurrent testing while developing, ensuring timely feedback on test cases.

When to choose which?

Angular is a popular choice for building rapid data-driven web applications. With its component-based architecture and massive community support, Angular is a reliable and stable solution for large and complex applications. Ideal use cases for Angular include:

• • Building and scaling complex applications with ease

• • Creating custom elements and feature-rich applications

• • Developing enterprise-scale projects without relying on third-party integrations

    React, on the other hand, is a preferred choice for handling the view layer and building reusable UI components. Its ability to update data without reloading the page makes it a popular choice for large-scale applications. Ideal use cases for React include:

• • Building personalized app solutions

• • Creating applications with multiple events or sharable elements

• • Developing cross-platform mobile apps

    Both Angular and React have been used to build significant applications for major companies worldwide.

4. How to develop an Angular application?

Angular transformed web development by offering an efficient method to create dynamic single-page applications (SPAs). Creating complex dynamic web pages with basic JavaScript is time-consuming and difficult to manage in large projects. AngularJS makes this easier through SPA development and provides several key advantages. Now, let’s explore the Angular workflow.

1) Project setup

This stage involves creating and setting up a new project using Angular CLI. It includes generating the basic folder structure and files, and initializing the project with necessary configurations.

Before starting, node.js should be installed. Angular relies on Node.js and npm to handle dependencies and manage the development environment.

node --version

npm install -g @angular/cli

ng new ProjectName

cd ProjectName
code .

Modules

Module is an essential configuration file in Angular and everything begins with the module. This groups together components, directives, services, and other modules.

As the diagram says, it starts from ‘app.module’ and this includes ‘app.component’ which is the main class in Angular project. The module itself is an Angular class with NgModules decorator containing essential metadata.

@NgModule({
  declarations: [ // components created within the module
    AppComponent
  ],
  imports: [ // imports from other files that will be used in components
    CommonModule, 
    OtherModule
  ],
  providers: [ // services and interceptors used within the components
    TodosService
  ],
  exports: [ // allowes parts to be used in other modules
    AppComponent
  ]
})
export class AppModule { } // name of the module

Modules also configure crucial dependencies for our project, such as:

• • HttpClientModule for HTTP communication

• • BrowserModule & ServerModule for web or server-side applications

• • CommonModule which includes Angular’s built-in directives and pipes

• • RoutingModule for application routing

Modules are often divided into groups known as features. Feature modules encapsulate all parts related to a specific feature of the application. Components can also have their own modules.

To generate a component within a particular module, use the –module flag:

ng generate component Hello --module MyCustomModule

Components

Angular components are the fundamental building blocks of Angular applications, encapsulating the UI and business logic. Each component typically includes four essential files:

• • Template (HTML) : Defines the component’s HTML structure.

• • Styles (CSS/SCSS) : Provides the styling for the component.

• • Component (TypeScript) : Contains the logic and data.

• • Spec (TypeScript Test file) : Includes tests for the component.

A component is defined using the @Component decorator, which specifies metadata such as the selector, template URL, and style URLs:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.scss']
})
export class TodosComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    console.log('Hello World!');
  }
}

Alternatively, the template and styles can be inlined directly within the component:

@Component({
  selector: 'app-todos',
  template: '.<div class="title">Component content</div>',
  styles: ['.title { color: red; }']
})

@Injectable({
  providedIn: 'root'
})
export class TodosService {

  constructor(private readonly httpClient: HttpClient) {}

   getAllTodos(): Observable<ITodo[]> {
     return this.httpClient.get<ITodo[]>('localhost:3000/api/todos');
   }

   createTodo(todoData: ITodo): Observable<ITodo> {
     const headers = new HttpHeaders()
     headers.set('content-type', 'application/json')
     return this.httpClient.post<ITodo>('/api/...', todoData, { headers });
   }
}

constructor(private readonly todosService: TodosService) {}

ngOnInit(): void {
  this.todosService
    .getAllTodos()
    .subscribe((data: ITodo[]) => console.log(data));
}

4) Routing

Angular’s routing system is an integral feature for creating single-page applications. It facilitates navigation and routing within the application, allowing users to move between different views and components seamlessly.

Overview of Angular Routing

Angular Router, part of the @angular/router package, allows defining routes and navigating between different components. The routing configuration begins with the AppRoutingModule, which is included in the main AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,  // This is where the routing configuration is set.
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Routes are defined in an array and mapped to components. Here’s an example:

constructor(private readonly todosService: TodosService) {}

ngOnInit(): void {
  this.todosService
    .getAllTodos()
    .subscribe((data: ITodo[]) => console.log(data));
}

Types of Routing options

    Angular supports various types of routing configurations:

• • Static routes: Direct mapping to components.

• • Dynamic parameter routes: Routes with parameters, such as /:id.

• • Child routes: Nested routing within feature modules.

• • Auxiliary routes: Multiple routes in a single URL.

• • Redirects: Redirect from one route to another.

• • Wildcard routes: Catch-all routes, typically used for 404 pages.

• • Guards: Control access to routes.

• • Resolvers: Pre-fetch data before activating a route.

• • Lazy-loaded Routes: Load feature modules on demand.

    After setting up the routes, they are incorporated into the router configuration of the RoutingModule.

@NgModule({
  imports: [RouterModule.forRoot(routes)], // routes array
  exports: [RouterModule]
})
export class AppRoutingModule {} // module included in the AppModule

Each component module can have its own set of routes, allowing for the definition of multiple routing modules.

const routes: Routes = [
  {
    path: '',
    component: UnitTestingPageComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UnitTestingRoutingModule {}

Notice that RouterModule.forChild(routes) is used instead of RouterModule.forRoot(routes) as seen in the AppRoutingModule.

RouterModule.forRoot is utilized to configure the router at the root level of the application, and only one root router is permitted. In contrast, RouterModule.forChild is employed to configure additional child routes within a feature module or component, and multiple child routing modules are allowed.

Router Configuration and Navigation

The RouterOutlet directive is a placeholder in the template where the router inserts components:

<router-outlet></router-outlet>

For navigation, the RouterLink directive binds links to routes:

<a [routerLink]="['/profile']">Profile</a>
<a [routerLink]="routerLinkVariable">Dynamic Profile</a>

Router links can also include query parameters and state information:

<a 
  [routerLink]="['/user/bob']" 
  [queryParams]="{debug: true}"
  [state]="{tracingId: 123}">
  User Profile
</a>

Programmatic navigation within components is possible using the Router service:

import { Router } from '@angular/router';

export class AppComponent implements OnInit {
  constructor(private readonly router: Router) {}

  onButtonClick() {
    this.router.navigate(['/profile']);
  }
}

Advanced Features

Advanced routing features include lazy loading for optimizing performance by loading feature modules only when needed. Additionally, route guards (CanActivate, CanDeactivate) ensure that users have the necessary permissions to access specific routes, and route resolvers can pre-fetch data required for a component before it is activated

DatePipe

The Angular DatePipe formats dates according to locale rules, allowing developers to customize temporal data display. Notably, this pipe stands out from other frameworks’ approaches, as it eliminates the need for additional JavaScript packages. Developers can leverage the ‘DatePipe’ by simply appending the pipe symbol (|) along with the desired date and optional parameters. This streamlines the process and facilitates seamless integration within Angular applications.

<p>Today’s date is {{ currentDate | date }}</p>

The code above uses the ‘currentDate’ variable and the ‘DatePipe’ to format the date according to locale rules. The date settings are configured in the component’s TypeScript file. Additional arguments can be passed to the ‘DatePipe’ to further customize the output.

<p>Today’s date is {{ currentDate | date:’shortDate’ }}</p>

This example uses the ‘shortDate’ option to format the date. Other options, such as ‘z’, ‘longDate’, and custom formats like ‘dd/MM/YY’, are also available.

UpperCasePipe & LowerCasePipe

Angular’s UpperCasePipe and LowerCasePipe offer a convenient way to transform text to uppercase or lowercase, respectively, enabling seamless text manipulation. To convert text to all uppercase, simply utilize the UpperCasePipe, while the LowerCasePipe facilitates conversion to lowercase. The way of using these pipes is straightforward, requiring only the addition of the pipe symbol (|) alongside the respective pipe function. There are simple examples :

<p>{{ text | uppercase }}</p>
<p>{{ text | lowercase }}</p>

JsonPipe

The Angular JsonPipe is designed to transform information into a structured, JSON-string representation, serving as a versatile conduit for data manipulation leveraging JavaScript’s inherent capabilities. This multipurpose tool is particularly useful during development for diagnostic applications, applicable to various data structures, including objects and arrays.

To use the JsonPipe, developers must employ a specific syntax, specifying parameters and values to effectively process JSON data. The steps required may vary depending on the desired outcome or the intended use of the processed information.

{ expression | json }}

The term “expression” refers to the information that needs to be converted into a JSON object. To illustrate this concept, consider a scenario with a JavaScript class called “Person” that represents an individual with various attributes such as name, age, and address. Additionally, an array of Person instances can be created, allowing for easier manipulation and organization of data related to different individuals within an application.

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
})
export class AppComponent {
    user: Person = new Person("John", "Doe", 30, "123 Main St");

    profiles: Person[] = [
        new Person("John", "Doe", 30, "123 Main St"),
        new Person("Peter", "Parker", 22, "456 Oak Ave"),
    ];
}
class Person {
    firstname: string;
    lastname: string;
    age: number;
    address: string;

    constructor(firstname: string, lastname: string, age: number, address: string) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.age = age;
        this.address = address;
    }
}

The provided code example demonstrates how to create a ‘user’ object and an associated ‘profiles’ array. To further process this information in JSON format, the ‘JsonPipe’ is utilized for conversion purposes.

<p>{{ user | json }}</p>
<p>{{ profiles | json }}</p

The ‘JsonPipe’ converts the user object and profiles array into a JSON representation, making it convenient to inspect within the context of template development or debugging sessions.

AsyncPipe

 Angular’s AsyncPipe provides an efficient way to handle asynchronous data streams, seamlessly integrating with observables and promises. This built-in pipe enables automatic subscription and unsubscription, ensuring smooth synchronization between data binding and user interface updates. By leveraging the AsyncPipe, developers can access the most recent output from these data sources in real-time, facilitating efficient data rendering.

To utilize the AsyncPipe effectively, developers must adhere to a structured approach, specifying asynchronous functions within component templates and utilizing the “async” keyword to define the desired behavior. The pipe itself can be accessed via the “|” symbol, ensuring efficient and flexible data flow between components.

The AsyncPipe’s practical application is demonstrated in the following code snippet:

{{ expression | async }}

Here, “expression” represents the observable or promise being subscribed to.

let numbers = of(1, 2, 3, 4, 5);

By leveraging the AsyncPipe, developers can subscribe to this observable and display the most recently released value in a template-based component, as shown below:

<p>{{ numbers | async }}</p>

This code shows the effective use of Angular’s ‘AsyncPipe’, showcasing its ability to manage asynchronous operations within template-based components. Upon initialization, the pipe automatically subscribes to the connected ‘Observable’ or Promise, canceling the subscription when the component is destroyed. This provides an efficient way to render the latest value emitted by the ‘Observable’, without adding unnecessary overhead during runtime.

6) Reactive Programming

Angular has fully embraced reactive programming as a vital component of modern web development. Reactive programming fundamentals revolve around reacting to data changes, setting up streams of data, and enabling applications to react automatically when data changes. Angular provides various tools and concepts for building reactive applications, including Observables, Subjects, BehaviorSubjects, ReplaySubjects, and Signals.

Observables, a central piece of Angular’s reactive programming toolkit, represent data streams that can emit multiple values over time. They can handle various asynchronous operations, such as HTTP requests, user input, and timers, leveraging RxJS (Reactive Extensions for JavaScript) for implementation.

Subjects, a particular type of Observable, are both observers and observables, producing and consuming values. They are a powerful tool for building event-driven architectures within applications. Two commonly used types of Subjects in Angular are BehaviorSubjects and ReplaySubjects. BehaviorSubjects have an initial value, emitting the most recent value to new subscribers, while ReplaySubjects store and replay a specified number of previous values to new subscribers.

Signals, although not native to Angular, are a concept associated with reactive programming. They combine a value with a change notification, emitting a signal to notify subscribers when the value changes. In Angular, Signals can be created using various techniques, including Subjects and custom implementations, and are often used for tracking changes in local component state, sharing state across components, and updating templates when data changes.

These concepts are essential in various application scenarios. Observables manage asynchronous operations, handle user input, and monitor changes in data from various sources. Subjects create custom events, share state between components, and manage global application state. BehaviorSubjects manage and share stateful data with an initial value, while ReplaySubjects replay historical data or event logs to new subscribers. Signals track local component state, share custom change notifications, and update templates when data changes.

7) State Management

State management is crucial for building scalable applications, enabling effective handling of user control states. This process is essential for developing large-scale applications with complex data communications, ensuring high performance and efficiency. In Angular, NgRx and NGXS are the premier libraries for state management, offering distinct features that simplify development.

7-1) What is NgRx?

 NgRx is inspired by Redux and helps developers simplify the application’s state in objects by enforcing a unidirectional data flow.

7-2) How does NgRx work?

 NgRx is inspired by Redux and helps developers simplify the application’s state in objects by enforcing a unidirectional data flow.

 The NgRx state management architecture comprises five essential components:

1. 1. Store: This immutable repository maintains the application’s state.

1. 1. Selectors: Angular components subscribe to the store and receive updates via selectors.

1. 1. Reducers: Responsible for managing state transitions, reducers handle actions and update the store accordingly.

1. 1. Actions: These modify the store’s state by triggering reducers.

1. 1. Effects: Consequences of actions, effects can also listen for specific action types and execute when triggered.

While this process may appear intricate, its benefits become apparent when managing data communication in large-scale applications. By leveraging NgRx, developers can efficiently handle complex state management, ensuring scalability and performance.

8) Testing

Angular’s built-in emphasis on testability ensures robust applications. Angular tests are categorized into three main types: unit tests, end-to-end tests, and integration tests. Unit tests verify isolated units of code, while end-to-end tests simulate user interactions, testing the application from UI to database. Integration tests, a subtype of unit tests, use similar tools to exercise functions and compare results. The testing pyramid concept helps distinguish these testing approaches.

8-1) The Testing Pyramid

The testing pyramid comes up pretty often. This is a handy visual that represents the ideal proportions of unit, integration, and end-to-end tests in an application.
At the base of the pyramid are unit tests, which form the bulk of testing efforts. These tests focus on individual units of work, such as classes or functions, to ensure they perform as expected.

Integration tests occupy the middle layer of the pyramid, covering interactions between multiple units of code. These tests may encompass a few components or the entire frontend of the application. While fewer in number than unit tests, integration tests play a vital role in verifying the seamless interaction of code components.

End-to-end (E2E) tests sit at the pinnacle of the pyramid, simulating real-world scenarios by testing the entire application with actual dependencies. This approach ensures that the application functions as intended, without the need for mockups or fake dependencies.

8-2) How to start Angular Testing

In Angular, the app.component comes with its own test file, app.component.spec.ts. The app also comes ready to go with an E2E testing folder.

• • Unit Tests
    Angular’s unit testing framework, powered by Jasmine and Karma, provides a solid foundation for application reliability. The Angular CLI automatically generates spec files and unit tests for new components and services, simplifying the process. However, mastering unit testing requires expertise and experience.

it(‘should create’, () => {
    expect(component).toBetruthy();
});

it('#getValue should return value from dataService', () => {
    // create `getValue` spy on an object representing the DataService
    const dataServiceSpy =
      jasmine.createSpyObj('DataService', ['getValue']);

    // set the value to return when the `getValue` spy is called.
    const stubValue = 'stub value';
    dataServiceSpy.getValue.and.returnValue(stubValue);

    weatherService = new WeatherService(dataServiceSpy);

    expect(weatherService.getValue())
      .toBe(stubValue, 'service returned stub value');
    expect(dataServiceSpy.getValue.calls.count())
      .toBe(1, 'spy method was called once');
  });

Spies are useful in Angular testing for mocking real services, which speeds up tests and avoids reliance on external services. Spies return custom responses, preventing real HTTP requests and potential brittleness. Additionally, spies track method calls, allowing tests to verify that dependencies are used correctly, as shown by confirming the getValue method is called exactly once in the example.

By adhering to these testing strategies, developers can ensure Angular applications are reliable and maintainable. Embracing unit, integration, and end-to-end testing enhances code quality and builds confidence in the application’s performance. A well-tested application is a key component of successful software development (https://www.mantrax.io/custom-software-development/).