DEV Community: Nick Mousavi

Understanding Jitter Backoff: A Beginner's Guide

Nick Mousavi — Fri, 03 Jan 2025 09:00:47 +0000

Retry Necessity

Network failures are inevitable. Client applications must implement retry mechanisms to handle these failures. there are many reasons that you might encounter network failure.

It's better to implement retries with Exponential Backoff and Jitter

What is Exponential Backoff ?

In exponential backoff, we increase the delay between retry attempts exponentially.

let delay = 5000
let timerId = setTimeout(function request() {

  const requestSuccess = Math.random() > 0.7 // simulate 30% success rate

  if (!requestSuccess) {
    delay *= 2 // increase delay exponentially
    timerId = setTimeout(request, delay) // retry request
  }
  else {
    clearTimeout(timerId) // stop retries on success
  }
}, delay)

but, this can lead to thundering herd problem.

Thundering herd problem

In a traditional backoff strategy, when a client encounters a failure (like a server unavailability), it typically implements a retry mechanism. A naive approach might be to have all clients retry at the same time after a fixed interval, that makes Thundering herd problem.

Simple scenario:

Imagine you have 100 clients trying to access a service that temporarily goes down. With a traditional fixed backoff:

All 100 clients detect the service failure and wait exactly 5 seconds
After 5 seconds, ALL 100 clients simultaneously attempt to reconnect and it can cause further service instability and trigger another round of failure❗

On the other hand, Jitter can add some randomness to attempts.

What is Jitter?

Jitter adds random factor to our attempt intervals and it Prevents Synchronization(Stops multiple requests from retrying simultaneously) and Improves System Stability(Prevents recurring peak load patterns)

Let's add Jitter to our code example:

let delay = 5000
let timerId = setTimeout(function request() {

  const requestSuccess = Math.random() > 0.7 // simulate 30% success rate

  if (!requestSuccess) {
    const jitter = Math.random() * 1000; // add random factor
    delay = delay * 2 + jitter;
    timerId = setTimeout(request, delay) // retry request
  }
  else {
    clearTimeout(timerId) // stop retries on success
  }
}, delay)

Conclusion:

Exponential backoff combined with jitter is a crucial technique for building resilient and performant distributed systems. It allows client applications to handle failures gracefully without overwhelming the system, leading to a smoother and more reliable user experience.

How to Access a Child Component’s Ref with multi-root node (Fragment) in Vue 3

Nick Mousavi — Tue, 31 Dec 2024 21:08:41 +0000

Introduction

If you're used to Vue 2, you might remember that every component's template needed a single root element. In Vue 3, that's no longer necessary because of fragments. This means your components can now have multiple root elements without needing a wrapper.


<!-- Vue 2 -->
<template>
  <div> <!-- wrapper 😫 -->
    <h1>My Blog Post</h1>
    <ArticleComponent>{{ content }}</ArticleComponent>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <h1>My Blog Post</h1>
  <ArticleComponent>{{ content }}</ArticleComponent>
</template>

That's very similar to Fragment in React. However, Vue handles fragments behind the scenes. In fact, in Vue 3, you can think of the <template> tag as a fragment.

The `ref()` Problem

In Vue 2, we could easily set a ref on a child component, and it would refer to both the wrapper element and the component instance.

But in Vue 3, when there’s no wrapper element, what does the ref refer to? 🤔

If the child component uses the Options API or doesn't use <script setup>, the ref will point to the child component's this, giving the parent full access to its properties and methods.

What if we use <script setup> ?

Components using <script setup> are private by default. To expose properties, we need to use the defineExpose macro.

Access To Children's Element

This is what happen when you have wrapper (single root) element:

<!-- Child -->
<template>
  <div class="wrapper"> <!-- Root -->
    <h1>My Blog Post</h1>
    <ArticleComponent>{{ content }}</ArticleComponent>
  </div>
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value.$el); // <div class="wrapper">…</div>  // [!code highlight]
})
</script>

<template>
  <Child ref="childRef" />
</template>

And when you have more than one root:

<!-- Child -->
<template>
  <h1>My Blog Post</h1> <!-- Root 1 -->
  <ArticleComponent>{{ content }}</ArticleComponent> <!-- Root 2 -->
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value.$el); // #text  
})
</script>

<template>
  <Child ref="childRef" />
</template>

Wait, what, what happened?

When we using Fragment(multiple nodes), Vue creates a text node that wraps our child component root nodes.

When using Fragments in Vue 3, Vue inserts an empty text node at the beginning of the component as a marker, which is why $el returns a #text node.

#text is like a reference point that Vue uses internally.

Also I should mention that you have still access to component instance (if you don't use <script setup> in child).

Solution

1) Use Single Root Like this
2) Use Template Refs + defineExpose

Using Template Refs + defineExpose

<!-- Child -->
<script setup lang="ts">
import { ref } from 'vue';

const h1Ref = ref()
const articleRef = ref()


defineExpose({
  h1Ref,
  articleRef
})
</script>

<template>
  <h1 ref="h1Ref">My Blog Post</h1> 
  <ArticleComponent ref="articleRef">{{ content }}</ArticleComponent> 
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value); 
  //  {h1Ref: RefImpl, articleRef: RefImpl}
})
</script>

<template>
  <Child ref="childRef" />
</template>

Now you have access to your refs and all the things that you exposed by using defineExpose.

Why you should use both v-if and v-show to toggle heavy components in Vue ?

Nick Mousavi — Tue, 31 Dec 2024 21:03:19 +0000

Difference between `v-if` and `v-show`

If you are a Vue.js developer, you might know what's the difference, if not, let's check:

v-if: to Render a block conditionally.

v-show: to Display a block conditionally.

v-show renders once and remains in the DOM and only toggles the display CSS property.

That means if you have a heavy component and rendering is expensive, you can render it once(v-if) and toggle that 💯 times without re-rendering(v-show).

Example

  <template>
  <div v-if="isRendered">
    <div v-show="isVisible">
      <MyHeavyComponent/>
    </div>
  </div>
  </template>

If we only use v-show, we don't have control on rendering and it will be rendered immediately(not displaying) without any conditions.

Building a Production Stack: Docker, Meilisearch, NGINX & NestJS

Nick Mousavi — Tue, 31 Dec 2024 20:17:33 +0000

Introduction

If you’re reading this, chances are you’re already familiar with Elasticsearch and are now curious about Meilisearch. So, no need to start from the basics, let’s dive right into why Meilisearch might be the better choice!

Simplicity: Meilisearch has 90% fewer configuration options compared to Elasticsearch, meaning less time spent learning and setting up. For example, while Elasticsearch often requires 5–10 configurations just to index and search efficiently, Meilisearch works well out of the box with minimal tweaks. 😎
Performance: Meilisearch is designed for instant search and is optimized for low-latency results, typically under 50ms, which makes it feel snappier for end users. Elasticsearch, while powerful, often requires extra optimization to reach similar response times for smaller datasets.
Typo Tolerance: Meilisearch provides built-in typo tolerance without extra configuration, improving the user experience significantly.

If your use case doesn’t require massive scalability or advanced querying, Meilisearch is the simpler, faster, and more cost-effective option!

and if you are a Rustacean 🦀, yeah it is written in Rust language.

What’s the Plan?

We’re going to create a Nest application to seed Meilisearch, set up Meilisearch itself, and configure NGINX as reverse proxy in front of it.

NestJS Application

The repository with the complete code is linked at the end of this article.

Start by preparing your NestJS application.

Install the Meilisearch JavaScript Client:

npm install meilisearch

Now we want to create an endpoint to generate apiKey for front-end application, so we need a controller like this

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller('/')
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('api-key')
  async createApiKey() {
    return this.appService.createApiKey();
  }
}

then we need to add the functionality to our module service:

import { Injectable, OnModuleInit } from '@nestjs/common';
import { MeiliSearch } from 'meilisearch';

@Injectable()
export class AppService implements OnModuleInit {
  private meiliClient: MeiliSearch;
  private index = 'movies';

  constructor() {
    // Create new Meilisearch Instance
    this.meiliClient = new MeiliSearch({
      host: 'http://meilisearch:7700',
      apiKey: 'masterKey',
    });

    // Check MeiliSearch Health
    this.meiliClient.health().then(console.log);
  }

// Seed Meilisearch
  async onModuleInit() {
    await this.seed();
  }

// Generate API key for front-end search
  async createApiKey() {
    const key = await this.meiliClient.createKey({
      expiresAt: null,
      indexes: [this.index],
      name: 'Search API Key',
      actions: ['search', 'documents.get'],
      description: 'Use it to search from the frontend code',
    });

    return key;
  }

// Seeding Functionality
  private async seed() {
    const index = this.meiliClient.index(this.index);

    const documents = [
      { id: 1, title: 'Nick Mousavi', genres: ['Romance', 'Drama'] },
      { id: 2, title: 'Wonder Woman', genres: ['Action', 'Adventure'] },
      { id: 3, title: 'Life of Pi', genres: ['Adventure', 'Drama'] },
      { id: 4, title: 'Mad Max: Fury Road', genres: ['Adventure'] },
      { id: 5, title: 'Moana', genres: ['Fantasy', 'Action'] },
      { id: 6, title: 'Philadelphia', genres: ['Drama'] },
    ];

    await index.addDocuments(documents);
  }
}

MeiliSearch Option Object:

apiKey: 'masterKey' is the api key that we will configure in meilisearch service in docker-compose.yml file.
host: 'http://meilisearch:7700' is the Meilisearch address in our docker network.

createKey method options:

expiresAt: When the key becomes invalid (null means never expires)
indexes: Which Meilisearch indexes this key can access
name: Key identifier for your reference
actions: Permissions (search: can search, documents.get: can fetch individual documents)
description: Note about key's purpose

Now your NestJS application is ready to connect to MeiliSearch server and generate API keys.

Dockerizing

Here, we'll create a Dockerfile to containerize our NestJS application for production. At the root of your NestJS project, create a file named Dockerfile:

FROM node:22.12.0 AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build && npm prune --production



FROM gcr.io/distroless/nodejs22-debian12 AS production
ENV NODE_ENV=production
WORKDIR /app 
COPY --from=build /app/dist /app/dist
COPY --from=build /app/node_modules /app/node_modules
COPY --from=build /app/package.json /app/package.json

Perfect, now our NestJS production build is ready to add to our docker-compose.yml file.

NGINX Configuration

We'll use Nginx as a reverse proxy to route requests to our API and Meilisearch services in the Docker Compose setup. Create an nginx.conf file at the root of the project and add the following content:

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;

    upstream api {
        server api:3000;
    }

    upstream meilisearch {
        server meilisearch:7700;
    }

    server {
        listen 80;

        # API endpoints
        location /api/ {
            proxy_pass http://api/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # Meilisearch endpoints
        location /search/ {
            proxy_pass http://meilisearch/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

Now your NGINX webserver is ready to route requests to api and meilisearch services.

Docker Compose

We’ll use Docker Compose to manage all the services (API, NGINX, and Meilisearch) together.

Start by creating a docker-compose.yaml file at the root of the project and add the following content. Don’t worry, I’ll explain each service step by step!

services:

  # Nestjs API Service
  api:
    build:
      context: .
      target: production
      dockerfile: ./Dockerfile
    restart: unless-stopped
    networks:
      - biomousavi
    depends_on:
      - meilisearch
    ports:
      - 3000:3000
    command: 'dist/main.js'

  # Meilisearch Service
  meilisearch:
    image: getmeili/meilisearch:v1.12
    volumes:
      - meilisearch-volume:/meili_data
    ports:
      - '7700:7700'
    environment:
      - MEILI_MASTER_KEY=masterKey
    healthcheck:
      test: ['CMD', 'curl', '-f', 'http://localhost:7700']
      interval: 10s
      timeout: 5s
      retries: 5
    networks:
      - biomousavi

  # Nginx Service
  nginx:
    image: nginx:alpine
    ports:
      - '80:80'
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    networks:
      - biomousavi
    depends_on:
      - api
      - meilisearch

networks:
  biomousavi:
    driver: bridge

volumes:
  meilisearch-volume:

This Docker Compose file defines three services:

API Service: Runs the NestJS application in production mode, exposing it on port 3000. It depends on the Meilisearch service to start first.
Meilisearch Service: Runs Meilisearch for search functionality, storing its data in a persistent volume and secured with a master key. It listens on port 7700.
Nginx Service: Acts as a reverse proxy, routing requests to the API and Meilisearch. It uses a custom Nginx configuration and exposes port 80 for external access.

Your file structure should be something similar to this:

Run The Application

To build and run the application, use one of the following commands:

docker compose up --build
#OR run in detached mode
docker compose up --build -d

Generate a New API Key

In your client application, send a GET request to obtain a new API key for search requests:

curl 'http://localhost/api/api-key'

This request calls the NestJS API and returns a JSON response like this:

{
  "name": "Search API Key",
  "description": "Use it to search from the frontend code",
  "key": "a5e62c45497396bb1b0535b4cc4b84dec37713c5bdb4b78f18624af6f33ebac7",
  "uid": "82f8a1a4-77cd-481d-9fcb-21fdde13246f",
  "actions": ["search", "documents.get"],
  "indexes": ["movies"],
  "expiresAt": null,
  "createdAt": "2024-12-31T18:06:45.190728957Z",
  "updatedAt": "2024-12-31T18:06:45.190728957Z"
}

Perform a Search Request

Use the obtained API key (key) to search your index. Add it as a bearer token in the request:

curl 'http://localhost/search/indexes/movies/search?q=mad+max' -H 'Authorization: Bearer your_api_key'

Replace your_api_key with the key from the previous response.

It sends request to Meilisearch service.

The response should be similar to the following JSON:

{
  "hits": [
    {
      "id": 4,
      "title": "Mad Max: Fury Road",
      "genres": [
        "Adventure"
      ]
    }
  ],
  "query": "mad max",
  "processingTimeMs": 8,
  "limit": 20,
  "offset": 0,
  "estimatedTotalHits": 1
}

Conclusion

By combining Docker, Meilisearch, NGINX, and NestJS, you can set up a scalable, production-ready search solution with minimal configuration. This guide should help you streamline the process of creating, deploying your search engine. Whether you're optimizing for performance or simplicity, this stack provides a solid foundation for your next project.

If you found this guide helpful ❤️ and saved you time, I'd be incredibly grateful if you could show some support by giving the repository a ⭐ star on GitHub!

Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps

Nick Mousavi — Sat, 14 Dec 2024 13:18:59 +0000

Introduction

In today's fast-paced software development landscape, Continuous Integration and Continuous Deployment (CI/CD) have become essential for maintaining code quality, reducing manual errors, and accelerating delivery cycles.

By automating build, test, and deployment processes, development teams can focus more on creating innovative features and less on repetitive infrastructure tasks.

This guide will walk you through a comprehensive and straightforward approach to configuring GitHub Actions for Vue and Vite applications and using GitHub Pages for deployment, providing you with a clear and practical roadmap to implement CI/CD pipelines from scratch.

Creating a Fresh Vite/Vue Application

let's create a new vue application, you can use any vite template, we use create vue to have access to predefined unit test configuration.

npm create vue@latest

And here are the options we'll use:

You can configure your Vue application as you prefer, but for this guide, we'll use only Vitest for Unit Tests and the End-to-End testing option is set to No.

Configuring Vite Settings for Deployment

Now we need to set base property in vite.config.ts file.

If you are deploying to https://<USERNAME>.github.io/ (your github home page), or to a custom domain, you don't need this option and simply remove it.

But if you are deploying to https://<USERNAME>.github.io/<REPO>/ then set base to '/<REPO>/'.
more

We are deploying to our repo URL,
So our vite.config.ts file looks like this:

export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools()],
  base: '/vue-github-action/', // [!code focus]
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

Verifying Build and Test Commands

Run the build and test commands locally to check everything works correctly:

npm run build

npm run test:unit

Now if you get no error, commit all the changes and move to the next step.

Create Github Repo (Optional)

Now create a new Github repository (if you don't created yet) and push all the changes to it

Then push all the changes to your repo.

git push -u origin main

Setting Up GitHub Pages

Go to your Github Repository Settings

Navigate to Pages on the sidebar, under the Build and deployment section, change the source to Github Actions.

It should change to this

Now you are ready to add GitHub CI/CD workflow.

Add GitHub Action Workflow

This is the last step and after committing and pushing the changes, you'll see your app on GitHub pages.

At the root of your project, create ci-cd.yml file in the .github/workflows/ directory and add the following:

Note: name of the workflow can be anything, we just simply go with ci-cd.yml.

name: Test and Deploy static content to Pages

on:
  push:
    branches: ['main']

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  lint-and-test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22.12.0'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Lint Code
        run: npm run lint

      - name: Type Check
        run: npm run type-check

      - name: Run Unit Tests
        run: npm run test:unit

  deploy:
    needs: lint-and-test
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

commit and push the workflow to you github repo and Check your workflow result in Repository > Actions tab.

If you see the Green color, that means you did it!

Now check you github pages https://<USERNAME>.github.io/<REPO>/

So for me, it will be https://biomousavi.github.io/vue-github-action/

Note: If you get error on installing packages, you need to have package-lock.json in your project, because we use npm ci that looks for package-lock.json file.

Conclusion

GitHub Actions can make your Vue.js development workflow smoother. Automate, deploy, and focus on what matters most: writing great code.

If you found this guide helpful ❤️ and saved you time in setting up CI/CD for your Vue.js project, I'd be incredibly grateful if you could show some support by giving the repository a ⭐ star on GitHub!

DEV Community: Nick Mousavi

Understanding Jitter Backoff: A Beginner's Guide

Retry Necessity

What is Exponential Backoff ?

Thundering herd problem

Simple scenario:

What is Jitter?

Conclusion:

How to Access a Child Component’s Ref with multi-root node (Fragment) in Vue 3

Introduction

The ref() Problem

Access To Children's Element

Solution

Using Template Refs + defineExpose

Why you should use both v-if and v-show to toggle heavy components in Vue ?

Difference between v-if and v-show

Example

Building a Production Stack: Docker, Meilisearch, NGINX & NestJS

Introduction

What’s the Plan?

NestJS Application

Dockerizing

NGINX Configuration

Docker Compose

Run The Application

Generate a New API Key

Perform a Search Request

Conclusion

Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps

Introduction

Creating a Fresh Vite/Vue Application

Configuring Vite Settings for Deployment

Verifying Build and Test Commands

Create Github Repo (Optional)

Setting Up GitHub Pages

Add GitHub Action Workflow

Conclusion

The `ref()` Problem

Difference between `v-if` and `v-show`