DEV Community: gitfudge

Implementing MVVM in React: A Real-World Guide

gitfudge — Tue, 19 Nov 2024 10:40:37 +0000

Hey folks! 👋 After spending years building React applications, I've found that as apps grow larger, maintaining a clean architecture becomes crucial. Today, I'll share how implementing MVVM (Model-View-ViewModel) pattern in React has saved our team from countless headaches and made our codebase much more manageable.

Why Should You Care? The Good Stuff First! 🎯

Your Code Becomes Super Organized
- Clear separation between data, logic, and UI components
- Each part of your code has one job and does it well
- No more "where should I put this logic?" moments
Testing Becomes a Breeze
- Business logic is isolated in ViewModels
- UI components are purely presentational
- You can test each part independently without mocking the entire universe
Reusability On Steroids
- ViewModels can be reused across different components
- Logic stays consistent throughout your app
- Less copy-paste, more single source of truth
State Management That Makes Sense
- Clear data flow throughout your application
- Predictable state updates
- Easier debugging when things go wrong (and they will!)

Let's See It In Action! 💻

Let's build a simple e-commerce product listing page with filters and sorting. Here's how we'd structure it using MVVM:

Directory Structure

src/
├── pages/
│   └── ProductsPage/
│       ├── index.tsx               # Main page component
│       ├── index.hook.ts           # Custom hooks
│       ├── index.store.ts          # State management
│       ├── ViewModel.ts            # ViewModel implementation
│       ├── types.ts                # TypeScript interfaces
│       ├── components/             
│       │   ├── ProductGrid/
│       │   ├── FilterPanel/
│       │   └── SortingOptions/
│       └── styles/

1. First, Define Your Model

// models/Product.model.ts
export interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
}

export interface FilterOptions {
  category: string[];
  minPrice: number;
  maxPrice: number;
  inStock: boolean;
}

2. Set Up Your Store

// pages/ProductsPage/index.store.ts
import { create } from 'zustand';

interface ProductsPageState {
  products: Product[];
  filters: FilterOptions;
  setProducts: (products: Product[]) => void;
  setFilters: (filters: FilterOptions) => void;
}

const useProductsStore = create<ProductsPageState>((set) => ({
  products: [],
  filters: {
    category: [],
    minPrice: 0,
    maxPrice: 1000,
    inStock: false
  },
  setProducts: (products) => set({ products }),
  setFilters: (filters) => set({ filters })
}));

3. Create Your ViewModel

// pages/ProductsPage/ViewModel.ts
class ProductsViewModel {
  private store: ProductsStore;
  private uiStore: UIStore;

  constructor(store: ProductsStore, uiStore: UIStore) {
    this.store = store;
    this.uiStore = uiStore;
  }

  public async fetchProducts() {
    try {
      this.uiStore.showLoader();
      const { data } = await ProductsAPI.getProducts(this.store.filters);
      this.store.setProducts(data);
    } catch (error) {
      toast.error('Could not fetch products');
    } finally {
      this.uiStore.hideLoader();
    }
  }

  public updateFilters(filters: Partial<FilterOptions>) {
    this.store.setFilters({
      ...this.store.filters,
      ...filters
    });
  }

  public shouldShowEmptyState(): boolean {
      return !this.uiStore().isLoading && this.getFilteredProducts().length === 0;
  }

  public shouldShowError(): boolean {
    return !!this.uiStore().error;
  }

  public shouldShowLoading(): boolean {
    return this.uiStore().isLoading;
  }

  public shouldShowProductDetails(): boolean {
    return !!this.uiStore().selectedProductId;
  }
}

4. The Custom Hook

// pages/ProductsPage/index.hook.ts
const useProductsPage = () => {
  const productsStore = useProductsStore();
  const uiStore = useUIStore();
  const viewModel = new ProductsViewModel(productsStore, uiStore);

  // isRefreshing and refreshDone are here in case you have logic that's outside the viewmodel and specific to the page itself
  return {
    viewModel,
    isRefreshing: uiStore.isRefreshing,
    refreshDone: () => uiStore.setRefreshing(false),
  };
};

5. The View Component

// pages/ProductsPage/index.tsx
const ProductsPage: FC = () => {
  const { viewModel, isRefreshing, refreshDone } = useProductsPage();

  useEffect(() => {
    viewModel.fetchProducts();
  }, [viewModel]);

  useEffect(() => {
    if (isRefreshing) {
      viewModel.fetchProducts();
      refreshDone();
    }
  }, [isRefreshing]);

  return (
    <div className="products-page">
      <FilterPanel />
      <ProductGrid />
      <SortingOptions />
    </div>
  );
};

Best Practices I've Learned the Hard Way 😅

Keep ViewModels Focused

   // Good
   class ProductsViewModel {
     fetchProducts() { /* ... */ }
     updateFilters() { /* ... */ }
     sortProducts() { /* ... */ }
   }

   // Bad - mixing concerns
   class ProductsViewModel {
     fetchProducts() { /* ... */ }
     updateUserProfile() { /* ... */ }
     handleCheckout() { /* ... */ }
   }

Handle Cleanup Properly

   useEffect(() => {
     const controller = new AbortController();
     viewModel.fetchProducts(controller.signal);

     return () => controller.abort();
   }, [viewModel]);

Don't Memoize ViewModels

   // Good
   const viewModel = new ProductsViewModel(store);

   // Bad - will break reactivity
   const viewModel = useMemo(() => new ProductsViewModel(store), [store]);

The Not-So-Great Parts (Let's Be Honest) 😕

More Boilerplate
- You'll write more initial code
- More files to manage
- Steeper learning curve for new team members
Might Be Overkill
- For simple CRUD apps, this could be excessive
- Small projects might not see the benefits
- Takes time to set up properly
Team Buy-in Required
- Everyone needs to understand and follow the pattern
- Requires consistent conventions
- Documentation becomes crucial

Wrapping Up 🎁

MVVM in React isn't a silver bullet, but it's been a game-changer for our team's productivity and code quality. Start small, maybe implement it in one feature first, and see how it feels. Remember, the goal is to make your code more maintainable and your life easier!

Feel free to drop any questions in the comments. Happy coding! 🚀

Giving back to the community

gitfudge — Wed, 16 Oct 2024 06:12:22 +0000

Hey everyone! 🌟

I've barely had any instances where I had people helping/teaching me in my developer journey. So I've always wondered how big of a difference that would have made. Having said that, I have indeed learnt a lot from numerous the tutorials and blogs written by the community.

I've always been passionate helping and teaching others wherever I can. I run a community at my workplace where we try to teach each other and talk about all things tech.

I did not want to stop it with my workplace. I'm taking it a step further by offering mentorship and guidance to aspiring developers in whatever way I can. This is my way to give back to the community that has supported me throughout my journey.

Check out my page and let's connect, learn, and grow together: https://topmate.io/gitfudge

JS/TS: Using the Singleton Design Pattern

gitfudge — Sat, 16 Oct 2021 09:19:19 +0000

Classes were added to JavaScript in ES6 as a template for creating and managing objects in your application. They encapsulate data and the code inside each class helps us work with that data.

class Vehicle {
  constructor(speed, weight) {
    this.speed = speed;
    this.weight = weight;
  }
}

TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. Using TypeScript, you can convert the above example of Vehicle into

class Vehicle {
  constructor(speed: number, weight: number) {
    this.speed = speed;
    this.weight = weight;
  }
}

With that simplistic example, we know what classes are and what they help us with. But, you already knew this.

So, what are Singleton classes?

Singleton classes are a design pattern, popularly used in Java - and perhaps other languages as well. In object-oriented programming, a singleton class is a class that can have only one object (an instance of the class) at a time and provide your application a global point of access to that instance. Let me give you an example/use-case right after the basic syntax of writing singleton classes

class MySingletonClass {
  private static INSTANCE: MySingletonClass;

  private name: string;
  private constructor() {
    this.name = "noobmaster69";
  }

  public static getInstance(): MySingletonClass {
    if (!this.INSTANCE) {
      this.INSTANCE = new MySingletonClass();
    }
    return this.INSTANCE;
  }

  public getGreetingMessage(): string {
    return `Hello, ${this.name}`;
  }
}

Here, MySingletonClass is a simple class that follows the singleton pattern with the help of the static members INSTANCE and getInstance. The INSTANCE object is of type MySingletonClass because it will can contain an instance of the class. The initiation of the object is done inside the getInstance method. This is a personal preference but I like to make my constructors private so new objects of MySingletonClass cannot be made outside the scope of the class.

Now that you have created your singleton class, how would you access the methods? You'd do it by

console.log(MySingletonClass.getInstance().getGreetingMessage());

That's all great, why would I use it?

That's a good question. Classes are essentially used to create new objects, meaning each object will encapsulate different - or even unique - data. Like mentioned at the beginning, singleton classes help us maintain a single instance of an object that can be accessed globally by different parts of your code. The best use-cases for singleton classes would be using them to maintain database services - which is the example I want to use. Here's a look at the code -

import mysql, { Connection, Query } from 'mysql';
import unnamed from 'named-placeholders';

const toUnnamed = unnamed();

export default class Mysql {
  private connection!: Connection;

  private static INSTANCE: Mysql;

  public static getInstance(): Mysql {
    if (!this.INSTANCE) {
      this.INSTANCE = new Mysql();
    }
    return Mysql.INSTANCE;
  }

  private constructor() {
    this.connection = mysql.createConnection({
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASS,
      database: process.env.DB_DB,
    });

    this.connect();
  }

  connect() {
    this.connection.connect();
  }

  query(sqlString: string, values = []): Promise<Query> {
    return new Promise(async (resolve, reject) => {
      try {
        return this.connection.query(sqlString, values, (err, results) => {
          if (err) {
            return reject(err);
          }
          return resolve(results);
        });
      } catch (error) {
        reject(error);
      }
    });
  }

  namedQuery(sqlString: string, values: {}): Promise<Query> {
    const [query, queryValues] = toUnnamed(sqlString, values);
    return this.query(query, queryValues);
  }

  beginTransaction() {
    return new Promise((resolve, reject) => {
      try {
        this.connection.beginTransaction((err) => {
          if (err) {
            reject(err);
          } else {
            resolve(true);
          }
        });
      } catch (error) {
        reject(error);
      }
    });
  }

  commit() {
    return new Promise((resolve, reject) => {
      try {
        this.connection.commit();
        resolve(true);
      } catch (error) {
        reject(error);
      }
    });
  }

  rollback() {
    return new Promise((resolve, reject) => {
      try {
        this.connection.rollback();
        resolve(true);
      } catch (error) {
        reject(error);
      }
    });
  }

  release() {
    return new Promise((resolve, reject) => {
      try {
        if (this.connection) {
          this.connection.end();
        }
        resolve(true);
      } catch (error) {
        reject(error);
      }
    });
  }
}

If you were to use the above snippet for maintaining a connection to your MySQL database, your entire application would have access to the singular connection/instance that is required throughout the lifetime of your application, i.e. you won't have to create new objects each time you want to run MySQL queries in your application. To give you an example, if you wanted to run a MySQL query, you'd simple use

Mysql.getInstance().query(myQuery);

And, that's it! That's singleton classes for you - cleaner, meaner, and makes code maintenance simpler.

If you liked what you read, leave a <3 and a comment! :)

JavaScript: I built a server-side rendering starter project with ReactJS and Express.js

gitfudge — Wed, 13 May 2020 05:03:50 +0000

Let's keep this short.
Here's the link to the repository - react-ssr-starter

Motivation

Having worked with ReactJS for over two years now, the one issue I've always had with it was the initial render time. The script files always needed to be fetched from the server first and then ReactJS starts reading your bundle and renders your project. This was rather slow, especially in cases where I wanted to host a simple page that shows me daily reports for my apps. I've always known that server-side rendering greatly improved the first-time load performance but till now, I'd only ever used templating engines like Pug for SSR and never tried building an SSR project with both ReactJS and Express.

After a lot of trial and errors, and understanding why certain things don't work(even though they make logical sense), I built this starter project for you to clone and get started with your development work without having to worry about setting up the project from scratch but worry only about the core logic of what you're trying to build.

Contribution

Feel free to dive in! Open an issue or submit PRs. There's always something we can all learn.

Feedback

I'm always open to hearing from you about what you have to say. If you have any questions, I'll be glad to answer them. Cheers!

Stay home. Stay safe. Wash your hands.

JavaScript: Error handling with Promises and Async/Await

gitfudge — Fri, 11 Oct 2019 02:40:31 +0000

Error handling in JavaScript can be easy while being tricky at certain places, especially Promises. JS allows error handling with the help of try, catch, and throw.

const main = () => {
  try {
    // Do something super crazy
    if (!bakePizza()) {
      throw new Error('Oh no!');
    }
  } catch (error) {
    // That escalated quickly
    handleOvenExplosion();
  }
}

This seems simple enough but gets a little tricky when Promises are involved.

Let’s look at a simple example of a Promise. The following Promise function fetches a list of user profiles from the database, where the result set is resolved by the promise function and the error is rejected.

const userProfileQuery = new Promise((resolve, reject) => {
  connection.query('SELECT * FROM Users', [], (err, result) => {
    if (err) reject({ type: 'SQL', err});
    connection.release();
    resolve(result);
});
userProfileQuery
  .then((data) => {
    const userList = data;
    // Do something crazy with the list
  })
  .catch((err) => {
    // Oh, snap!
    // Handle error
  });

In an ideal world, we’d want to have a single try-catch block to handle all errors that occur in that single file.

const { getUserProfiles } = require('./helpers');
module.exports = () => {
  try {
    let userProfileList;
    getUserProfiles
      .then((data) => {
        userProfileList = data;
      })
      .catch((error) => {
        // Handle Promise Error
        // All errors thrown in this promise land here
      });
  } catch (error) {
    // Handle errors in this module
  }
}

The above module is simple — It fetches a list of user profiles with the help of a Promise function.

But the problem with the above module is that when we throw a new Error inside the then block of the promise, it will always pass to the catch block of the promise. That is because throwing a new error inside a then block of a promise will always be passed to the catch block of the invoking promise function. This does not allow us to handle all errors in a module with a singular try-catch block.

But, alas! There is a way to handle this with the help of Async/Await. Let me explain this better with an example —

const { getUserProfiles } = require('./helpers');
module.exports = async () => {
  try {
    const userProfileList = await getUserProfiles;
  } catch (error) {
    // Handle errors in this module
    switch (type) {
      case ERROR_SQL:
        // Handle SQL errors
      default:
        // Handle common errors
    }
  }
}

This little addition of async/await in your code does two things —
Assign the value to the variable which was resolved by the promise function.

Throw error if the promise function rejects anything.
Note that the value assignment works only when a promise functions resolves some value and errors get thrown only when the promise function rejects something.

This way, async/await lets us keep our code clean, maintainable, and easy to read.

Thanks for reading. If you have thoughts on this, be sure to leave a comment.