Three front-end frameworks have become well-known in the constantly changing field of web development: Angular, React, and Vue.js. These technologies each address contemporary coding difficulties in a different way, and each has special strengths and use cases. This blog examines their development, history, and salient characteristics to assist you in selecting the best one for your upcoming undertaking.

Angular The all-encompassing structure
Evolution and History

Angular's Model-View-Controller (MVC) architecture and two-way data binding transformed front-end development when it was first released by Google in 2010 under the name AngularJS. A comprehensive overhaul of AngularJS, Google launched Angular (also known as Angular 2+) in 2016 to solve the shortcomings of the original framework and meet the demands of contemporary web development.

Key Features

• TypeScript: Angular is built using TypeScript, a statically typed superset of JavaScript, enhancing code quality and maintainability.
• Comprehensive Toolset: Angular offers a full-fledged framework with tools and libraries for routing, form handling, HTTP client, and more.
• Two-way Data Binding: Simplifies the synchronization between the model and the view, making development more intuitive.
• Dependency Injection: Enhances modularity and reusability of components by injecting dependencies where needed.

Use Cases
Angular is ideal for large-scale enterprise applications where a robust, scalable, and maintainable solution is required. Its comprehensive nature allows for the development of complex, feature-rich applications.

React The flexible library
History and Evolution
React was developed by Facebook and released in 2013. Unlike Angular, React is a library focused on building user interfaces, particularly single-page applications. It introduced the concept of a virtual DOM and component-based architecture, which significantly improved performance and developer productivity.

Key Features

• Virtual DOM: React’s virtual DOM improves performance by minimizing direct manipulations of the real DOM.
• Component-Based Architecture: Promotes reusable, self-contained components, making the development process modular and manageable.
• JSX Syntax: Allows developers to write HTML-like code within JavaScript, streamlining the creation of UI components.
• Unidirectional Data Flow: Simplifies data management and debugging by ensuring data flows in a single direction through the application.

Use Cases
React is suited for dynamic and high-performing applications, such as social media platforms, e-commerce sites, and content management systems. Its flexibility and performance benefits make it a popular choice among developers.

Vue.js The progressive framework
History and Evolution
Vue.js was created by Evan You and released in 2014. It was designed to be an approachable and versatile framework, combining the best features of Angular and React while offering a gentle learning curve. Vue has grown rapidly in popularity due to its simplicity and powerful features.

Key Features

• Reactive Data Binding: Simplifies the connection between the model and the view, making development intuitive.
• Component-Based Architecture: Encourages the use of reusable, modular components.
• Single-File Components: Allows developers to encapsulate HTML, CSS, and JavaScript within a single file, promoting better organization and maintainability.
• Flexibility: Vue can function as a library for enhancing existing projects or as a full-fledged framework for new applications.

Use Cases
Vue.js is perfect for both small and large-scale applications. Its progressive nature allows developers to incrementally adopt its features, making it a flexible choice for projects of varying complexity.

Angular vs React vs Vue.js

The RxJS library's Angular module's startWith() operator is used to prepend a starting value or set of values to the start of an observable series. This operator makes sure that these initial values are released as soon as the observable is subscribed, before it starts to release its typical series of values.

Setting up
Make sure your Angular project has RxJS installed. If it's not installed already, npm can be used to add it:

Usage
Import the startWith operator from RxJS in the component or service where you want to use it:
import { startWith } from 'rxjs/operators';

Example
Let's illustrate how startWith() works with a practical example.

Service Definition
Assume you have a service that provides an observable stream of numbers:
import { Injectable } from '@angular/core';
import { Observable, interval } from 'rxjs';

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

  getNumbers(): Observable<number> {
    return interval(1000); // Emits incremental numbers every second
  }
}

Component Implementation
In your component, you can consume this service and use the startWith() operator to prepend an initial value before the stream of numbers starts emitting.
import { Component, OnInit } from '@angular/core';
import { NumberService } from './number.service';
import { startWith } from 'rxjs/operators';

@Component({
  selector: 'app-number-display',
  template: `
    <h2>Number Stream</h2>
    <ul>
      <li *ngFor="let number of numberStream$ | async">{{ number }}</li>
    </ul>
  `
})
export class NumberDisplayComponent implements OnInit {

  numberStream$: Observable<number>;

  constructor(private numberService: NumberService) { }

  ngOnInit(): void {
    this.numberStream$ = this.numberService.getNumbers().pipe(
      startWith(0) // Prepend 0 as the initial value
    );
  }

}

In this example

• this.numberService.getNumbers() returns an observable that emits incremental numbers every second using interval(1000).
• startWith(0) is used within the pipe() method to prepend the initial value 0 to the beginning of the observable sequence. This means that 0 will be emitted immediately upon subscription, before the interval starts emitting numbers.

Template Usage
In the component's template (number-display.component.html), subscribe to numberStream$ using the async pipe to display the emitted numbers:
<h2>Number Stream</h2>
<ul>
  <li *ngFor="let number of numberStream$ | async">{{ number }}</li>
</ul>

Google offers the Firebase Console for free hosting of your Angular application. With Firebase, you can create and expand popular apps and games that users like. endorsed by Google and relied upon by millions of companies worldwide.

Login to firebase with your google account.
https://firebase.google.com

Create Angular 17 Application using Angular CLI

As of today (May 5th, 2024) Angular 17.3.6 is the latest version.
We can upgrade our Angular CLI to latest version.

C:\Users\peter>npm install @angular/cli -g

We can upgrade the npm also
npm install -g [email protected]

We can check the Angular CLI version now.

We can create an Angular application now.
D:\Work\Angular\001>ng new AngularGlobe

After installing the packaging, we can go to the application in Visual Studio Code by Microsoft.

We can run the angular application by below command.
ng serve

We can add our globe image in app.component.html file with a small style class in app.component.css as well.

app.component.html
<h1>
  <img src="../assets/Our_Moon_Phases_and_Eclipses.gif" class="center">
</h1>
<p class="center">

  <a href="https://www.esa.int/" target="_blank">Image Courtesy : THE EUROPEAN SPACE AGENCY</a>
</p>

app.component.css
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

Login Firebase Console with Google account.
We can give a name to our Angular project.

Configure google analytics.

Various options available in Firebase. You can explore each feature.

We can focus on Hosting options.

We have to install firebase-tools
npm install -g firebase-tools
firebase login

Proceed Yes

You can select the hosting option with space bar.
We have already created a project in Firebase.
Please select the project with existing project option.

Now we must select the build folder.

Before selecting the build folder we can build our project using below command.

ng build

Now we have choose the build folder.

NB: The deployment path has been modified by the Angular team to dist\<project name>\browser.

This allows us to deploy the application at this time.

Firebase Deploy

Application is deployed to https://angular-globe.web.app

If needed, you can purchase a domain from GoDaddy or BlueHost and link with Firebase free domain.