DEV Community: Uzodufa Ebere

Understanding the Unit of Work Pattern in NestJS

Uzodufa Ebere — Fri, 17 Jan 2025 15:51:56 +0000

Introduction

A Unit of Work is a behavioral design pattern that helps manage complex transactions and maintain data consistency. It ensures that a set of changes to your data is treated as a single unit, and either all changes are successfully applied or none are. This is especially critical in enterprise applications, where multiple operations on different data sources need to be coordinated and committed atomically.

Design patterns provide reusable solutions to common software design problems. They promote code organization, readability, and scalability, enabling developers to write maintainable and efficient systems.

This article will guide you through:

Understanding the Unit of Work pattern.
Implementing UoW in a NestJS application.
Using a practical example to demonstrate the concept.
Practical considerations and challenges for real-world usage.

What is the Unit of Work Pattern?

At its core, the Unit of Work pattern manages changes to your data as a single transaction. It helps track entities that need to be inserted, updated, or deleted and coordinates changes to ensure consistency and manage transactions efficiently.

In simpler terms, we can think of a Unit of Work as

A "to-do list" for your database operations.
A means to track all the actions (e.g., inserts, updates, deletes) you want to perform and ensure they are all applied together or none at all.
A process to handle operation to the DB if something goes wrong during execution, the Unit of Work rolls back all changes to prevent partial updates and maintain data integrity.

Imagine you’re booking a flight ticket for a travel. You first select the flight going to your destination from your current location. Then you pick a seat after which you make payment. These steps are interdependent. If the payment fails, you wouldn’t want the flight to be booked without incomplete details or payment confirmation.
The Unit of Work ensures that all these steps are treated as one atomic operation:

If all steps succeed, the booking is confirmed.
If any step fails, the entire process is canceled.

Why Use the Unit of Work Pattern?

The UoW pattern reduces complexity by:

Consolidating multiple database operations into a single transaction.
Preventing partial updates that can lead to data corruption.
Decoupling transaction management from business logic.

When to Use the Unit of Work Pattern

The UoW pattern is beneficial in scenarios where:

Multiple entities are updated as part of a single operation.
Transaction consistency is critical.
You want to centralize transaction management for better maintainability.

Practical Example: Flight Booking System

Let’s use a Flight Booking System as an example. The system involves:

Booking flight details.
Saving passenger information.
Processing payments.

All these operations should either succeed together or fail together.

Note that the examples provided in this article are simplified to explain the design process and core concepts of the Unit of Work pattern. In real-life scenarios, the service and architecture would require further expansion and adjustments to handle edge cases, scalability, and maintainability in production environments.

Without Unit of Work

In this approach, each database operation is handled independently, without transaction management.

@Injectable()
export class FlightBookingService {
  constructor(
    @InjectRepository(FlightBookingRepository)
    private readonly flightBookingRepository: FlightBookingRepository,
    @InjectRepository(PassengerRepository)
    private readonly passengerRepository: PassengerRepository,
    @InjectRepository(PaymentRepository)
    private readonly paymentRepository: PaymentRepository,
     ) {}

  async bookFlightWithoutUoW(
    bookingData: Partial<FlightBooking>,
    passengerData: Partial<Passenger>,
    paymentData: Partial<Payment>,
  ): Promise<FlightBooking> {
    try {
      // Step 1: Reserve the flight
      const booking = await this.flightBookingRepository.save(bookingData);

      // Step 2: Save passenger details
      const passenger = { ...passengerData, booking };
      await this.passengerRepository.save(passenger);

      // Step 3: Process payment
      const payment = { ...paymentData, booking };
      await this.paymentRepository.save(payment);

      return booking;
    } catch (error) {
      console.error('Error during booking:', error.message);
      throw error;
    }
  }
}

Problems Without Unit of Work

No Atomicity: If payment saving fails, the flight booking and passenger details are still saved, leaving the database in an inconsistent state.
Error Handling Complexity: You would need to implement manual rollback logic for each step, which is error-prone and repetitive.
Scattered Transaction Logic: Each repository call handles its operations separately, leading to duplication and harder maintainability.

With Unit of Work

Using the Unit of Work pattern, all operations are wrapped in a transaction, ensuring that they succeed or fail together.

First, we implement our unit of work service

import { Injectable } from '@nestjs/common';
import { DataSource, QueryRunner } from 'typeorm';

@Injectable()
export class UnitOfWork {
  private queryRunner: QueryRunner;

  constructor(private readonly dataSource: DataSource) {
    this.queryRunner = this.dataSource.createQueryRunner();
  }

  async startTransaction(): Promise<void> {
    await this.queryRunner.connect();
    await this.queryRunner.startTransaction();
  }

  async commitTransaction(): Promise<void> {
    await this.queryRunner.commitTransaction();
  }

  async rollbackTransaction(): Promise<void> {
    await this.queryRunner.rollbackTransaction();
  }

  async release(): Promise<void> {
    await this.queryRunner.release();
  }

  getManager() {
    return this.queryRunner.manager;
  }
}

Then, we apply it to the flight booking service


@Injectable()
export class FlightBookingService {
  constructor(private readonly unitOfWork: UnitOfWork) {}

  async bookFlightWithUoW(
    bookingData: Partial<FlightBooking>,
    passengerData: Partial<Passenger>,
    paymentData: Partial<Payment>,
  ): Promise<FlightBooking> {
    await this.unitOfWork.startTransaction();
    try {
      // Step 1: Reserve the flight
      const booking = await this.unitOfWork.getManager().save(FlightBooking, bookingData);

      // Step 2: Save passenger details
      const passenger = { ...passengerData, booking };
      await this.unitOfWork.getManager().save(Passenger, passenger);

      // Step 3: Process payment
      const payment = { ...paymentData, booking };
      await this.unitOfWork.getManager().save(Payment, payment);

      // Commit the transaction
      await this.unitOfWork.commitTransaction();
      return booking;
    } catch (error) {
      // Rollback the transaction if anything fails
      await this.unitOfWork.rollbackTransaction();
      throw new Error('Flight booking failed: ' + error.message);
    } finally {
      // Release the transaction resources
      await this.unitOfWork.release();
    }
  }
}

Testing the codes. Below are examples for both "without" and "with" Unit of Work approaches.

Testing Without Unit of Work

it('should book a flight without unit of work', async () => {
  const bookingData = { flightNumber: 'FL123', departureDate: new Date() };
  const savedBooking = { id: 1, ...bookingData };

  bookingRepository.save = jest.fn().mockResolvedValue(savedBooking);

  const result = await service.bookFlightWithoutUoW(bookingData, {}, {});
  expect(result).toEqual(savedBooking);
  expect(bookingRepository.save).toHaveBeenCalledWith(bookingData);
});

Testing With Unit of Work

it('should book a flight with unit of work', async () => {
  const bookingData = { flightNumber: 'FL123', departureDate: new Date() };
  const savedBooking = { id: 1, ...bookingData };

  const mockSave = jest.fn();
  unitOfWork.getManager = jest.fn().mockReturnValue({ save: mockSave });

  mockSave.mockResolvedValueOnce(savedBooking);

  const result = await service.bookFlightWithUoW(bookingData, {}, {});
  expect(result).toEqual(savedBooking);
  expect(unitOfWork.startTransaction).toHaveBeenCalled();
  expect(unitOfWork.commitTransaction).toHaveBeenCalled();
});

Benefits of Using Unit of Work

Atomicity: All operations are treated as a single unit. If any step fails, all previous changes are rolled back automatically.
Consistency: The database remains in a consistent state, even in case of errors.
Simplified Error Handling: No need to manually undo changes; the Unit of Work ensures the rollback of all operations.
Reusability: The Unit of Work service can be reused across different parts of the application, reducing boilerplate code.

Practical Considerations for Real-World Applications

When implementing the UoW pattern in real-world applications, keep these points in mind:

Error Handling: Design robust error handling mechanisms to ensure transactions are rolled back properly.
Scalability: Consider how transactions impact performance, especially in high-concurrency environments.
Framework-Specific Features: Leverage features like TypeORM’s Transaction decorator for simple use cases.

Trade-Offs and Considerations

While the Unit of Work pattern offers significant benefits, it’s not without challenges:

Performance Overhead: Managing multiple entities in memory can impact performance.
Scalability: Distributed transactions spanning multiple services require additional complexity.
Error Handling: Designing robust error recovery mechanisms is essential for production systems.

Key Takeaways

The Unit of Work pattern simplifies transaction management and ensures consistency.
It centralizes logic for committing or rolling back changes, reducing the risk of partial updates.
Implementing the UoW pattern in NestJS can streamline database operations and improve maintainability.
Real-world implementations require additional attention to scalability, error handling, and performance.

By adopting the Unit of Work pattern, you can build applications that are robust, maintainable, and resilient to failure.

View the code on Github

Creating Dynamic Review Rating Displays with Font Awesome and Class Attribute in Angular.

Uzodufa Ebere — Sat, 29 Feb 2020 22:37:35 +0000

This article shows a simple and efficient way to create review ratings for stores and products using font awesome icons, and class attribute in Angular.

Font Awesome Icon provides us with amazing icons that are very performant for frontend development. The icons provide accessibility supports.

Prerequisite

It is assumed that you have a basic understanding of Angular and how to place font awesome CDN link in a website - that is adding the link to the head of the HTML code.

Steps

Create an angular app using the Angular CLI. Run ng new my-app-name.
Add the Font-Awesome CDN link to the head of index.html.
In the app.component.html, add the following code to add a div for the reviews

<div class="review" *ngFor="let review of reviews">
  <p class="review-rating" *ngIf="review.rating">
    <!--This is were we perform the magic-->
  </p>
  <p class="review-summary">{{ review?.reviewSummary }}</p>
  <p class="review-feedback">{{ review?.reviewMessage }}</p>
  <p class="reviewBy">
    <span class="review-date">{{ (review?.reviewDate ?  review?.reviewDate : 1581470956443) | date}}</span>
    by
    <span class="review-author">{{ review?.name }}</span>
  </p>
</div>

Now, let you look at the logic - magic.

The Logic

Font Awesome has a regular (far) and solid (fas) category of icons. The regular has outlines while the solid is completely filled. We want the solid star to represent a point and the regular star to represent zero points. We also want to represent half-point for points greater than zero but less than one. We can use solid half-star.

We have 5 stars to represent each of the ratings - let us call these stars Rep-Stars.

First Rep-Star - This is used to represent rating(r) for r = 0, 0 < r < 1, and r >= 1. This means if the rating is 0, use a regular star icon. Else if the rating is greater than 0 but less than 1, use the solid half-star icon. Else, the rating is 1 or greater than 1, then use the solid star.
Second Rep-Star - with rating still as r, we represent 1 < r < 2, r >= 2 and r <= 1 - which means r was never greater than the previous rep-star maximum rating. This means if the rating is 1, use a regular star icon. Else if the rating is greater than 1 but less than 2, use the solid half-star icon. Else, the rating is 2 or greater than 2, then use the solid star.
Third Rep-Star - with rating still as r, we represent 2 < r < 3, r >= 3 and r <= 2. Similar to the second rep-star, if the rating is 2, use a regular star icon. Else if the rating is greater than 2 but less than 3, use the solid half-star icon. Else, the rating is 3 or greater than 3, then use the solid star.

The same process if applied for Four Rep-Star and Five Rep-Star. This logic can be applied to 10 and more stars.

Binding this logic to the class attribute, we have

  <p class="review-rating" *ngIf="review.rating">
    <!-- 1 star  -->
    <i [class]="(review.rating == 0) ? 'far fa-star' : (review.rating > 0 && review.rating < 1) ? 'fas fa-star-half-alt' : 'fas fa-star'"></i>

    <!-- 2 star  -->
    <i [class]="(review.rating > 1 && review.rating < 2) ? 'fas fa-star-half-alt' : (review.rating >= 2) ? 'fas fa-star' : 'far fa-star'"></i>

    <!-- 3 star  -->
    <i [class]="(review.rating > 2 && review.rating < 3) ? 'fas fa-star-half-alt' : (review.rating >= 3) ? 'fas fa-star' : 'far fa-star'"></i>

    <!-- 4 star  -->
    <i [class]="(review.rating > 3 && review.rating < 4) ? 'fas fa-star-half-alt' : (review.rating >= 4) ? 'fas fa-star' : 'far fa-star'"></i>

    <!-- 5 star  -->
    <i [class]="(review.rating > 4 && review.rating < 5) ? 'fas fa-star-half-alt' : (review.rating >= 5) ? 'fas fa-star' : 'far fa-star'"></i> 
  </p>

The complete code below:

<div class="review" *ngFor="let review of reviews">
  <p class="review-rating" *ngIf="review.rating">
    <!-- 1 star  -->
    <i [class]="(review.rating == 0) ? 'far fa-star' : (review.rating > 0 && review.rating < 1) ? 'fas fa-star-half-alt' : 'fas fa-star'"></i>

    <!-- 2 star  -->
    <i [class]="(review.rating > 1 && review.rating < 2) ? 'fas fa-star-half-alt' : (review.rating >= 2) ? 'fas fa-star' : 'far fa-star'"></i>

    <!-- 3 star  -->
    <i [class]="(review.rating > 2 && review.rating < 3) ? 'fas fa-star-half-alt' : (review.rating >= 3) ? 'fas fa-star' : 'far fa-star'"></i>

    <!-- 4 star  -->
    <i [class]="(review.rating > 3 && review.rating < 4) ? 'fas fa-star-half-alt' : (review.rating >= 4) ? 'fas fa-star' : 'far fa-star'"></i>

    <!-- 5 star  -->
    <i [class]="(review.rating > 4 && review.rating < 5) ? 'fas fa-star-half-alt' : (review.rating >= 5) ? 'fas fa-star' : 'far fa-star'"></i> 
  </p>
  <p><em>r = {{review.rating}}</em></p>
  <p class="review-summary">{{ review?.reviewSummary }}</p>
  <p class="review-feedback">{{ review?.reviewMessage }}</p>
  <p class="reviewBy">
    <span class="review-date">{{ (review?.reviewDate ?  review?.reviewDate : 1581470956443) | date}}</span>
    by
    <span class="review-author">{{ review?.name }}</span>
  </p>
</div>

Click Here to See Code Repo

Conclusion

There are many fun and effective ways we can explore the power of frontend frameworks. In this example, we eliminated the need to use various images (about 10) or packages to represent the various review ratings.

8 Tips i Would Recommend to any Beginner Frontend Web Developer

Uzodufa Ebere — Fri, 31 Jan 2020 18:55:24 +0000

In my journey as a frontend web developer, I have come across some tools and techniques I hope I knew earlier. I wish to share them with you and hopefully, contribute to your web development knowledge and save you some resources.

1. Bootstrap has its importance

For some developers, bootstrap hinders developers knowing the basics of HTML, CSS and some Javascript because codes are literally handed out; little thinking, add this, maybe that and we are good to go. Simple? But that not always the case. Some designs require using bootstrap to save time or serve as the foundation for other designs.
Here is an example of using the bootstrap carousel as the foundation for testimonial slider in angular.

Bootstrap Carousel Code

Angular Code

Result

For me, it is highly required for every developer to know their onions when it comes to HTML, CSS, and Javascript and also know that bootstrap can effectively speed up development. I prefer to stick to the Block-Element-Modifier (BEM) as much as I can but sometimes, the codebase becomes difficult to maintain which is one of the main reasons why bootstrap was designed. Hence, I recommend understanding at least the basics of HTML, CSS, and Javascript (who knows, it might be an apt measure just in case of any bootstrap apocalypse) and then use bootstrap when necessary.

2. SASS is beautiful and not difficult

Getting started with SASS (Syntactically Awesome Style Sheets) is very easy and this tutorial shows why if you start SASS, you might hardly ever want to write plain CSS ever again. SASS Mixins are like return functions which you can design to accept variable and use default values if null. SASS documentation is simple to use and understand.

P.S: I use SCSS (Sassy CSS) which used the same syntax as SASS but wraps codes in curly brackets like CSS. Both SCSS and SASS use the same documentation website.

3. IDE Shortcuts and Extensions

IDE Shortcuts makes development a lot faster. To achieve this, you need Emmet for IDE. Here is the Emmet cheat-sheet for faster development across IDE.
Extensions like Live SASS Compiler help convert SASS, LESS or SCSS to CSS on each file save.
There are extensions like Web Server for Chrome which can help you serve local folders over the network, using HTTP. It also runs offline.

4. Version Control is a Norm

Yes, version control is a norm in software development and there will be many times it will be the savior. Version control is easy to not abide. It is eminent to stick to it for easier understand and control of software. There are standards for using version controls on bugs and features such as Andela's git naming conventions and best practices. Udacity has an awesome course on Version Control.

5. Scaffolding really saves time.

Scaffolding frequently refers to a quick set up skeleton for an application. In most cases, Scaffolding is referred to as a backend process. An example of scaffolding is typing html on the sublime text IDE or ! in Visual studio code IDE and hitting tab. Both will result in the basic boilerplate for most HTML pages. One basic challenge for most beginner frontend developers is auto-refresh of browser contents on saving file change without having to click the refresh button on the browser. I discovered Yeoman solves this challenge and at the same time providing you with basic scaffolds for HTML, CSS and JS, test files and task runner. On installing yeoman, you ask to choose SCSS, Bootstrap or CSS, Behavior-Driven Development (BDD) or Test-Driven Development (TDD) and pull out package manager dependencies. This saves you time need to setup browser-sync, write basic boilerplates, and create important task runners that help make development faster, better and stick close to standards.
Using Yeoman GitHub repo instructions

6. Task Runners

Task runners are scripts that help automate numerous development process for web development. These processes can be converting SASS to CSS, spin up servers or serving the latest code files in the IDE on the browser during development, serving CSS on save without refreshing the browser, minify and uglify code, and compress (gzipping) codes. Task Runners help optimize codes and improve performance on the web. Major task runners are Grunt and Gulp.
I mainly use Gulp which is an open-source task runner that uses javascript syntax to perform web automation and tooling. Gulp is very easy to start with and has a detailed documentation. It requires Node and npm to work. Gulp uses command in gulpfile.js for tooling which is written in javascript. In the file, you can specify which process to run when developing and that for production. Fortunately, Yeoman can help scaffold web apps that have gulp scripts for important task runners like minifying, uglifying, compressing images, and gzip on production as well as other tasks like browser-sync for development. This article does justice to how to harness the power of task runner.

7. There are easier ways to host your work for the world to see

I use services like Netlify to showcase my works. Projects files or folder can be drag and dropped to deploy or lined to an online repository like Github and which updates automatically for nay change on the project. Netlify allows one to run the production script from deploy terminal if task runners like gulp where used in the project.

8. Web auditing and Checking Performance

Modern browsers provide tools for analysis codes and show ways to improve on them for the web. There are also online tools like Google Pagespeed Insights.
On modern browsers, Ctrl + Shift + i exposes the developer tool. Here you can check the performance of any website by going to the performance tab and then, click the start recording performance, record or profile button (the text is dependent on the browser). The result shows chart(s) on how long it takes the website to render, paint, etc.

For Google Chrome, you can use the audit tab to run analysis and get feedback on what to improve on the website.

Udacity has two amazing courses - Browswe Rendering Optimization and Website Performance Optimization to help improve web application performance.

Conclusion

As developers grow, we tend to use front-end frameworks for web development. These frameworks may use CLIs and scripts for web automation and tooling. This can be seen with the Angular CLI which has commands to help scaffold components, etc. This article is a solution for developers who are yet to start using frameworks or seeking fast and effective ways to scaffold web applications to be built on plain HTML, CSS, and JavaScript. Furthermore, there are quality documents, videos, and tutorials on how to set up processes to make our applications better such as Progressive Web Application, efficient web forms, etc. This makes these processes easy to learn and apply.
Finally, we all at some points in our career, look back at previous challenges and laugh at how hard it took us to figure it out. Every aspect of life learning is like that, including front-end web development. Consistent learning, discipline, keeping to standards, and refusing to stay on the ground when we fail makes us better.

I will appreciate it if you can share the techniques you learned in your career that you would love to have known earlier.

DEV Community: Uzodufa Ebere

Understanding the Unit of Work Pattern in NestJS

Introduction

What is the Unit of Work Pattern?

Why Use the Unit of Work Pattern?

When to Use the Unit of Work Pattern

Practical Example: Flight Booking System

Without Unit of Work

Problems Without Unit of Work

With Unit of Work

Benefits of Using Unit of Work

Practical Considerations for Real-World Applications

Trade-Offs and Considerations

Key Takeaways

Creating Dynamic Review Rating Displays with Font Awesome and Class Attribute in Angular.

Prerequisite

Steps

The Logic

Click Here to See Code Repo

Conclusion

8 Tips i Would Recommend to any Beginner Frontend Web Developer

1. Bootstrap has its importance

2. SASS is beautiful and not difficult

3. IDE Shortcuts and Extensions

4. Version Control is a Norm

5. Scaffolding really saves time.

6. Task Runners

7. There are easier ways to host your work for the world to see

8. Web auditing and Checking Performance

Conclusion

References