Nithin Bharadwaj

Posted on May 6

8 Powerful JavaScript Techniques for Building Serverless Applications

#programming #devto #javascript #softwareengineering

As a best-selling author, I invite you to explore my books on Amazon. Don't forget to follow me on Medium and show your support. Thank you! Your support means the world!

JavaScript has revolutionized how we build modern applications, especially in the serverless computing realm. Serverless architectures free developers from infrastructure management, allowing them to focus on code that directly adds business value. I've spent years implementing serverless solutions and want to share eight powerful JavaScript techniques that will enhance your serverless applications.

Client-Side Routing in Serverless Applications

Client-side routing is crucial for serverless applications where each route might invoke different functions. Traditional server routing doesn't apply in the same way, so we need to implement routing that works with this paradigm.

When building serverless applications, I've found that implementing clean routing requires special consideration. Here's a pattern I use with modern frameworks:

// Using React Router with serverless endpoints
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { lazy, Suspense } from 'react';

// Lazy load components to reduce initial bundle size
const Home = lazy(() => import('./pages/Home'));
const Products = lazy(() => import('./pages/Products'));
const ProductDetail = lazy(() => import('./pages/ProductDetail'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:id" element={<ProductDetail />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

This approach works well with API Gateway endpoints. For each route, I configure a component that interacts with specific serverless functions. The real magic happens in how these components interact with the backend:

// In ProductDetail.js
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const { id } = useParams();

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`${process.env.REACT_APP_API_URL}/products/${id}`);
        const data = await response.json();
        setProduct(data);
      } catch (error) {
        console.error('Error fetching product:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchProduct();
  }, [id]);

  if (loading) return <div>Loading product...</div>;
  if (!product) return <div>Product not found</div>;

  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <div>Price: ${product.price}</div>
    </div>
  );
}

State Management for Serverless Architectures

Serverless functions are stateless by nature, which creates challenges for maintaining application state. I've developed several strategies to address this limitation.

First, external state stores become essential. My go-to approach combines client-side state with cloud-based persistence:

// Redux toolkit store with persistence
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import userReducer from './userSlice';
import cartReducer from './cartSlice';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['cart'], // only persist cart data
};

const persistedCartReducer = persistReducer(persistConfig, cartReducer);

export const store = configureStore({
  reducer: {
    user: userReducer,
    cart: persistedCartReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST'],
      },
    }),
});

export const persistor = persistStore(store);

For data that needs server persistence, I leverage DynamoDB with optimistic UI updates:

// User profile update with optimistic UI
const updateProfile = async (userId, updatedData) => {
  // Optimistically update UI
  dispatch(setUserProfile(updatedData));

  try {
    // Update in database via Lambda function
    const response = await fetch(`${API_URL}/users/${userId}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${getToken()}`
      },
      body: JSON.stringify(updatedData)
    });

    if (!response.ok) {
      throw new Error('Failed to update profile');
    }

    // Confirm with actual response data
    const result = await response.json();
    dispatch(setUserProfile(result));
  } catch (error) {
    // Revert optimistic update on failure
    dispatch(setUserProfile(originalData));
    console.error('Error updating profile:', error);
    alert('Failed to update profile. Please try again.');
  }
};

Authentication Flow for Serverless Applications

Authentication in serverless requires careful planning since we can't rely on sessions in the traditional sense. I've implemented JWT-based auth flows that work seamlessly with serverless architectures.

Here's my approach for a complete authentication system:

// Auth service for serverless applications
const authService = {
  async login(email, password) {
    try {
      const response = await fetch(`${API_URL}/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'Login failed');
      }

      const { accessToken, refreshToken, user } = await response.json();

      // Store tokens securely
      localStorage.setItem('refreshToken', refreshToken);
      this.setSession(accessToken, user);

      return user;
    } catch (error) {
      console.error('Login error:', error);
      throw error;
    }
  },

  setSession(accessToken, user) {
    if (accessToken) {
      localStorage.setItem('accessToken', accessToken);
      localStorage.setItem('user', JSON.stringify(user));
      // Set token expiry time
      const expireAt = new Date();
      expireAt.setSeconds(expireAt.getSeconds() + 3600); // 1 hour
      localStorage.setItem('expiresAt', expireAt.toString());
    } else {
      localStorage.removeItem('accessToken');
      localStorage.removeItem('user');
      localStorage.removeItem('expiresAt');
    }
  },

  async refreshToken() {
    try {
      const refreshToken = localStorage.getItem('refreshToken');

      if (!refreshToken) {
        throw new Error('No refresh token available');
      }

      const response = await fetch(`${API_URL}/auth/refresh`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ refreshToken })
      });

      if (!response.ok) {
        // If refresh fails, log out the user
        this.logout();
        throw new Error('Session expired. Please login again.');
      }

      const { accessToken, user } = await response.json();
      this.setSession(accessToken, user);

      return accessToken;
    } catch (error) {
      console.error('Token refresh error:', error);
      throw error;
    }
  },

  logout() {
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    localStorage.removeItem('user');
    localStorage.removeItem('expiresAt');
    window.location.href = '/login';
  },

  isAuthenticated() {
    const expiresAt = localStorage.getItem('expiresAt');
    return expiresAt && new Date(expiresAt) > new Date();
  },

  // Create axios instance with automatic token refresh
  createApiInstance() {
    const api = axios.create({
      baseURL: API_URL
    });

    api.interceptors.request.use(
      async config => {
        if (!this.isAuthenticated()) {
          try {
            await this.refreshToken();
          } catch (error) {
            this.logout();
            return Promise.reject(error);
          }
        }

        const accessToken = localStorage.getItem('accessToken');
        if (accessToken) {
          config.headers.Authorization = `Bearer ${accessToken}`;
        }

        return config;
      },
      error => Promise.reject(error)
    );

    return api;
  }
};

Function Composition in Serverless

One of the most powerful techniques I use in serverless development is function composition. This approach allows me to create reusable middleware patterns and promote code reuse across functions.

Here's a robust middleware system I've implemented for AWS Lambda:

// Middleware pattern for AWS Lambda
const createHandler = (...middlewares) => {
  return async (event, context) => {
    // Create a mutable request object that will be passed through all middlewares
    const req = { event, context, body: {}, params: {} };
    const res = {
      status: 200,
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': true
      },
      body: {}
    };

    try {
      // Parse request body if available
      if (event.body) {
        req.body = JSON.parse(event.body);
      }

      // Parse path parameters
      if (event.pathParameters) {
        req.params = event.pathParameters;
      }

      // Run all middleware functions in sequence
      for (const middleware of middlewares) {
        await middleware(req, res);

        // If response is already sent, stop processing
        if (res.sent) {
          break;
        }
      }

      // Format final response
      return {
        statusCode: res.status,
        headers: res.headers,
        body: JSON.stringify(res.body)
      };
    } catch (error) {
      console.error('Error processing request:', error);

      return {
        statusCode: error.statusCode || 500,
        headers: res.headers,
        body: JSON.stringify({
          message: error.message || 'Internal Server Error'
        })
      };
    }
  };
};

// Example usage
module.exports.getUser = createHandler(
  validateTokenMiddleware,
  logRequestMiddleware,
  async (req, res) => {
    const userId = req.params.id;
    const user = await getUserFromDatabase(userId);

    if (!user) {
      res.status = 404;
      res.body = { message: 'User not found' };
      return;
    }

    res.body = { user };
  }
);

Cold Start Optimization

Cold starts can be a significant performance bottleneck in serverless applications. I've developed several strategies to minimize their impact.

One effective approach is to use a connection pool for database connections:

// Optimized database connection for Lambda
const mongoose = require('mongoose');

let conn = null;

const connectToDatabase = async () => {
  if (conn) {
    console.log('Using existing database connection');
    return conn;
  }

  console.log('Creating new database connection');
  conn = await mongoose.connect(process.env.MONGODB_URI, {
    serverSelectionTimeoutMS: 5000,
    maxPoolSize: 10,
    minPoolSize: 5
  });

  return conn;
};

// Lambda handler with optimized DB connection
module.exports.handler = async (event) => {
  try {
    await connectToDatabase();

    // Now we can use mongoose models
    const User = mongoose.model('User', userSchema);
    const users = await User.find().limit(10);

    return {
      statusCode: 200,
      body: JSON.stringify(users)
    };
  } catch (error) {
    console.error('Error:', error);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Internal server error' })
    };
  }
};

Another key optimization is code splitting to reduce the size of Lambda packages:

// webpack.config.js for Lambda function optimization
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  mode: 'production',
  entry: {
    userFunctions: './src/functions/users/index.js',
    productFunctions: './src/functions/products/index.js',
    authFunctions: './src/functions/auth/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },
  externals: [nodeExternals()],
  optimization: {
    minimize: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: { node: '14' } }]]
          }
        }
      }
    ]
  }
};

Offline Support for Serverless Applications

Providing offline support is critical for creating resilient applications. I implement this using a combination of service workers and IndexedDB.

Here's a pattern I've used successfully:

// Service worker registration for offline support
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('ServiceWorker registered with scope:', registration.scope);
    }).catch(error => {
      console.error('ServiceWorker registration failed:', error);
    });
  });
}

// service-worker.js
const CACHE_NAME = 'app-cache-v1';
const OFFLINE_URL = '/offline.html';
const OFFLINE_API_RESPONSE = { message: 'You are offline' };

// Cache static assets on install
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll([
          '/',
          '/index.html',
          '/offline.html',
          '/styles.css',
          '/app.js',
          '/images/logo.png'
        ]);
      })
  );
});

self.addEventListener('fetch', event => {
  // Handle API requests differently from static assets
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          return response;
        })
        .catch(() => {
          // When API call fails due to offline, attempt to serve from IndexedDB
          return serveFromIndexedDB(event.request)
            .then(offlineResponse => {
              if (offlineResponse) {
                return new Response(JSON.stringify(offlineResponse), {
                  headers: { 'Content-Type': 'application/json' }
                });
              }

              // If no offline data, return generic offline response
              return new Response(JSON.stringify(OFFLINE_API_RESPONSE), {
                headers: { 'Content-Type': 'application/json' }
              });
            });
        })
    );
  } else {
    // For regular assets, try network first then cache
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          return caches.match(event.request)
            .then(cachedResponse => {
              if (cachedResponse) {
                return cachedResponse;
              }

              // If not in cache, serve offline page for navigation requests
              if (event.request.mode === 'navigate') {
                return caches.match(OFFLINE_URL);
              }

              return new Response('', {
                status: 408,
                statusText: 'Request timed out'
              });
            });
        })
    );
  }
});

// IndexedDB helper for offline data
function serveFromIndexedDB(request) {
  return new Promise((resolve, reject) => {
    const url = new URL(request.url);
    const endpoint = url.pathname;

    const dbPromise = indexedDB.open('OfflineDB', 1);

    dbPromise.onsuccess = event => {
      const db = event.target.result;
      const transaction = db.transaction('offlineData', 'readonly');
      const store = transaction.objectStore('offlineData');
      const getRequest = store.get(endpoint);

      getRequest.onsuccess = event => {
        const result = event.target.result;
        resolve(result ? result.data : null);
      };

      getRequest.onerror = event => {
        console.error('Error reading from IndexedDB', event);
        resolve(null);
      };
    };

    dbPromise.onerror = event => {
      console.error('IndexedDB error:', event);
      resolve(null);
    };
  });
}

Distributed Logging in Serverless

Tracking requests across multiple serverless functions requires a solid logging strategy. I implement correlation IDs to follow request flows through the system:

// Logging middleware for serverless functions
const uuid = require('uuid');

const createLoggingMiddleware = () => {
  return (req, res, next) => {
    // Generate or extract correlation ID
    const correlationId = 
      req.event.headers['x-correlation-id'] || 
      uuid.v4();

    // Attach to request object
    req.correlationId = correlationId;

    // Add to response headers
    res.headers['x-correlation-id'] = correlationId;

    // Create logger with correlation ID
    req.logger = {
      info: (message, meta = {}) => {
        console.log(JSON.stringify({
          level: 'info',
          message,
          correlationId,
          timestamp: new Date().toISOString(),
          ...meta
        }));
      },
      error: (message, error, meta = {}) => {
        console.error(JSON.stringify({
          level: 'error',
          message,
          errorName: error.name,
          errorMessage: error.message,
          stackTrace: error.stack,
          correlationId,
          timestamp: new Date().toISOString(),
          ...meta
        }));
      },
      warn: (message, meta = {}) => {
        console.warn(JSON.stringify({
          level: 'warn',
          message,
          correlationId,
          timestamp: new Date().toISOString(),
          ...meta
        }));
      }
    };

    req.logger.info('Request received', { 
      path: req.event.path,
      method: req.event.httpMethod,
      queryParams: req.event.queryStringParameters
    });

    // Continue to next middleware
    next();
  };
};

// Usage in Lambda handler
module.exports.handler = createHandler(
  createLoggingMiddleware(),
  validateToken,
  async (req, res) => {
    try {
      req.logger.info('Processing order request');

      const order = await createOrder(req.body);

      req.logger.info('Order created successfully', { orderId: order.id });

      res.body = { success: true, order };
    } catch (error) {
      req.logger.error('Failed to create order', error);

      res.status = 500;
      res.body = { success: false, message: 'Failed to create order' };
    }
  }
);

Testing Strategy for Serverless Applications

Testing serverless applications presents unique challenges. I've developed a comprehensive approach that combines unit, integration, and end-to-end testing:

// Unit testing Lambda function with Jest
const AWS = require('aws-sdk-mock');
const { handler } = require('../src/functions/getUser');

describe('getUser Lambda function', () => {
  beforeAll(() => {
    // Mock DynamoDB get operation
    AWS.mock('DynamoDB.DocumentClient', 'get', (params, callback) => {
      if (params.Key.userId === 'user123') {
        callback(null, { 
          Item: { 
            userId: 'user123', 
            name: 'Test User', 
            email: 'test@example.com' 
          } 
        });
      } else {
        callback(null, {});
      }
    });
  });

  afterAll(() => {
    AWS.restore('DynamoDB.DocumentClient');
  });

  test('should return user when found', async () => {
    const event = {
      pathParameters: { id: 'user123' },
      headers: {}
    };

    const response = await handler(event);
    const body = JSON.parse(response.body);

    expect(response.statusCode).toBe(200);
    expect(body).toHaveProperty('user');
    expect(body.user.userId).toBe('user123');
    expect(body.user.name).toBe('Test User');
  });

  test('should return 404 when user not found', async () => {
    const event = {
      pathParameters: { id: 'nonexistent' },
      headers: {}
    };

    const response = await handler(event);
    const body = JSON.parse(response.body);

    expect(response.statusCode).toBe(404);
    expect(body).toHaveProperty('message');
    expect(body.message).toBe('User not found');
  });
});

// Integration testing with serverless-offline
const axios = require('axios');

describe('User API Integration Tests', () => {
  const API_URL = 'http://localhost:3000';
  let authToken;

  beforeAll(async () => {
    // Login to get auth token
    const response = await axios.post(`${API_URL}/auth/login`, {
      email: 'test@example.com',
      password: 'password123'
    });

    authToken = response.data.token;
  });

  test('should create a new user', async () => {
    const userData = {
      name: 'New User',
      email: 'newuser@example.com',
      role: 'user'
    };

    const response = await axios.post(`${API_URL}/users`, userData, {
      headers: { Authorization: `Bearer ${authToken}` }
    });

    expect(response.status).toBe(201);
    expect(response.data).toHaveProperty('user');
    expect(response.data.user.name).toBe(userData.name);
    expect(response.data.user.email).toBe(userData.email);
    expect(response.data.user).toHaveProperty('id');

    // Save user ID for later tests
    createdUserId = response.data.user.id;
  });

  test('should get user by ID', async () => {
    const response = await axios.get(`${API_URL}/users/${createdUserId}`, {
      headers: { Authorization: `Bearer ${authToken}` }
    });

    expect(response.status).toBe(200);
    expect(response.data).toHaveProperty('user');
    expect(response.data.user.id).toBe(createdUserId);
  });
});

Serverless development presents unique challenges, but with these JavaScript techniques, you can build powerful, resilient applications. By implementing client-side routing, effective state management, secure authentication, function composition, cold start optimization, offline support, distributed logging, and comprehensive testing, you'll create serverless applications that scale gracefully and provide excellent user experiences.

These patterns have served me well in real-world projects, and I'm confident they'll help you build better serverless applications. The serverless paradigm continues to evolve, but these fundamental techniques will remain relevant as the foundation of effective serverless architecture.

101 Books

101 Books is an AI-driven publishing company co-founded by author Aarav Joshi. By leveraging advanced AI technology, we keep our publishing costs incredibly low—some books are priced as low as $4—making quality knowledge accessible to everyone.

Check out our book Golang Clean Code available on Amazon.

Stay tuned for updates and exciting news. When shopping for books, search for Aarav Joshi to find more of our titles. Use the provided link to enjoy special discounts!

Our Creations

Be sure to check out our creations:

We are on Medium

DEV Community