DEV Community: With Code Example

How to Upgrade to Angular 20

With Code Example — Sun, 01 Jun 2025 12:09:34 +0000

With the release of Angular 20 comes incredible features, such as a stable Signals API and zoneless change detection. However, upgrading is not as simple as it seems and requires some planning. Here is a step-by-step guide with codes and other common mistakes that ensures an easy upgrade.

Prerequisites

Node.js v20: Angular 20 drops support for Node 18. Verify with node -v.
TypeScript 5.8: Update via npm install typescript@5.8.
Backup Your Project: Use Git to commit changes before proceeding.

Step 1: Update Angular CLI

Update the global CLI to v20:

npm uninstall -g @angular/cli  
npm install -g @angular/cli@20

Verify with ng version.

Step 2: Upgrade Project Dependencies

Run the Angular update tool:

ng update @angular/core@20 @angular/cli@20

This updates package.json and applies migrations for:

Replacing TestBed.get() with TestBed.inject() [6].
Migrating ngIf, ngFor, and ngSwitch to the new control flow syntax [6].

Example Migration:

<!-- Before -->  
<div *ngIf="user">{{ user.name }}</div>  

<!-- After -->  
@if (user) {  
  <div>{{ user.name }}</div>  
}

Step 3: Resolve Breaking Changes

Deprecated Structural Directives

Angular 20 deprecates ngIf, ngFor, and ngSwitch. Use the control flow syntax:

@for (item of items; track item.id) {  
  <div>{{ item.name }}</div>  
}

TestBed.get() Removal

Replace deprecated calls:

// Before  
const service = TestBed.get(UserService);  

// After  
const service = TestBed.inject(UserService);

Forms API Updates

New methods like markAllAsDirty() are available:

this.userForm.markAllAsDirty();

Step 4: Enable Experimental Features (Optional)

Zoneless Change Detection

Add to app.config.ts:

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

export const appConfig: ApplicationConfig = {  
  providers: [provideZonelessChangeDetection()]  
};

Note: Manual change detection may be required for third-party libraries [1][5].

Signal-Based Forms (Developer Preview)

Experimental forms API using signals:

const name = signal('');  
const isValid = computed(() => name().length > 2);

Step 5: Update Browserslist Configuration

Angular 20 targets browsers released in the last 30 months. Update .browserslistrc:

Chrome >= 107  
Firefox >= 104  
Safari >= 16

Step 6: Test and Optimize

Run Tests: Angular 20 deprecates Karma. Migrate to Web Test Runner or Vitest [1][5].
Check Bundle Size: Use ng build --stats-json to analyze with webpack-bundle-analyzer.
Verify SSR: Test server-side rendering with ng serve --ssr.

Post-Upgrade Checklist

Update Angular Material/Material UI if used.
Ensure third-party libraries (e.g., NgRx, RxJS) are compatible.

Enable stricter TypeScript checks in tsconfig.json:

{  
  "compilerOptions": {  
    "strict": true  
  }  
}

Troubleshooting Common Issues

"Cannot find module" Errors: Delete node_modules and package-lock.json, then run npm install.
Zone.js Warnings: Add ngZone: 'noop' to provideZonelessChangeDetection() if using zoneless mode [5].
Legacy Browser Support: Adjust .browserslistrc if targeting older browsers (may increase bundle size).

Conclusion

Upgrading to Angular 20 unlocks performance gains and modern reactivity patterns. By following these steps, you’ll mitigate breaking changes and leverage features like Signals and zoneless apps. For large teams, consider incremental adoption of experimental APIs to minimize disruption.

Need Help?

Use ng update --help for CLI options.
Refer to Angular’s official update guide .

Angular 20 Features and Examples

With Code Example — Sun, 01 Jun 2025 07:33:07 +0000

Angular 20, released in late May 2025, marks a pivotal update in the Angular ecosystem, focusing on reactivity, performance, and developer experience. Below is a detailed breakdown of its most significant features, complete with code examples and practical implications.

Signals API Goes Stable

Angular 20 stabilizes the Signals API, a major leap toward fine-grained reactivity. Signals are reactive primitives similar to React’s useState or Vue’s refs, enabling state updates that only re-render what’s necessary.

Example:

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

const counter = signal(0);

function increment() {
  counter.set(counter() + 1);
}

This makes state management simpler and more predictable, reducing the need for RxJS in many scenarios.

Zoneless Change Detection (Developer Preview)

Angular 20 introduces experimental support for zoneless change detection, allowing developers to opt out of Zone.js. This results in:

Smaller bundle sizes (no Zone.js dependency)
Faster change detection cycles
Cleaner stack traces for easier debugging

How to enable:

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

bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()]
});

Manual change detection can be done via ChangeDetectorRef or by leveraging Signals for automatic UI updates.

Reactive API Improvements: Effect and Resource APIs

Effect API: Automatically manages side effects in response to signal changes.
Resource API: Simplifies handling of asynchronous operations, tying async data directly to signal-based state.

Example:

import { effect, signal } from '@angular/core';

const userId = signal(1);

effect(() => {
  // Fetch user data whenever userId changes
  fetchUser(userId());
});

This enables more declarative and maintainable code for state and side effects.

Signal-Based Forms (Experimental)

Angular 20 introduces experimental signal-based forms, aiming for unified reactivity and efficient state management in forms.

Features:

Real-time validation via computed signals
Scalable for complex forms

Example:

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

const name = signal('');
const isValid = computed(() => name().length > 2);

Form controls and validations update reactively, improving UX and code clarity.

Selectorless Components

Angular 20 allows for selectorless components, streamlining imports and reducing boilerplate. This improves ergonomics for standalone and dynamically created components, making refactoring easier.

Incremental Hydration and Flexible Rendering

Incremental Hydration: Improves Largest Contentful Paint (LCP) and SEO by only hydrating visible parts of the page.
Flexible Rendering Modes: Developers can choose rendering strategies to optimize performance.

Example:

@Component({
  selector: 'my-component',
  template: `
    @defer { ... }
  `
})
export class MyComponent {}

This leverages the @defer directive for faster initial loads and better SEO.

Accessibility Enhancements

Angular 20 introduces accessibility primitives and real-time CLI warnings, making it easier to build inclusive applications and catch issues during development.

Improved Testing Facilities

Karma Deprecated: Angular 20 moves away from Karma, introducing experimental support for Web Test Runner and Vitest, both of which are faster and more modern.
Example: No code required—just select the new test runner in your Angular CLI setup.

Router Improvements

Scroll Options: Native scroll behaviors now supported.
Resolvers: Child resolvers can access parent route data.
Async Redirects: redirectTo can now return Promises or Observables.
Custom Elements: Use custom elements as hosts for RouterLink.

Example:

this.scroller.scrollToPosition([0, 10], { behavior: 'smooth' });

provideRouter([
  { path: 'users/:id', resolve: { user: userResolver }, children: [
    { path: 'posts', resolve: { posts: postsResolver }, component: UserPosts }
  ]}
]);

Two-Way Binding for Dynamically Created Components

Angular 20 now supports two-way data binding for components created at runtime, making dynamic UIs (like modals and form generators) much easier to manage[6].

Smaller Bundles and Faster Load Times

Improved tree-shaking aggressively removes dead code.
Ivy compiler enhancements reduce memory usage and rebuild times.

Summary Table: Angular 20 Key Features

Feature	Description/Benefit	Example/Usage
Signals API (Stable)	Fine-grained reactivity, replaces some RxJS	const count = signal(0);
Zoneless Change Detection	No Zone.js, faster, smaller bundles	provideZonelessChangeDetection()
Effect/Resource APIs	Manage side effects, async state	effect(() => {...})
Signal-Based Forms (Experimental)	Reactive, scalable forms	const name = signal('')
Selectorless Components	Less boilerplate, better ergonomics	Import directly, no selector
Incremental Hydration	Faster LCP, better SEO	@defer directive
Accessibility Primitives	Easier, real-time accessibility	CLI warnings
Modern Testing Support	Web Test Runner, Vitest	CLI setup
Router Enhancements	Async redirects, scroll options, custom elements	See above
Dynamic Two-Way Binding	For runtime-created components	Dynamic component APIs

Angular 20 is a transformative release, making Angular apps more reactive, performant, and developer-friendly. For enterprise teams and solo devs alike, these features offer new ways to build scalable, modern web applications.

What is an MCP Server, and How Do You Create One?

With Code Example — Fri, 30 May 2025 13:35:24 +0000

In the recent hype about the MCP server, last weekend I decided to explore it in depth and provide you with the real context about it to understand it without any confusion. I have learned about it and integrated it with my text editor (cursor and trae) and Claude AI desktop.

In this article, I will provide you with every important term about the MCP server and will show you how to create one. So let’s get started with it. See the Google trend data first. 👇

MCP Server google trends

What is an MCP server?

An MCP (model context protocol) is a protocol to provide the context to the LLM models. It helps to communicate AI with external data sources (API, database, etc.). It helps to take input data from the user and create the structured payload (for the API call), and provide the human-readable data back to the user.

Where to use the MCP server?

MCP servers are playing an essential role in connecting the servers and apps together in your AI client. I am using it for various purposes; one of them is to post my tweets over X. I can simply provide the prompt to Claude Desktop to send a tweet about any provided topic, and it will post using the MCP server. There can be thousands of use cases available for which you can use the MCP server.

Some useful MCP servers are —

Time MCP—Provides time and timezone conversion ⏲

Filesystem MCP — Helps to interact with file on your system and perform actions 📁

How do MCP servers work?

MCP servers act as a middle layer between your API and service; it takes input from an AI model and creates the appropriate data to call a service to perform any action, like calling api, running a system command, analyzing data, etc.

How do MCP servers work?

Setting Up Your MCP Server

MCP does provide the SDKs for Python, TypeScript, Java, Kotlin, C#, and Swift to develop MCP servers. In this tutorial, I will show you how to create a simple weather forecast MCP using Node.js and run it through the Claude AI desktop client.

Prerequisite

Knowledge about Node.js and the Claude AI desktop app must be downloaded.

1. Install packages

Open your terminal and run the following commands —

mkdir weather-mcp # create a folder
cd weather-mcp # change directory to newly created folder
npm init -y # initialize the empty node project
# install required packages
npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript
mkdir src # create src folder
touch src/index.ts # create index.ts inside the src folder

2. Update package.json

Change type to module

{
  "type": "module",
  "bin": {
    "weather": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod 755 build/index.js"
  },
  "files": [
    "build"
  ]
}

3. Create tsconfig.json file in root

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

4. Start building MCP server

src/index.ts

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const NWS_API_BASE = "https://api.weather.gov";
const USER_AGENT = "weather-mcp/1.0";

// Create server instance
const server = new McpServer({
  name: "weather-mcp",
  version: "1.0.0",
  capabilities: {
    resources: {},
    tools: {},
  },
});

// Helper function for making NWS API requests
async function makeNWSRequest<T>(url: string): Promise<T | null> {
  const headers = {
    "User-Agent": USER_AGENT,
    Accept: "application/geo+json",
  };

  try {
    const response = await fetch(url, { headers });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return (await response.json()) as T;
  } catch (error) {
    console.error("Error making NWS request:", error);
    return null;
  }
}

interface AlertFeature {
  properties: {
    event?: string;
    areaDesc?: string;
    severity?: string;
    status?: string;
    headline?: string;
  };
}

// Format alert data
function formatAlert(feature: AlertFeature): string {
  const props = feature.properties;
  return [
    `Event: ${props.event || "Unknown"}`,
    `Area: ${props.areaDesc || "Unknown"}`,
    `Severity: ${props.severity || "Unknown"}`,
    `Status: ${props.status || "Unknown"}`,
    `Headline: ${props.headline || "No headline"}`,
    "---",
  ].join("\n");
}

interface ForecastPeriod {
  name?: string;
  temperature?: number;
  temperatureUnit?: string;
  windSpeed?: string;
  windDirection?: string;
  shortForecast?: string;
}

interface AlertsResponse {
  features: AlertFeature[];
}

interface PointsResponse {
  properties: {
    forecast?: string;
  };
}

interface ForecastResponse {
  properties: {
    periods: ForecastPeriod[];
  };
}

// Register weather tools
server.tool(
  "get-alerts",
  "Get weather alerts for a state",
  {
    state: z.string().length(2).describe("Two-letter state code (e.g. CA, NY)"),
  },
  async ({ state }) => {
    const stateCode = state.toUpperCase();
    const alertsUrl = `${NWS_API_BASE}/alerts?area=${stateCode}`;
    const alertsData = await makeNWSRequest<AlertsResponse>(alertsUrl);

    if (!alertsData) {
      return {
        content: [
          {
            type: "text",
            text: "Failed to retrieve alerts data",
          },
        ],
      };
    }

    const features = alertsData.features || [];
    if (features.length === 0) {
      return {
        content: [
          {
            type: "text",
            text: `No active alerts for ${stateCode}`,
          },
        ],
      };
    }

    const formattedAlerts = features.map(formatAlert);
    const alertsText = `Active alerts for ${stateCode}:\n\n${formattedAlerts.join("\n")}`;

    return {
      content: [
        {
          type: "text",
          text: alertsText,
        },
      ],
    };
  },
);

server.tool(
  "get-forecast",
  "Get weather forecast for a location",
  {
    latitude: z.number().min(-90).max(90).describe("Latitude of the location"),
    longitude: z.number().min(-180).max(180).describe("Longitude of the location"),
  },
  async ({ latitude, longitude }) => {
    // Get grid point data
    const pointsUrl = `${NWS_API_BASE}/points/${latitude.toFixed(4)},${longitude.toFixed(4)}`;
    const pointsData = await makeNWSRequest<PointsResponse>(pointsUrl);

    if (!pointsData) {
      return {
        content: [
          {
            type: "text",
            text: `Failed to retrieve grid point data for coordinates: ${latitude}, ${longitude}. This location may not be supported by the NWS API (only US locations are supported).`,
          },
        ],
      };
    }

    const forecastUrl = pointsData.properties?.forecast;
    if (!forecastUrl) {
      return {
        content: [
          {
            type: "text",
            text: "Failed to get forecast URL from grid point data",
          },
        ],
      };
    }

    // Get forecast data
    const forecastData = await makeNWSRequest<ForecastResponse>(forecastUrl);
    if (!forecastData) {
      return {
        content: [
          {
            type: "text",
            text: "Failed to retrieve forecast data",
          },
        ],
      };
    }

    const periods = forecastData.properties?.periods || [];
    if (periods.length === 0) {
      return {
        content: [
          {
            type: "text",
            text: "No forecast periods available",
          },
        ],
      };
    }

    // Format forecast periods
    const formattedForecast = periods.map((period: ForecastPeriod) =>
      [
        `${period.name || "Unknown"}:`,
        `Temperature: ${period.temperature || "Unknown"}°${period.temperatureUnit || "F"}`,
        `Wind: ${period.windSpeed || "Unknown"} ${period.windDirection || ""}`,
        `${period.shortForecast || "No forecast available"}`,
        "---",
      ].join("\n"),
    );

    const forecastText = `Forecast for ${latitude}, ${longitude}:\n\n${formattedForecast.join("\n")}`;

    return {
      content: [
        {
          type: "text",
          text: forecastText,
        },
      ],
    };
  },
);

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Weather MCP Server running on stdio");
}

main().catch((error) => {
  console.error("Fatal error in main():", error);
  process.exit(1);
});

5. Build

Run npm run build to build the MCP server

Testing MCP server with Claude Desktop

To test our newly created MCP server, we have to add it to the Claude desktop app first. I am showing the steps for MAC Os —

Download and install Claude AI Desktop app from https://claude.ai/download
Open the setting

Click on Developer > Edit Config

Paste the following json to your file (make sure to change the path of the folder)

{
    "mcpServers": {
        "weather": {
            "command": "node",
            "args": [
                "/path/to/your/weather-mcp/build/index.js"
            ]
        }
    }
}

Quit and restart Claude Desktop, and then you will find the app integration inside your app.

Write the prompt to execute the Weather MCP server

💡

Congratulations, you have successfully created your first MCP Server. 💃

I have taken this example code from the official MCP server quickstart guide.

Thank you for taking the time to read this article! If you found it helpful, a couple of claps 👏 👏 👏 would be greatly appreciated — it motivates me to continue writing more. If you want to learn more about open-source and full-stack development, follow meon Twitter (X) and Medium.

Self-Hosting AI Models

With Code Example — Wed, 28 May 2025 13:26:11 +0000

Hello Developers, In today's article, I will talk about how you can self-host the AI models on your machine and start using them for free. In recent days, I was looking for a tool to convert my local system into an AI server, and I did find something amazing. I will talk in detail about how you can start using it, make your life easier, do more experiments with AI, and much more.

Why Self-Hosting?

This is the first question that came to mind when we decided to use the self-hosted AI. Here are some key points that I consider before self-hosting AI models:

Cost Savings: Self-hosted AI may be costly initially, but in the long term, it can save a lot of money.
Faster Performance: By providing the proper infrastructure, you can reduce the latency for your APIs.
Control and Customization: Self-hosted AI provides better control over the infrastructure and data to build custom solutions.
Security: It provides more security by customizing the rules and better control over data.

Why Self-Hosting AI Models?

How to Self-Host AI?

Now this is the main question: how to self-host AI on your local system.

I am using the tools called OLLAMA to self-host the AI, and believe me, it is super easy to start using it. You just need to download the OLLAMA on your local system by the executable file of Docker, and boom, you are ready to use your brand new self-hosted AI server. Let me show you how to do that simply -

Visit their site to download the Ollama—https://ollama.com/download.
To install it with Docker, use the following instructions:

CPU only -

docker run -d -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama

With GPU -

docker run -d --gpus=all -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama

💡

For more details, visit here - https://hub.docker.com/r/ollama/ollama

Now you have successfully installed the Ollama on your system, and you are almost ready to use it; let's see further steps.

Now you can verify it via running theollama command from your terminal -

or by visiting to localhost:11434

Download your favorite model

Ollama provides the privilege to download and use your favorite AI model and start using it. To download model you have to visit their models repository and choose the one which you want to run -

For example, I will download qwen3:0.6b\ run the following command to pull and start using it

ollama run qwen3:0.6b

First time it will download the model (it will tak while); afterwards, it will be avaliable on your system you can use any time -

0:00

/1:36

1×

Use ollama list to show all of your downloaded models.

Once your download is completed, you can start using it from your terminal -

Ollama API

Ollama OpenAI compatibility

We have seen that we have successfully installed Ollama in our system, but we are not supposed to use it via terminal. We need to integrate it into our code; here, OLLAMA provides open-ai sdk support to start using it just by configuring the right endpoint and model. Let's understand it with example code. I will give golang code example:

package main

import (
    "context"

    "github.com/openai/openai-go"
    "github.com/openai/openai-go/option"
)

func main() {
    client := openai.NewClient(
        option.WithAPIKey(""),
        option.WithBaseURL("http://localhost:11434/v1"),
    )
    chatCompletion, err := client.Chat.Completions.New(context.TODO(), openai.ChatCompletionNewParams{
        Messages: []openai.ChatCompletionMessageParamUnion{
            openai.SystemMessage("You are a helpful assistant."),
            openai.UserMessage("Who won the world series in 2020?"),
        },
        Model: "qwen3:0.6b",
    })
    if err != nil {
        panic(err.Error())
    }
    println(chatCompletion.Choices[0].Message.Content)
}

output:

you can also use the curl request to make sure api's are working fine -

curl http://localhost:11434/v1/chat/completions \
    -H "Content-Type: application/json" \
    -d '{
        "model": "qwen3:0.6b",
        "messages": [
            {
                "role": "system",
                "content": "You are a helpful assistant."
            },
            {
                "role": "user",
                "content": "Hello!"
            }
        ]
    }'

Final words

I have gone through almost every important step required before getting started with self-hosted AI. I will say that if you have a long-term vision to use AI at scale, then it will be very useful for you to self-host the AI models. I personally focus more on using the open-source technologies. If you want more details about it, please feel free to connect with me at harendraverma21@gmail.com, or you can leave your comment here; I will respond ASAP.

Google I/O 2025: A New Era of AI-Driven Experiences

With Code Example — Mon, 26 May 2025 14:01:38 +0000

Google I/O 2025 marked a pivotal moment in the evolution of artificial intelligence, with the tech giant unveiling a suite of groundbreaking products and features that promise to redefine how users interact with technology. From transforming the very nature of search to introducing Hollywood-grade AI video generation, here’s an in-depth look at the key announcements that are set to shape the future.

AI Mode Search: The Next Generation of Google Search

Google Search has undergone its most significant transformation yet with the introduction of "AI Mode." This overhaul replaces the traditional keyword-based approach with a conversational, task-oriented system powered by the Gemini AI chatbot. Instead of typing queries, users can now instruct Google to perform complex tasks, such as finding the best deals on groceries and automatically placing orders.

This shift signals Google’s ambition to move beyond information retrieval, turning Search into an intelligent assistant capable of handling real-world actions. The integration of Gemini’s advanced language and reasoning capabilities allows for a more intuitive, hands-free experience, making Google Search smarter and more proactive than ever before.

Project Astra: Real-Time Visual AI Assistant

Project Astra, one of the most talked-about unveilings at I/O 2025, brings science fiction closer to reality. Inspired by the concept of a real-life "Jarvis," Astra leverages your device’s camera and microphone to perceive and understand your surroundings. Users can point their camera at objects to receive instant, context-aware information, or even engage in playful interactions, such as asking Astra to "roast" their image.

With Astra, Google is pushing the boundaries of real-time AI, enabling a seamless blend of digital and physical worlds. This breakthrough opens up new possibilities for accessibility, education, and everyday convenience, positioning Astra as a powerful tool for both productivity and entertainment.

VEO 3 Model: Hollywood-Style AI Video Generation

Perhaps the most stunning demonstration of AI’s creative potential came with the launch of VEO 3, Google’s latest AI-powered video generation model. Developed by DeepMind, VEO 3 can generate high-definition videos from simple text prompts, but its true innovation lies in its ability to create synchronized audio—including dialogue, background sounds, and music.

This means users can now produce cinematic-quality videos without cameras, crews, or post-production editing. For example, a prompt like “a stand-up comedian performing at a small club” results in a full video, complete with the comedian’s voice, audience laughter, and ambient club sounds—all generated by AI.

VEO 3 represents a leap forward for content creators, educators, and marketers, dramatically lowering the barriers to professional-grade video production. The model’s advanced capabilities, such as precise lip-syncing and realistic motion, blur the line between human-made and AI-generated content, ushering in a new era of storytelling.

Google XR Glasses: Augmented Reality for Everyday Life

Google’s XR Glasses 2.0 were introduced as the next evolution in smart eyewear, featuring live translation and AR navigation directly in the wearer’s field of view. Directions, contextual information, and translations are displayed on a discreet screen, visible only to the user, enabling private and seamless augmented reality experiences.

These glasses aim to leapfrog competitors by offering features that Apple had only planned for release in 2027. With XR Glasses 2.0, Google is betting big on a future where digital information is overlaid onto the real world, enhancing navigation, communication, and daily tasks in ways that feel natural and unobtrusive.

Gemini Ultra: The Ultimate AI Subscription

Rounding out the announcements is "Gemini Ultra," Google’s new premium subscription service priced at $250 per month. Subscribers receive unlimited early access to cutting-edge AI features, 30TB of cloud storage, and YouTube Premium. Gemini Ultra is positioned as a high-end offering for power users, professionals, and enterprises seeking maximum AI capabilities and storage for their creative and business needs.

Conclusion: The AI-First Future

The innovations unveiled at Google I/O 2025 highlight a decisive shift towards AI-first products and services. From reimagining search and personal assistants to democratizing high-end video creation and wearable AR, Google is integrating advanced AI into every facet of its ecosystem. These developments promise not just incremental improvements, but a fundamental change in how we interact with technology, making it more intelligent, responsive, and seamlessly woven into daily life.

Gin, Echo, and Fiber Compared: Which One Should You Choose?

With Code Example — Sat, 24 May 2025 05:01:18 +0000

I was facing a problem while choosing between the Golang frameworks for my next project. So I decided to test each of them to find the best one to process my request faster. I have created the same program in 3 different golang web frameworks to test and provide a comparison between them. I have chosen the Gin, Echo, and Fiber golang web frameworks.

Test Setup

To test the application, we need to create three applications with a simple HTTP GET request listening on port 8080 for GIN, Echo. and Fiber. I have used the following command to create the projects

mkdir golang-test
cd golang-test
mkdir gin
cd gin
go mod init gin-test
cd ../
mkdir echo
cd echo
go mod init echo-test
cd ../
mkdir fiber
cd fiber
go mod init fibcer-test

create directories for golang web framework test

Subscribe To Our Newsletter

Learn programming with real-world code examples.

Email sent! Check your inbox to complete your signup.

No spam. Unsubscribe anytime.

After successfully creating and implementing the project, we have to create the main.Go to the file in each folder to create a simple HTTP GET server. Here is the sample code for each of them -

gin.main.go

package main

import (
    "log"
    "time"

    "github.com/gin-gonic/gin"
)

func main() {
    r := gin.Default()

    // Middleware to measure time
    r.Use(func(c *gin.Context) {
        start := time.Now()
        c.Next()
        elapsed := time.Since(start)
        log.Printf("Gin: %s %s took %s\n", c.Request.Method, c.Request.URL.Path, elapsed)
    })

    r.GET("/hello", func(c *gin.Context) {
        c.JSON(200, gin.H{"message": "Hello, World!"})
    })

    r.Run(":8080")
}

Golang gin http with took time middleware

echo/main.go

package main

import (
    "log"
    "time"

    "github.com/labstack/echo/v4"
)

func main() {
    e := echo.New()

    // Custom timing middleware
    e.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
        return func(c echo.Context) error {
            start := time.Now()
            err := next(c)
            elapsed := time.Since(start)
            log.Printf("Echo: %s %s took %s\n", c.Request().Method, c.Request().URL.Path, elapsed)
            return err
        }
    })

    e.GET("/hello", func(c echo.Context) error {
        return c.JSON(200, map[string]string{"message": "Hello, World!"})
    })

    e.Logger.Fatal(e.Start(":8080"))
}

Golang echo http with took time middleware

fiber/main.go

// main.go (Fiber)
package main

import (
    "log"
    "time"

    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()

    // Middleware to measure time
    app.Use(func(c *fiber.Ctx) error {
        start := time.Now()
        err := c.Next()
        elapsed := time.Since(start)
        log.Printf("Fiber: %s %s took %s\n", c.Method(), c.Path(), elapsed)
        return err
    })

    app.Get("/hello", func(c *fiber.Ctx) error {
        return c.JSON(fiber.Map{"message": "Hello, World!"})
    })

    log.Fatal(app.Listen(":8080"))
}

Golang fiber http with took time middleware

Now we have all http servers ready to serve the http get request at http://localhost:8080/hello

Response

{
    "message": "Hello, World!"
}

Start testing

To test by simulating 1000 requests, I used a bash script to send the requests. You can create this file by pasting the following content -

run.sh

#!/bin/bash

URL="http://localhost:8080/hello"
COUNT=1000

echo "Sending $COUNT requests to $URL..."

for ((i = 1; i <= COUNT; i++)); do
    curl -s -o /dev/null "$URL"
done

After that, we have to change the permission of this run.sh file to execute it.

chmod +x ./run.sh

Now, we are ready to test. Use the following command to run each HTTP server one by one and execute the run.sh file to send 1000 requests to each server

# run gin server
cd gin && go run main.go

# run echo server
cd echo && go run main.go

# run fiber server
cd fiber && go run main.go

# run bash file 
./run.sh

Results

I am attaching the screenshots for each of the http server response below -

Golang Gin

Golang Echo

Golang Fiber

Average execution time

After simulating the test, I have the average execution time for each framework, which is -

GIN - 44.6 ms

Echo - 28.1 ms

Fiber - 58.2 ms

Go Web Framework Response Times

So here we have the results of getting started with your next golang web framework.

Conclusion

I have shown the results for each of them, and here are my final thoughts for choosing the Golang framework for your next web project -

💡

If you want the fastest, then use - ***Echo*

If you want the easiest, then use - ***Gin*

If you are from an express.js background, then use - ***Fiber*

Thank you for reading, feel free to provide your thoughts