1. Primitive Types

Primitive types are the fundamental building blocks in TypeScript.

string

Used to represent textual data.

let greeting: string = "Hello, World!";

When to use: For text-based data like names, messages, or descriptions.

number

Handles numeric values, including integers and floats.

let count: number = 42;

When to use: For mathematical operations, counters, or numerical data.

boolean

Represents true/false values.

let isComplete: boolean = true;

When to use: For conditional logic or flags.

bigint

Stores large integers beyond the range of number.

let big: bigint = 123456789012345678901234567890n;

When to use: For calculations involving large numbers.

symbol

Represents unique values.

const uniqueKey: symbol = Symbol("unique");

When to use: To create unique object keys.

undefined and null

• undefined: Absence of a value.
• null: Intentional absence of a value.

let u: undefined = undefined;
let n: null = null;

When to use: For optional fields or resettable variables.

2. Object Types

Objects are collections of key-value pairs.

General Object

let person: object = { name: "John", age: 30 };

When to use: For loosely structured objects.

Specific Object Shape

let person: { name: string; age: number } = { name: "John", age: 30 };

When to use: For defining object structure explicitly.

3. Array Types

Arrays store multiple values of the same type.

Typed Array

let numbers: number[] = [1, 2, 3];

When to use: For homogeneous lists like arrays of numbers or strings.

Array<Type> Syntax

let strings: Array<string> = ["one", "two", "three"];

When to use: Alternative array declaration syntax.

Tuple

Fixed-length arrays with specific types.

let tuple: [string, number] = ["John", 30];

When to use: For ordered data with mixed types, like coordinates.

4. Function Types

TypeScript enforces type safety for function parameters and return values.

Function Declaration

function add(a: number, b: number): number {
  return a + b;
}

When to use: For well-defined inputs and outputs.

Arrow Functions

const multiply = (x: number, y: number): number => x * y;

When to use: For concise function expressions.

Function Type

let log: (message: string) => void;
log = (message) => console.log(message);

When to use: To pass functions as arguments or store them in variables.

5. Union and Intersection Types

Union Types

Allow multiple possible types.

let id: string | number = 123;
id = "ABC";

When to use: For variables that can hold multiple types, like IDs.

Intersection Types

Combine multiple types.

type A = { name: string };
type B = { age: number };
let person: A & B = { name: "John", age: 30 };

When to use: For merging type requirements.

6. Literal Types

Define exact allowed values.

String Literals

let direction: "up" | "down" = "up";

Numeric Literals

let bit: 0 | 1 = 1;

When to use: For specific predefined values like enums.

7. Enum

Defines a set of named constants.

Numeric Enum

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
let move: Direction = Direction.Up;

String Enum

enum Status {
  Success = "SUCCESS",
  Failure = "FAILURE",
}

When to use: For grouping related constants.

8. Advanced Types

any vs. unknown

any

Opt-out of type checking.

let value: any = 42;
value = "hello";

unknown

Safer alternative to any.

let data: unknown;
data = "John";
if (typeof data === "string") {
  console.log(data.toUpperCase());
}

When to use: Prefer unknown for safer type checking.

void and never

void

For functions with no return value.

function logMessage(): void {
  console.log("Logging...");
}

never

For functions that never return.

function throwError(): never {
  throw new Error("Something went wrong!");
}

When to use: Use never for unreachable code.

9. Utility Types

Partial

Makes all properties optional.

type PartialPerson = Partial<{ name: string; age: number }>;

Readonly

Makes all properties read-only.

type ReadonlyPerson = Readonly<{ name: string; age: number }>;

Required

Makes all properties mandatory.

type RequiredPerson = Required<PartialPerson>;

Pick

Select specific properties.

type NameOnly = Pick<{ name: string; age: number }, "name">;

Omit

Exclude specific properties.

type WithoutAge = Omit<{ name: string; age: number }, "age">;

10. Generics

Generics enable reusable components that work with multiple types.

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>("Hello");

When to use: For flexible and type-safe code.

11. Type Aliases

Define reusable custom types.

type ID = string | number;
let userId: ID = "abc123";

12. Interface

Describes the shape of an object.

interface Person {
  name: string;
  age: number;
}

let person: Person = { name: "John", age: 30 };

13. Conditional Types

Types based on conditions.

type IsString<T> = T extends string ? true : false;
let test: IsString<string> = true;

14. Mapped Types

Transform properties of a type.

type ReadonlyPerson = {
  [K in keyof Person]: Person[K];
};

15. Union and Intersection Types

When one param pass second become mandatory and if not then third become mandatory scenario for button text vs button icon

type Params =
  | { first: string; second: string; third?: never }
  | { first?: never; second?: never; third: string };

Bind method

##First Approach Using apply

Function.prototype.customBind = function (context, ...args) {
  // Store the reference to the original function
  const fn = this;

  return function (...newArgs) {
    // Apply the function with the combined arguments and context
    return fn.apply(context, [...args, ...newArgs]);
  };
};

##Second Approach Using call

Function.prototype.customBind = function (context, ...args) {
  const fn = this; // Store the original function reference

  return function (...newArgs) {
    // Call the function with the context and individual arguments
    return fn.call(context, ...args, ...newArgs);
  };
};

##Third Approach Using arguments

Function.prototype.customBind = function (context) {
  const fn = this;
  const bindArgs = Array.prototype.slice.call(arguments, 1); // Capture arguments except for the context

  return function () {
    const callArgs = Array.prototype.slice.call(arguments); // Capture arguments passed to the returned function
    return fn.call(context, ...bindArgs, ...callArgs); // Use call to invoke the function with all arguments
  };
};

##How to use above code

const person = {
  name: 'Diwakar',
};

function greet(greeting, message) {
  return `${greeting}, ${this.name}! ${message}`;
}

// Using customBind
const customGreet = greet.customBind(person, 'Hello');
console.log(customGreet('Hope you are doing well!'));
// Output: "Hello, Diwakar! Hope you are doing well!"

Debounce Method

function debounce(func, delay) {
  let timeoutId;
  
  return function (...args) {
    const context = this;
    
    // Clear the previous timeout if the function is triggered again before the delay
    clearTimeout(timeoutId);
    
    // Set a new timeout for the function execution after the delay
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

##Usage 


// Example: Debouncing an input field
const input = document.getElementById('searchInput');
input.addEventListener('input', debounce(() => {
    console.log('Search query:', input.value);
}, 500));

##Where we use debounce

# Search input fields (to delay making API requests)
# Button click prevention (e.g., disabling multiple form submissions)
# Input field validation (on change events)

Throttle Method

function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) {
            return;
        }
        lastCall = now;
        return func(...args);
    };
}

// Example: Throttling a window resize event
window.addEventListener('resize', throttle(() => {
    console.log('Window resized');
}, 1000));

##Where we use debounce

# Scrolling event
# Window resizing
# Mouse movements

Curry Function

function curry(fn) {
    return function curried(...args) {
        // If the number of arguments passed is sufficient, call the original function
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        }
        // Otherwise, return a function that takes the remaining arguments
        else {
            return function (...nextArgs) {
                return curried.apply(this, args.concat(nextArgs));
            };
        }
    };
}

// Example: -

// Regular function
function multiply(a, b, c) {
    return a * b * c;
}

// Currying the multiply function
const curriedMultiply = curry(multiply);

// Calling it step by step
console.log(curriedMultiply(2)(3)(4)); // Output: 24

Memoization Function

function memoize(fn) {
    const cache = {};
    
    return function (...args) {
        const key = JSON.stringify(args); // Create a unique key for the arguments
        
        if (cache[key]) {
            console.log(`Fetching from cache for args: ${args}`);
            return cache[key]; // Return cached result if available
        }
        
        console.log(`Calculating result for args: ${args}`);
        const result = fn.apply(this, args); // Compute result
        cache[key] = result; // Store the result in the cache
        
        return result;
    };
}

// Example -

// Normal Fibonacci function (without memoization)
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// Memoized Fibonacci function
const memoizedFibonacci = memoize(fibonacci);

// Test the performance
console.log(memoizedFibonacci(10)); // Output: 55
console.log(memoizedFibonacci(15)); // Output: 610
console.log(memoizedFibonacci(10)); // This will fetch from cache

Custom Filter Method

Array.prototype.customFilter = function(callback, thisArg) {
    const result = [];
    for (let i = 0; i < this.length; i++) {
        // Check if the element passes the test implemented by the callback
        if (callback.call(thisArg, this[i], i, this)) {
            result.push(this[i]);
        }
    }
    return result; // Return the filtered array
};

// Example

// Original array
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

// Custom filter method to return even numbers
const evenNumbers = numbers.customFilter(function(number) {
    return number % 2 === 0; // Check if number is even
});

console.log(evenNumbers); // Output: [2, 4, 6, 8]

// Custom filter method with a 'thisArg' context
const threshold = {
    min: 5
};

const greaterThanMin = numbers.customFilter(function(number) {
    return number > this.min; // Compare against 'this.min'
}, threshold);

console.log(greaterThanMin); // Output: [6, 7, 8]

Custom unshift Method

Array.prototype.customUnshift = function(...args) {
    // Step 1: Create space for the new elements by shifting existing elements to the right
    const argsLength = args.length;
    const originalLength = this.length;

    // Move elements to the right by the number of arguments passed
    for (let i = originalLength - 1; i >= 0; i--) {
        this[i + argsLength] = this[i];
    }

    // Step 2: Insert new elements at the beginning
    for (let j = 0; j < argsLength; j++) {
        this[j] = args[j];
    }

    // Step 3: Return the new length of the array
    return this.length;
};

// Example -


// Example array
const arr = [3, 4, 5];

// Use customUnshift to add elements to the beginning
const newLength = arr.customUnshift(1, 2);

console.log(arr);        // Output: [1, 2, 3, 4, 5]
console.log(newLength);  // Output: 5 (new length of the array)

Custom shift method

Array.prototype.customShift = function() {
    // Step 1: Check if the array is empty
    if (this.length === 0) return undefined;

    // Step 2: Store the first element, which will be removed and returned
    const firstElement = this[0];

    // Step 3: Shift all elements to the left by 1 position
    for (let i = 1; i < this.length; i++) {
        this[i - 1] = this[i];
    }

    // Step 4: Remove the last element (which is now duplicated)
    this.length = this.length - 1;

    // Step 5: Return the removed first element
    return firstElement;
};

// Example -

// Example array
const arr = [10, 20, 30, 40];

// Use customShift to remove the first element
const removedElement = arr.customShift();

console.log(arr);            // Output: [20, 30, 40]
console.log(removedElement); // Output: 10 (the removed element)

Custom Console.log Method

// Store the original console.log method
const originalConsoleLog = console.log;

// Redefine console.log
console.log = function(...args) {
    // Add custom behavior here, e.g., add a timestamp
    const timestamp = new Date().toISOString();
    originalConsoleLog.call(console, `[${timestamp}]`, ...args);
};

// Test the custom console.log
console.log('This is a custom log message.');

API architecture styles provide essential frameworks for the interaction between various components of an application programming interface (API). The choice of architecture style impacts an API’s efficiency, reliability, and integration capability. Below are some of the most commonly used API styles, each offering unique advantages suited for different use cases:

RESTful (Representational State Transfer)

• Popular, easy-to-implement, HTTP methods
  REST is perhaps the most widely adopted style today. It leverages standard HTTP methods (GET, POST, PUT, DELETE) to manage resources. This simplicity makes it ideal for web services, and it’s easy to integrate, especially for applications that need a uniform interface.

GraphQL

• Query language, request specific data
  GraphQL is designed to solve many of the limitations of REST by allowing clients to request exactly the data they need, reducing the number of network requests. It provides a more flexible and efficient way to handle complex data fetching and can significantly reduce network overhead, providing faster responses.

gRPC (Google Remote Procedure Call)

• Modern, high-performance, Protocol Buffers
  Built on HTTP/2 and using Protocol Buffers for data serialization, gRPC is a performance-focused API style suitable for microservices architectures. It’s known for its low-latency, high-efficiency communication, making it a solid choice for real-time applications.

WebSocket

• Real-time, bidirectional, persistent connections
  WebSocket excels in scenarios that require low-latency, real-time data exchange. It’s perfect for applications like chat services, live updates, and gaming, where maintaining a persistent connection is crucial.

Webhook

• Event-driven, HTTP callbacks, asynchronous
  Webhooks provide an efficient way for systems to communicate asynchronously by triggering HTTP callbacks when specific events occur. They are particularly useful in event-driven architectures and scenarios where the system needs to notify external services about certain changes.

RESTful API

• HTTP Methods: REST utilizes the standard HTTP methods — GET, POST, PUT, DELETE — for managing CRUD operations.
• Uniformity: REST works well for applications requiring simple, consistent interfaces between services.
• Caching: REST’s caching strategies are relatively straightforward, making it easier to implement performance improvements.
• Downside: REST may require multiple requests to different endpoints to retrieve related data, which can increase network traffic.

const express = require('express');
const app = express();

app.get('/users/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`Fetching user with ID: ${userId}`);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

GraphQL

• Single Endpoint: GraphQL uses a single endpoint for all queries, allowing clients to specify precisely which data fields they need, leading to optimized payloads.
• Complex Queries: Clients can request nested and aggregated data from multiple sources in one query.
• Real-Time Support: GraphQL also supports real-time features like mutations and subscriptions.
• Downside: Caching strategies in GraphQL can be more complex compared to REST, and improper use can lead to abusive queries, adding complexity to the client side.

#GraphQl

query {
  user(id: "123") {
    name
    email
    posts {
      title
      content
    }
  }
}

##Appollo-Server

const { ApolloServer, gql } = require('apollo-server');

// Type definitions
const typeDefs = gql`
  type User {
    id: ID!
    name: String
    email: String
    posts: [Post]
  }

  type Post {
    title: String
    content: String
  }

  type Query {
    user(id: ID!): User
  }
`;

// Resolvers
const resolvers = {
  Query: {
    user: () => ({
      id: "123",
      name: "John Doe",
      email: "john.doe@example.com",
      posts: [
        { title: "First Post", content: "Content of first post" },
        { title: "Second Post", content: "Content of second post" }
      ]
    })
  }
};

// Server setup
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

gRPC

gRPC is a modern RPC framework that excels in microservices architectures due to its low-latency, high-performance nature. Here’s how gRPC operates:

1. REST Call: A client sends a REST call, typically with a JSON payload.
2. gRPC Encoding: The gRPC client encodes the request into binary format and sends it over the network via HTTP/2.
3. Server Processing: The gRPC server decodes the binary request, processes it, and sends a response back in the same manner.
4. Result Delivery: The client decodes the binary response and delivers it to the application.

gRPC is typically five times faster than traditional JSON-based REST calls due to its binary encoding and optimized data transmission. It is an excellent fit for high-performance services, especially in microservices-based systems.

// gRPC uses Protocol Buffers for data serialization. Below is an example of a gRPC server in Node.js:

#proto file:

syntax = "proto3";

service UserService {
  rpc GetUser (UserRequest) returns (UserResponse);
}

message UserRequest {
  string id = 1;
}

message UserResponse {
  string name = 1;
  string email = 2;
}

#gRPC Server (Node.js):

const grpc = require('@grpc/grpc-js');
const protoLoader = require('@grpc/proto-loader');

const packageDefinition = protoLoader.loadSync('user.proto');
const userProto = grpc.loadPackageDefinition(packageDefinition).UserService;

const server = new grpc.Server();

server.addService(userProto.service, {
  GetUser: (call, callback) => {
    callback(null, { name: 'John Doe', email: 'john.doe@example.com' });
  }
});

server.bindAsync('127.0.0.1:50051', grpc.ServerCredentials.createInsecure(), () => {
  server.start();
});

Steps Overview

1. Create an Angular Application
2. Create an Angular Element
3. Use the Angular Element in the main app
4. Serve the Micro Frontend

Creating an Angular Application

Start by creating an Angular application using the Angular CLI.

ng new core-app
cd core-app

Creating an Angular Element

Now We’ll create a new Angular application that will act as a micro frontend.

ng new micro-frontend --routing=false --style=scss
cd micro-frontend

Install the Angular Elements and polyfills needed to support older browsers.

npm install @angular/elements --save
npm install document-register-element --save

Create a simple component that will be exposed as an Angular Element.

ng generate component hello-world

In the hello-world.component.ts file, add a simple template:

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

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, {{name}}!</h1>`,
  styles: []
})
export class HelloWorldComponent {
  @Input() name: string = 'World';
}

Next, modify the app.module.ts to convert the component into a custom element:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { DOCUMENT } from '@angular/common';

@NgModule({
  declarations: [HelloWorldComponent],
  imports: [BrowserModule],
  providers: [],
  entryComponents: [HelloWorldComponent],
})
export class AppModule {
  constructor(private injector: Injector, private document: Document) {}

  ngDoBootstrap() {
    const helloElement = createCustomElement(HelloWorldComponent, { injector: this.injector });
    customElements.define('hello-world', helloElement);
  }
}

createCustomElement: Converts the “HelloWorldComponent” into web component

ngDoBootstrap: Angular doesn’t automatically bootstrap a component in this approach, so we use this method to manually define our custom element.

Since Angular Elements are not supported natively by some browsers, we include the polyfill by updating the polyfill.ts file:

import 'document-register-element';

Building the Angular Element

Next, build the project and extract the JavaScript file that contains our custom element.

ng build --output-hashing=none --prod

This generates files in the dist/micro-frontendfolder. You will need the main.js, polyfill.ts and runtime.js files.

Using the Micro Frontend in the Core App

Now, go back to the core-app (the host application).

In the index.html of the core-app, include the built files from the micro frontend:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Core App with Micro Frontend</title>
</head>
<body>
  <hello-world name="Diwakar"></hello-world>

  <script src="assets/micro-frontend/runtime.js"></script>
  <script src="assets/micro-frontend/polyfills.js"></script>
  <script src="assets/micro-frontend/main.js"></script>
</body>
</html>

This includes the JavaScript files for the micro frontend into the core app.

Make sure to move the files from dist/micro-frontend to src/assets/micro-frontend in the core app so they are accessible.

Serving the Application

Run the core app using Angular CLI:

ng serve

Visit http://localhost:4200 and you should see the custom Angular Element (micro frontend) rendering inside the core app. The hello-world.component.ts should display:

Hello, Diwakar!

Explanation

Micro Frontend: We split the app into independent parts. Here, the hello-world.component.ts is a simple micro frontend that can be developed and deployed separately.

Angular Elements: The hello-world.component.ts is converted into a custom element using Angular Elements. This allows it to be embedded in any web application (not just Angular apps).

Loose Coupling: The core app is loosely coupled with the micro frontend. You can replace or update the micro frontend independently.

Why Angular Elements?

Interoperability: Angular Elements are web components, meaning they can be used with other frameworks like React, Vue, or even plain HTML.

Micro Frontend Architecture: You can build self-contained parts of your application and independently deploy them, improving scalability and maintainability.

Conclusion

In this article, we explored how to build a micro frontend using Angular Elements in Angular v16. This approach helps in creating highly scalable, independent modules that can be developed and deployed separately. Angular Elements allows the integration of Angular components into other frameworks seamlessly, making it a powerful tool for implementing Micro Frontends.

By following this guide, you can start developing micro frontends and boost your application’s scalability while keeping it modular and maintainable.

Note — like, shares , and subscribe if you want such content to be published. Happy Learning 😊

The answer lies in Web Components.

Web Components are a set of technologies that help you build custom, reusable HTML elements. Whether it’s a fancy button or a complete user interface, Web Components allow you to encapsulate everything within a single, modular element. Let’s explore how!

Why Web Components?

Imagine you’re working on a website that needs a special button with animations and specific behaviors. Without Web Components, you’d have to write the same HTML, CSS, and JavaScript every time you use the button. This not only clutters your code but also increases the chances of bugs and conflicts.

Web Components solve this problem by letting you create a single, self-contained component — say, <fancy-button>—that can be reused anywhere on your site. You only write the code once, and you’re done!

In short, Web Components:

• Promote modularity: Your component’s code won’t mix with other parts of your page.
• Enable reusability: Create once, use everywhere.
• Provide maintainability: Make updates in one place, and they apply everywhere the component is used

Three Key Technologies Behind Web Components

1. Custom Elements
   Think of this as creating your own HTML tags. Instead of being limited to standard tags like <div> or <button>, you can now create something like <my-button> and define its behavior using JavaScript.
2. Shadow DOM
   The Shadow DOM isolates the component’s internal structure from the rest of the page. In simple terms, it creates a mini DOM tree just for your component, keeping its s
3. HTML Templates
   The <template> element allows you to define HTML that isn’t displayed when the page first loads but can be inserted later. This is particularly useful when you want to define reusable structures for your components.

Breaking it Down: How to Create a Web Component

Let’s walk through a simple example to see how we can create a web component.

Step 1: Define a Custom Element

First, we need to define the behavior of our custom element. We do this by creating a JavaScript class:

class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Click Me!</button>`;
  }
}

This code defines a new “MyButton”component that will display a button with the text "Click Me!"

Step 2: Register the Custom Element

Next, we register our new custom element using the customElements.define() method. This step is crucial because it tells the browser, "Hey, this is a valid HTML tag now!"

customElements.define('my-button', MyButton);

Step 3: Use the Custom Element

Now you can use <my-button> anywhere in your HTML just like a normal tag:

<my-button></my-button>

Digging Deeper: Using Shadow DOM for Encapsulation

One of the most powerful features of Web Components is the Shadow DOM. It ensures that the styles and scripts within a component are completely isolated from the rest of the page.

Example:

Let’s say you want to create a styled button, but you don’t want the button’s styles to affect (or be affected by) other parts of the page. You can use Shadow DOM to encapsulate the button’s styles:

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        button {
          background-color: blue;
          color: white;
          padding: 10px;
          border-radius: 5px;
        }
      </style>
      <button>My Button</button>
    `;
  }
}

In this case, the button’s style is contained within its Shadow DOM, so it won’t affect other buttons on your page, and no external styles will accidentally modify it.

HTML Templates and Slots: Adding Flexibility to Your Components

Sometimes, you’ll want to create a template for your component and reuse it multiple times. This is where the <template> and <slot> elements come in handy.

• <template>: Defines HTML that isn’t rendered right away but can be inserted when needed.
• <slot>: Acts like a placeholder, allowing external content to be passed into your component.

Example:

Here’s how you can use a <template> to create a reusable structure for a modal window:

<template id="modal-template">
  <div class="modal">
    <slot></slot>
  </div>
</template>

With the <slot> element, you can dynamically insert content into the modal, making it flexible and reusable.

Lifecycle Callbacks: Controlling Your Component’s Behavior

Web Components come with built-in lifecycle callbacks that allow you to hook into different phases of the component’s life:

• connectedCallback(): Triggered when the component is added to the DOM.
• disconnectedCallback(): Triggered when the component is removed from the DOM.
• attributeChangedCallback(): Fired when an attribute changes on the component.

These hooks give you precise control over how your component behaves at every stage of its existence.

Conclusion: Why Web Components Are the Future of Front-End Development

Web Components provide a way to create reusable, encapsulated custom elements that work across frameworks and libraries. This makes them perfect for building modular, maintainable user interfaces. By mastering Web Components, you’ll write cleaner, more efficient code and have an easier time managing large web projects.

Whether you’re building a custom button, a modal, or an entire user interface, Web Components are the key to creating powerful, reusable components.

So why not start today? Build your first Web Component and make your code more modular, maintainable, and future-proof!

What is micro-frontend ?

Micro-frontends are a way to break down a large frontend application into smaller, independently deployable modules, similar to microservices on the backend. Angular micro-frontends use Webpack 5’s Module Federation feature to enable this architecture. Module Federation allows multiple teams to build and deploy features in isolation while composing them together at runtime.

In this article, we’ll explore how to achieve micro-frontends in Angular using Module Federation, with practical code snippets and explanations.

Why Micro-Frontends?

Micro-frontends bring several benefits to modern web development:

• Independent Deployment: Teams can build, test, and deploy individual parts of the frontend independently.
• Better Scalability: Teams can work on their domain-specific features without interference from other teams.
• Technology Agnostic: Different micro-frontends can use different frameworks.

What is Module Federation?

Module Federation is a feature in Webpack 5 that allows multiple applications to share code or load remote code at runtime. This is especially useful for micro-frontends, as it allows one Angular application to load modules from another application seamlessly.

How to Implement Angular Micro-Frontends Using Module Federation

We will break the setup into two parts:

1. Host Application: The main shell that loads different micro-frontends.
2. Remote Applications: Individual Angular micro-frontend apps that are federated into the host.

Step 1: Setup the Angular Applications

First, create two Angular applications:

One for the Host application (the shell).

One for the Remote application (the micro-frontend).

ng new host-app
ng new remote-app

Step 2: Install Webpack Module Federation Plugin

In both the host and remote applications, install Webpack 5 by running:

npm install @angular-architects/module-federation --save

Step 3: Configure Module Federation for Remote Application

In the remote-app, configure the webpack.config.js for Module Federation.

Create a new webpack.config.js file in the remote-app:

In the above configuration:

• name: The unique name of the remote application.
• filename: The file that will be used to expose the remote component.
• exposes: The Angular component that you want to share with the host application.
• shared: The libraries that will be shared between the host and remote apps.

Step 4: Configure Module Federation for Host Application

In the host-app, create a similar webpack.config.js file:

In above configuration:

• remotes: Specifies the remote applications to be consumed by the host application. The remote URL is where the remoteEntry.js is located.
• shared: This ensures that shared libraries (like Angular core libraries) are only loaded once.

Step 5: Configure Angular Router to Load Remote Modules

To dynamically load the remote module, use Angular’s router in the host-app. Open the app-routing.module.ts in the host-app and add a route to the remote component:

Step 6: Expose Remote Components

In the remote-app, create the remote.component.ts file to define the component you want to expose:

Then, ensure that this component is part of an Angular module so that it can be properly exposed.

Step 7: Run Both Applications

Start both applications with different ports.

For the remote-app, start it on localhost:4201 and For the host-app, run it on localhost:4200

remote app - ng serve --port 4201

host-app - ng serve --port 4200

Now, when you visit http://localhost:4200/remote, the remote component from remote-app should be displayed inside the host application.

Final Thoughts

Using Angular with Webpack 5’s Module Federation allows you to develop and deploy micro-frontends efficiently. This approach promotes decoupling, enabling independent teams to develop their own features, release them independently, and improve scalability.

Cloning Objects in JavaScript: A Simple Guide

JavaScript objects, as versatile data structures, play a crucial role in handling various data types through key-value pairs. Often, you may find the need to modify values or add properties to an object. However, when such modifications are involved, it’s essential to be mindful of object referencing to avoid unintended consequences.

Consider the following scenario:

const userDetails = {
  name: "John Doe",
  age: 20,
  verified: false
};

In JavaScript, objects are reference types. A common mistake occurs when attempting to clone or copy an object using the equality operator (=). Let's explore why this can lead to unexpected results and delve into three effective methods for cloning or coping objects.

The Pitfall of Reference Types

const newUser = userDetails;
newUser.name = "Jane Doe";

console.log(userDetails.name); // Outputs: 'Jane Doe' 

// It modify the userDetails 'name' property since both object
//  newUser and userDetails points to same reference

Modifying newUser inadvertently alters the original userDetails object due to object referencing. This is not ideal, especially when the intention is to create an independent copy.

So what is solution for this 🧐

we usually use three approaches to solve this in js.

1. Spread Operator(ES6):

let cloneUser = { ...userDetails };

cloneUser.name = "Jane Doe";

console.log(userDetails.name); // Outputs: 'John Doe'
console.log(cloneUser.name); // Outputs: 'Jane Doe'

// Worked fine but catch here is it will only create shallow copy
// Will discuss shallow copy in below section

2. Object.assign() Method:

let cloneUser = Object.assign({}, userDetails);

cloneUser.name = "Jane Doe";

console.log(userDetails.name); // Outputs: 'John Doe'
console.log(cloneUser.name); // Outputs: 'Jane Doe'

// Worked fine but catch here is it will only create shallow copy
// Will discuss shallow copy in below section

3. JSON.parse() Method:

let cloneUser = JSON.parse(JSON.stringify(userDetails));

cloneUser.name = "Jane Doe";

console.log(userDetails.name); // Outputs: 'John Doe'
console.log(cloneUser.name); // Outputs: 'Jane Doe'

// Worked fine but catch here is it wont work with properties like function
// symbol and undefined value 
// Will discuss this in below post

Understanding the shallow copy

Both Object.assign and (…) spread operator create shallow copy

const userDetails = {
  name: "John Doe",
  age: 14,
  verified: false,
  status: {
    enrolled: false
  }
};

// let cloneUser = { ...userDetails };
let cloneUser = Object.assign({}, userDetails);
cloneUsers.status.enrolled = true;

console.log(cloneUser.status.enrolled); // Outputs: true
console.log(userDetails.status.enrolled); // Outputs: true

// As seen status for enarollment changed for both the object as nested object 
// properies not copied and its pass by reference still 

JSON.parse() Method for Deep Cloning

For more complex objects with nested structures, JSON.parse() along with JSON.stringify() provides a solution:

const userDetails = {
  name: "John Doe",
  age: 14,
  verified: false,
  status: {
    enrolled: false
  }
};

let cloneUser = JSON.parse(JSON.stringify(userDetails));

cloneUsers.status.enrolled = true;

console.log(cloneUser.status.enrolled); // Outputs: true
console.log(userDetails.status.enrolled); // Outputs: false

// Wow 😎 It worked and solved the problem of nested object 🥳

Wait ………………… be cautious when usingJSON.parse() with functions, symbols, or undefined values, as they may result in data loss

const userDetails = {
  name: "John Doe",
  age: 14,
  status: {
    verified: false,
    method: Symbol(),
    title: undefined
  }
};

let cloneUser = JSON.parse(JSON.stringify(userDetails));

console.log(cloneUser); // output is as shown above in attached screenshot
// and this is how we lost method , symbol properties

Final Solution

Lodash: The Ideal Solution

const userDetails = {
  name: "John Doe",
  age: 14,
  status: {
    verified: false,
    method: Symbol(),
    title: undefined
  }
};

console.log(_.cloneDeep(userDetails));

Using similar libraries ensures comprehensive deep cloning, addressing the challenges posed by nested objects and various data types.

Custom Deep Cloning Method

function deepClone(obj) {
  if (obj === null || typeof obj !== "object") {
    return obj;
  }

  const clone = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }

  return clone;
}

const userDetails = {
  name: "John Doe",
  age: 14,
  status: {
    verified: false,
    method: Symbol(),
    title: undefined
  }
};

let cloneUser = deepClone(userDetails);

This custom deep cloning method provides a tailored solution for handling nested objects and various data types.

Final word:-

Cloning objects in JavaScript demands careful consideration of object referencing and the nature of the data being manipulated. While methods like the spread operator, Object.assign(), and JSON.parse() offer solutions, their limitations underscore the importance of using dedicated libraries like Lodash or underscore or jQuery or crafting custom deep cloning methods. Choose the approach that aligns with your project's requirements, ensuring data integrity and preventing unexpected side effects

Happy Learning 👏 Subscribe for more such stories 😊

Function.prototype.customCall = function(context, ...args) {
    // Ensure that the context is an object or use the global object (window in the browser) if not provided.
    context = context || window;

    // Generate a unique identifier for the function to avoid naming conflicts on the context object.
    const uniqueID = 'fn_' + Date.now();
    
    // Attach the original function to the context using the unique identifier.
    context[uniqueID] = this;

    // Invoke the function with the specified context and arguments.
    const result = context[uniqueID](...args);

    // Clean up by removing the temporarily attached function from the context object.
    delete context[uniqueID];

    // Return the result of the function invocation.
    return result;
  };
}

Define the customCall method:

This line adds the customCall method to the Function.prototype. The method takes two parameters: context (the object to which the this keyword should refer) and args (an array of arguments to be passed to the function).

Function.prototype.customCall = function(context, ...args) {

// context is object to which this keyword will refers and args is arguments

function showFullName(lastName) {
  console.log(`I am ${this.firstName} ${lastName}`);
}

const person = {
  firstName: 'Diwakar'
}

showFullName.customCall(person, 'Kumar') // I am Diwakar Kumar

// Here 'person' is context to customCall method
// 'kumar' is argument passed to customCall method 

This polyfill essentially mimics the behavior of the native call method, allowing you to call a function with a specific context and arguments.

As JavaScript developers, we often work with objects and their properties. Properties not only hold values but also come with special attributes, known as “flags” or descriptors. In this article, we’ll unravel the concept of property flags and descriptors, exploring their significance and practical use cases.

Understanding Property Flags

1. Writable: If true, the value can be changed; otherwise, it's read-only.
2. Enumerable: If true, the property is listed in loops; otherwise, it remains hidden.
3. Configurable: If true, the property can be deleted, and its attributes can be modified.

Accessing Property Descriptors

To inspect these flags, we can use Object.getOwnPropertyDescriptor(obj, propertyName). It returns a property descriptor object containing the value and all the flags.

let user = { name: "Diwakar" };
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

console.log(descriptor);
/* Output:
{
  "value": "Diwakar",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

Modifying Flags with defineProperty

To change flags, we use Object.defineProperty(obj, propertyName, descriptor). It can update existing flags or create a new property with specified values and flags.

let user = {};
Object.defineProperty(user, "name", { value: "Diwakar" });

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(descriptor);
/* Output:
{
  "value": "Diwakar",
  "writable": false,
  "enumerable": false,
  "configurable": false
}
*/

Exploring Flag Effects

Non-writable Property

Making a property non-writable prevents its value from being reassigned.

let user = { name: "Diwakar" };
Object.defineProperty(user, "name", { writable: false });

user.name = "Pete"; // Error: Cannot assign to read-only property 'name'

Non-enumerable Property

Setting a property as non-enumerable excludes it from loops and Object.keys.

let user = { firstName: "Diwakar", lastName: "kumar"};
Object.defineProperty(user, "lastName", { enumerable: false });

for (let key in user) console.log(key); // Output: firstName
console.log(Object.keys(user)); // Output: ["firstName"]

Non-configurable Property

A non-configurable property can’t be deleted, and its attributes can’t be modified.

let user = { name: "Diwakar" };
Object.defineProperty(user, "name", { configurable: false });

user.name = "Mohit"; // Works fine
delete user.name; // Error

Object Property Management

Object.defineProperties(obj, descriptors) allows defining multiple properties at once.

Object.getOwnPropertyDescriptors(obj) provides all property descriptors, useful for creating a deep clone of an object.

let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));

Sealing Objects

To control access to the entire object, we have global methods:

• Object.preventExtensions(obj): Forbids adding new properties.
• Object.seal(obj): Forbids adding/removing properties. (configurable = ‘false’)
• Object.freeze(obj): Forbids adding/removing/changing properties. (writable = ‘false’ and configurable = ‘false’)

let user = { name: "Diwakar" };

Object.seal(user);

user.name = "Mohit"; // Work
delete user.name; // Error

Object.freeze(user);

user.name = "Rohit"; // Error
delete user.name; // Error

Understanding property flags and descriptors enhances our ability to control and protect object properties in JavaScript. Whether it’s making properties read-only, non-enumerable, or non-configurable, these features empower developers to create robust and secure code.

In conclusion, dive deeper into JavaScript object properties, explore the flags, and leverage descriptors to master the art of object manipulation. Happy coding!

Demystifying the this Keyword in JavaScript

Understanding the behavior of the this keyword is a fundamental aspect of JavaScript, influencing how functions and methods behave in various contexts. In this article, we'll explore the intricacies of this through practical examples and scenarios.

1. The this in Object Methods

Consider the following counter object:

let counter = {
  count: 0,
  next: function () {
    // 'this' represents the counter object
    return ++this.count;
  },
};

counter.next(); // Returns: 1

In this example, when next is invoked, this refers to the counter object. Understanding the context in which a function is called is crucial for interpreting the value of this.

2. Global Object and Strict Mode

In non-strict mode, if a function is called without an explicit context, this defaults to the global object (usually window in a browser).

function show() {
  console.log(this === window); // true
}

show();

However, in strict mode, JavaScript sets this inside a function to undefined:

"use strict";

function show() {
  console.log(this === undefined); // true
}

show();

3. Method Invocation and this

When a method of an object is called, this is set to the object that owns the method. Consider the following example with a car object:

let car = {
  brand: 'Tata',
  getBrand: function () {
    return this.brand;
  }
}

console.log(car.getBrand()); // Output: Tata

let brand = car.getBrand;
console.log(brand()); // Output: undefined

let newBrand = car.getBrand.bind(car);
console.log(newBrand()); // Output: Tata

In the first call to getBrand, this refers to the car object. However, when the method is assigned to the brand variable, this loses its context, resulting in undefined. Using bind to explicitly set this to the car object resolves this issue.

Understanding the behavior of this is crucial for writing robust and predictable JavaScript code. Whether it's working with objects, functions, or methods, being mindful of context ensures that this behaves as expected.

In conclusion, the this keyword in JavaScript is a dynamic aspect that requires attention to detail. By grasping its behavior in different scenarios, developers can write more effective and reliable code