redis
LearnGuidesDesign patterns to speed up MEAN and MERN stack applications

Learn

3 design patterns to speed up MEAN and MERN stack applications

Below you will find an excerpt from the e-book. Click here to download the full e-book.

Introduction#

If you don't design and build software with attention to performance, your applications can encounter significant bottlenecks when they go into production.

Over time, the development community has learned common techniques that work as reliable design patterns to solve well-understood problems, including application performance.

So what are design patterns? They are recommended practices to solve recurring design problems in software systems. A design pattern has four parts: a name, a problem description (a particular set of conditions to which the pattern applies), a solution (the best general strategy for resolving the problem), and a set of consequences.

Two development stacks that have become popular ways to build Node.js applications are the MEAN stack and the MERN stack. The MEAN stack is made up of the MongoDB database, the Express and Angular.js frameworks, and Node.js. It is a pure JavaScript stack that helps developers create every part of a website or application. In contrast, the MERN stack is made up of MongoDB, the Express and ReactJS frameworks, and Node.js.

Both stacks work well, which accounts for their popularity. But it doesn't mean the software generated runs as fast as it can—or as fast as it needs to.

In this post, we share one popular design pattern that developers use with Redis to improve application performance with MEAN and MERN stack applications: the master data-lookup pattern. We explain the pattern in detail and accompany it with an overview, typical use cases, and a code example. Our intent is to help you understand when and how to use this particular pattern in your own software development. The Ebook has other patterns too like The cache-aside pattern and The write-behind pattern

Building a movie application#

The demo application used in the rest of this tutorial showcases a movie application with basic create, read, update, and delete (CRUD) operations.

The movie application dashboard contains a search section at the top and a list of movie cards in the middle. The floating plus icon displays a pop-up when the user selects it, permitting the user to enter new movie details. The search section has a text search bar and a toggle link between text search and basic (that is, form-based) search. Each movie card has edit and delete icons, which are displayed when a mouse hovers over the card.

This tutorial uses a GitHub sample demo that was built using the following tools:

  • •Frontend: ReactJS (18.2.0)
  • •Backend: Node.js (16.17.0)
  • •Database: MongoDB
  • •Cache and database: Redis stack (using Docker)

The master data-lookup pattern#

To serve master data from Redis, preload the data from MongoDB.

  1. 1.Read the master data from MongoDB on application startup and store a copy of the data in Redis. This pre-caches the data for fast retrieval. Use a script or a cron job to repeatedly copy master data to Redis.
  2. 2.The application requests master data.
  3. 3.Instead of MongoDB serving the data, the master data will be served from Redis.

Use cases#

Consider this pattern when you need to

  • •Serve master data at speed: By definition, nearly every application requires access to master data. Pre-caching master data with Redis delivers it to users at high speed.
  • •Support massive master tables: Master tables often have millions of records. Searching through them can cause performance bottlenecks. Use Redis to perform real-time search on the master data to increase performance with sub-millisecond response.
  • •Postpone expensive hardware and software investments: Defer costly infrastructure enhancements by using Redis. Get the performance and scaling benefits without asking the CFO to write a check.

Demo#

The image below illustrates a standard way to showcase a UI that is suitable for master data lookups. The developer responsible for this application would treat certain fields as master data, including movie language, country, genre, and ratings, because they are required for common application transactions.

Consider the pop-up dialog that appears when a user who wants to add a new movie clicks the movie application plus the icon. The pop-up includes drop-down menus for both country and language. In this demonstration, Redis loads the values.

Code#

The two code blocks below display a fetch query of master data from both MongoDB and Redis that loads the country and language drop-down values.

Previously, if the application used MongoDB, it searched the static database to retrieve the movie's country and language values. That can be time-consuming if it's read from persistent storage—and is inefficient if the information is static.

*** BEFORE (MongoDB)***
*** MongoDB regular search query ***
function getMasterCategories() {
  ...
  db.collection("masterCategories").find({
    statusCode: {
      $gt: 0,
    },
    category: {
      $in: ["COUNTRY", "LANGUAGE"],
    },
  });
  ...
}

Instead, the “after” views in the code blocks show that the master data can be accessed with only a few lines of code—and much faster response times.

*** AFTER (Redis) ***
*** Redis OM Node query ***
function getMasterCategories() {
  ...
  masterCategoriesRepository
    .search()
    .where("statusCode")
    .gt(0)
    .and("categoryTag")
    .containOneOf("COUNTRY", "LANGUAGE");
  ...
}

Download the E-book#

Sensing a pattern here? The master data-lookup pattern is not the only design pattern you can use to improve application performance.

I’m sure you’re eager to learn more, so click here to download the full e-book.

Last updated on May 24, 2024
PreviousLearn 8 NoSQL Data Modeling Patterns in Redis
NextImport Data into Redis