Forem: Sonu Jangra

The Secret Sauce to Building Scalable Systems

Sonu Jangra — Fri, 31 Jan 2025 15:10:09 +0000

Scalability in system design refers to the capability of a system to handle growing amounts of work or accommodate increased user traffic without sacrificing performance. It ensures that as demand grows, the system can maintain efficiency, speed, and reliability.

Imagine a restaurant that starts with just a few tables and a single chef. As more customers arrive, the restaurant can add more tables, hire additional chefs, or even open new branches to handle the increasing demand without compromising service quality. In the digital world, scalable systems work similarly—they adapt to increasing demands seamlessly.

How Can a System Grow?

There are different ways a system can grow to handle increased demands. Let's break them down with unique examples:

1. Vertical Scaling (Scaling Up)
This involves adding more resources (CPU, RAM, storage) to an existing server.
Example: Upgrading the kitchen equipment to cook more meals at the same time.
Use Case: A database server upgraded with more memory to handle larger datasets.

2. Horizontal Scaling (Scaling Out)
Adding more servers to distribute the workload.
Example: Adding more dining areas and hiring additional chefs to serve more customers simultaneously.
Use Case: A social media platform adding more servers to support millions of concurrent users.

How to Scale a System

1. Load Balancing
Distributes incoming traffic across multiple servers to ensure no single server is overwhelmed.
Example: Assigning customers to different waiters based on table availability to ensure efficient service.
Use Case: An online ticketing system using NGINX to balance traffic during the launch of a popular event.

2. Database Scaling
Vertical Scaling: Upgrading the database hardware.
Horizontal Scaling: Partitioning the database to distribute data.
Example: Splitting kitchen tasks between different chefs for efficiency.
Use Case: A global e-commerce platform partitioning customer data by geographic regions.

3. Caching
Storing frequently accessed data in memory for faster retrieval.
Example: Preparing popular dishes in advance to reduce waiting times.
Use Case: A news website caching headlines to reduce database queries.

4. Microservices Architecture
Breaking down a monolithic application into smaller, independent services.
Example: Assigning different chefs specialized in appetizers, main courses, and desserts.
Use Case: A ride-sharing app with separate services for driver matching, payments, and notifications.

5. Content Delivery Network (CDN)
Distributes static content across geographically dispersed servers.
Example: Setting up multiple beverage stations throughout the restaurant to serve drinks faster.
Use Case: A video streaming platform using a CDN to deliver content globally with minimal buffering.

6. Auto-scaling
Automatically adjusts the number of server instances based on demand.
Example: Calling in additional staff during busy dinner hours.
Use Case: A retail website automatically scaling up server instances during Black Friday sales.

7. Message Queues and Asynchronous Processing
Handling tasks asynchronously to avoid blocking operations.
Example: A restaurant pager system that notifies customers when their table is ready.
Use Case: An email marketing service queuing bulk email sends to avoid system overload.

8. Monitoring and Alerts
Tracking system performance to detect bottlenecks and trigger scaling actions.
Example: Having a manager monitor table turnover and kitchen efficiency to adjust staffing.
Use Case: A cloud service provider using Prometheus and Grafana to monitor system health.

9. Stateless Services
Designing services that do not maintain session state, making them easier to scale.
Example: Self-service kiosks where customers place orders independently.
Use Case: An API gateway handling thousands of requests independently.

10. Containerization and Orchestration
Using containers for application deployment and orchestration tools to manage scaling.
Example: Portable food stations that can be quickly set up during food festivals.
Use Case: A microservices-based application running on Kubernetes clusters.

Best Practices for System Scalability

Plan for Scalability from the Start: Build systems with scalability in mind to avoid costly refactoring.
Optimize Before Scaling: Identify and optimize bottlenecks before scaling resources.
Use Distributed Architectures: Favor distributed systems for better scalability and fault tolerance.
Leverage Cloud Services: Cloud providers offer scalable infrastructure and managed services.
Monitor Continuously: Regularly monitor system performance and resource utilization.

React vs Svelte: A Performance Benchmarking

Sonu Jangra — Thu, 30 Jan 2025 12:54:39 +0000

In the world of frontend frameworks, React and Svelte are two of the most popular choices among developers. React, with its large ecosystem and community, has been a dominant player in the JavaScript landscape for years. On the other hand, Svelte, a newer and more innovative framework, offers a fresh approach by shifting much of the work from the browser to compile time. In this blog post, we’ll dive deep into a performance benchmarking comparison of React vs Svelte, examining key metrics such as load time, rendering performance, bundle size, and memory usage.

What Makes Svelte and React Different?
Before jumping into the benchmark results, let’s quickly understand the primary difference between React and Svelte:

React: React is a component-based UI library that uses a virtual DOM to update the UI efficiently. It follows the declarative paradigm and manages state changes in an application by comparing the virtual DOM with the real DOM, calculating the minimal set of changes, and updating the UI accordingly.

Svelte: Svelte is a relatively new framework that takes a radically different approach. Instead of using a virtual DOM or relying on runtime overhead, Svelte compiles the app’s components into efficient imperative code at build time. This results in a smaller runtime and fewer resources spent on updating the UI.

Key Metrics for Performance Benchmarking
To perform a fair comparison, we’ll benchmark both frameworks across the following key performance metrics:

Bundle Size: Smaller bundle sizes lead to faster load times and better performance, particularly on mobile devices or slower networks.
Initial Load Time: This is the time it takes for the application to load for the first time and render the content on the screen.
Render Time / Updates: How fast the framework can render and update the UI in response to state changes.
Memory Usage: Efficient memory usage is essential for large applications. We’ll look at how much memory is used as the application grows.
CPU Usage: High CPU usage during UI rendering or state changes can degrade performance, especially on lower-end devices.

Summary:

Performance: Svelte excels in terms of bundle size, initial load time, render time, memory usage, and CPU usage due to its compile-time optimizations and lack of virtual DOM.
Ecosystem and Tooling: React offers a more mature ecosystem with a wide range of libraries, third-party tools, and a larger community, making it ideal for complex, large-scale applications.
Best Choice: If you prioritize performance and lightweight applications, Svelte is the winner. However, if you're looking for a mature, scalable framework with extensive ecosystem support, React remains a top choice.

Setting Up AG Grid in SvelteJS

Sonu Jangra — Thu, 30 Jan 2025 12:18:47 +0000

AG Grid is a powerful and feature-rich grid component for displaying large datasets in a flexible and efficient way. If you're using SvelteJS version 5.0.0 and want to integrate AG Grid into your project, you're in the right place! In this blog, I'll walk you through the process of setting up AG Grid in Svelte, including installing the necessary dependencies, configuring the grid, and rendering it in your Svelte components.

Prerequisites
Before we start, make sure you have the following:

Node.js installed (Preferably the latest stable version).
A Svelte project setup (If not, you can create one by running npm create svelte@latest).
Basic understanding of SvelteJS and its component-based structure.

Step 1: Installing Dependencies
To begin, you need to install AG Grid and its necessary styles in your Svelte project. Open your terminal and run the following commands:

npm install --save ag-grid-community
Step 2: Creating the AG Grid Component
Now that we have the necessary dependencies installed, let’s create a Svelte component to render the grid.

In your src/routes (or src/components/common/) folder, create a new file called Grid.svelte.
Add the following code to initialize and render the AG Grid:

<script lang="ts">
    import { onMount } from 'svelte';
    import {
        createGrid,
        ModuleRegistry,
        ClientSideRowModelModule,
        type GridOptions,
        themeQuartz,
        colorSchemeDarkBlue
    } from 'ag-grid-community';

    // Register AG Grid Modules
    ModuleRegistry.registerModules([ClientSideRowModelModule]);

    export let columnDefs: Array<any> = [];
    export let rowData: Array<any> = [];

    // Create a custom dark theme using Theming API
    const darkTheme = themeQuartz.withPart(colorSchemeDarkBlue).withParams({
        backgroundColor: '#212121',
        foregroundColor: '#ffffff',
        headerBackgroundColor: '#37474f',
        headerTextColor: '#cfd8dc',
        oddRowBackgroundColor: '#263238'
    });

    let gridDiv: HTMLDivElement;

    onMount(() => {
        const gridOptions: GridOptions<any> = {
            theme: darkTheme, // Apply custom dark theme
            columnDefs,
            rowData,
            defaultColDef: {
                sortable: true,
                filter: true
            }
        };

        if (gridDiv) {
            createGrid(gridDiv, gridOptions); // Create the grid with custom options
        }
    });
</script>

<!-- Grid Container -->
<div bind:this={gridDiv} style="height: 400px; width: 100%;"></div>

Here’s a breakdown of the code:

columnDefs: Defines the columns you want in your grid, including the headers and the field names from the row data.
rowData: Holds the data that will populate the grid.

Step 3: Using the AG Grid Component
Next, let’s use the Grid.svelte component we just created in the main Svelte component (usually App.svelte).

Open src/App.svelte and add the following code:

<script>
    import Grid from '../../components/common/Grid.svelte';
    const columns = [
        { headerName: 'Course', field: 'course' },
        { headerName: 'Instructor', field: 'instructor' },
        { headerName: 'Duration', field: 'duration' },
        { headerName: 'Location', field: 'location' },
        { headerName: 'Rating', field: 'rating' }
    ];

    const rows = [
        {
            course: 'JavaScript Basics',
            instructor: 'John Doe',
            duration: '5 hours',
            location: 'Delhi',
            rating: '3'
        },
        {
            course: 'Svelte Fundamentals',
            instructor: 'Jane Smith',
            duration: '3 hours',
            location: 'Delhi',
            rating: '2'
        },
        {
            course: 'Advanced React',
            instructor: 'Jake White',
            duration: '6 hours',
            location: 'Delhi',
            rating: '5'
        }
    ];
</script>

<h1>Training Courses</h1>
<Grid columnDefs={columns} rowData={rows} />

Step 4: Run Your Project
Now that everything is set up, it’s time to run your project. In the terminal, run the following command:

npm run dev
This will start the Svelte development server, and you should be able to navigate to your app in the browser. If everything is set up correctly, you should see the AG Grid displaying the data we defined in the Grid.svelte component.