DEV Community: Abhishek Tomar

Maximizing Code Reusability with Yarn Workspaces (Monorepo)

Abhishek Tomar — Mon, 18 Mar 2024 11:45:41 +0000

In the fast-paced world of software development, maximizing efficiency and code reusability is crucial. Enter Yarn Workspaces, a powerful tool for creating monorepos that streamline development workflows and promote code sharing across projects. In this post, we'll delve into the benefits and practical applications of Yarn Workspaces, exploring how they can revolutionize your development process.

Understanding Yarn Workspaces

Yarn Workspaces allow developers to manage multiple projects within a single repository. By consolidating related projects into one cohesive workspace, developers can more easily share code, dependencies, and resources across projects. This approach not only simplifies project management but also enhances code modularity and reusability.

Creating a Monorepo with Yarn Workspaces

Let's walk through the process of setting up a monorepo using Yarn Workspaces. Assume we're developing two ReactJS websites that share common components and functionalities. By leveraging Yarn Workspaces, we can organize these projects within a unified workspace, facilitating seamless code sharing and collaboration.

Initializing the Workspace: Start by creating a new directory for your monorepo and initializing it with Yarn.

$ mkdir yarn-workspace-example && cd yarn-workspace-example
$ yarn init

Defining Workspaces: Update the package.json file to specify the directories containing your projects.

{
  "private": "true",
  "name": "yarn-workspace-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "workspaces": [
    "apps/*",
    "libs/*"
  ]
}

Creating Projects: Develop your projects within the designated directories (apps for applications, libs for shared libraries).

$ cd apps
$ yarn create react-app app_one
$ yarn create react-app app_two

Sharing Code: Develop common libraries or components within the libs directory, ensuring seamless integration with your projects.

$ cd libs
$ yarn create react-library common

Utilizing Workspaces: Leverage Yarn Workspaces commands to manage dependencies and scripts across projects.

$ yarn workspace app_one start
$ yarn workspace app_two start

Benefits of Yarn Workspaces

Code Reusability: Share common libraries and components across projects, reducing redundancy and promoting consistency.

Simplified Dependency Management: Manage dependencies at the workspace level, avoiding conflicts and ensuring uniformity.
Enhanced Collaboration: Facilitate collaboration among team members by providing a centralized environment for code sharing and development.

Conclusion

Yarn Workspaces offer a powerful solution for managing monorepos and maximizing code reusability. By consolidating projects within a unified workspace, developers can streamline development workflows, foster collaboration, and build more efficient and maintainable software applications. Embrace the potential of Yarn Workspaces to elevate your development process and unlock new possibilities in code sharing and collaboration. Happy coding!

Mastering Git Committing: Best Practices and Guidelines

Abhishek Tomar — Wed, 28 Feb 2024 19:41:55 +0000

In the realm of version control systems, Git stands out as one of the most powerful and widely adopted tools. Yet, its effectiveness greatly depends on how well it's utilized, particularly when it comes to committing changes. Git commits are not just snapshots of code; they are the building blocks of collaboration and code evolution. Here, we delve into some best practices and guidelines for mastering Git committing.

Best Practices for Commit Messages: Starting with Clear Prefixes. e.g. FIX, RELEASE, FEATURE, BUG, REFACTOR, TEST, BUILD etc

Commit with Purpose

A pivotal aspect of Git committing is ensuring that each commit encapsulates a coherent set of changes. Whether it's fixing a bug or implementing a feature, commit granularity enhances clarity and facilitates efficient collaboration.

Embrace Frequency

Committing frequently is akin to creating checkpoints in your development journey. By breaking down changes into smaller, manageable commits, developers promote seamless integration and mitigate the risk of conflicts.

Shun Half-Baked Commits

Avoid the temptation to commit incomplete work. Each commit should represent a logically complete unit of work, ensuring that changes are robust and actionable.

Validate Before You Commit

Prior to committing, rigorously test your code to ensure its integrity and functionality. While local commits offer leeway for experimentation, shared commits demand a higher standard of quality assurance.

Craft Compelling Messages

The art of writing commit messages cannot be overstated. A well-crafted commit message serves as a narrative, guiding future developers through the evolution of code changes.

Harness Branching Power

Branching is Git's cornerstone feature, empowering developers to explore new ideas and isolate changes without disrupting the main codebase. Embrace branches as a versatile tool in your development arsenal.

Establish Workflow Consensus

Choose a Git workflow that aligns with your project's needs and team dynamics. Consensus on a common workflow fosters cohesion and enhances productivity.

Practical Examples and Guidelines

Let's explore some exemplary commit messages that embody these principles:

Example 1: Sort summery based commit

Commit Hash: 3114a97ba188895daff4a3d337b2c73855d4632d
Author: [Abhishek]
Date: Mon Jun 11 17:16:10 2012 +0100
FIX: Changes has been done with the new c++ runtime module update

Example 2: Description in multiple points

Commit Hash: ae878fc8b9761d099a4145617e4a48cbeb390623
Author: [Abhishek]
Date: Fri Jun 1 01:44:02 2012 +0000

FEATURE: Done with processing module

- Minimized duplicated code for create.
- Modified wait_for_destroy to occur on shutdown instead of undefine.
- Enabled destruction of an instance while leaving the domain intact.

Example 3: Large details

Commit Hash: 31336b35b4604f70150d0073d77dbf63b9bf7598
Author: [Abhishek]
Date: Wed Jun 6 22:45:25 2012 -0400

RELEASE: Key features of this enhancement include:

- Identification and storage of guest arches in the permitted_instances_types list within the cpu_info dictionary of the host.
- Implementation of the arch filter to compare the instance arch against permitted instances types, filtering out invalid hosts.
- Addition of ARM as a valid arch to the filter, ensuring compatibility with diverse architectures.

Notably, the ArchFilter remains deactivated by default, offering flexibility in its utilization.

Best Practices for Commit Messages: Starting with Clear Prefixes

When crafting Git commit messages, always beginning with a clear prefix enhances readability and organization. Let's explore some common prefixes and their significance:

Prefixes for Commit Messages

FIX: Addressing Issues

Starting a commit message with "FIX" indicates that it resolves a specific issue or bug within the codebase. These commits focus on improving the stability and functionality of the software by addressing existing problems.

RELEASE: Version Updates

Commits prefixed with "RELEASE" signify significant milestones in the project, such as the release of a new version or major feature set. These commits often include updates to version numbers, changelogs, and release notes.

FEATURE: Introducing New Functionality

Using "FEATURE" as a prefix denotes the addition of new features or functionalities to the software. These commits expand the capabilities of the application and contribute to its ongoing development.

BUG: Fixing Bugs

"BUG" prefixed commits indicate the resolution of specific bugs or issues. These commits focus on debugging and ensuring the smooth operation of the software by addressing reported problems.

REFACTOR: Code Refactoring

Starting a commit message with "REFACTOR" signifies restructuring or optimizing existing code without changing its external behavior. These commits aim to improve code quality, readability, and maintainability.

DOC: Documentation Updates

Prefixing commits with "DOC" indicates changes or additions to documentation, including README files, code comments, or developer guides. These commits enhance the clarity and accessibility of project documentation.

TEST: Adding or Modifying Tests

Using "TEST" as a prefix involves additions or modifications to test suites, ensuring comprehensive test coverage and validating the correctness of the software.

STYLE: Code Style Changes

Commits prefixed with "STYLE" involve updates to code formatting, styling, or conventions. These commits focus on improving the consistency and aesthetics of the codebase.

By starting commit messages with these clear prefixes, developers can streamline collaboration, improve code quality, and maintain a well-organized project history.

Conclusion

In essence, Git committing is more than just a technical task; it's a strategic endeavor that shapes the evolution of code. By adhering to best practices and guidelines, developers can optimize collaboration, ensure code quality, and drive continuous improvement in software development.

Maximising React Development Efficiency with Monorepo Architecture

Abhishek Tomar — Sat, 06 Jan 2024 13:05:24 +0000

Introduction:

In the ever-evolving landscape of web development, efficient project organization is crucial for maintaining scalable and maintainable codebases. One powerful approach gaining popularity is the monorepo architecture, especially in the context of React applications. In this blog post, we'll explore the benefits and implementation of a monorepo setup for React projects.

Understanding Monorepo:

A monorepo, short for monolithic repository, is a version control system where multiple projects coexist within a single repository. In the context of React development, these projects can include various applications, libraries, and shared components. This consolidated structure simplifies code sharing, dependency management, and overall project maintenance.

Benefits of Monorepo for React:

Code Sharing:
- One of the primary advantages is the ease of sharing code between different projects. Shared components, utilities, and modules can be centralized, reducing redundancy and promoting consistency across applications.
Simplified Dependency Management:
- Monorepos leverage tools like Yarn Workspaces or Lerna to manage dependencies efficiently. This ensures that all projects use the same versions of shared dependencies, avoiding conflicts and streamlining updates.
Atomic Changes:
- Atomic commits become more manageable as changes across multiple projects can be committed together. This helps maintain a consistent state of the codebase, making it easier to track and roll back changes when necessary.
Unified Development Environment:
- Developers can work on different parts of the project without the hassle of switching between repositories. A unified development environment enhances collaboration and accelerates the development process.
Cross-Project Refactoring:
- Large-scale refactoring becomes less daunting when all related projects reside in a single repository. Developers can make sweeping changes across the codebase with confidence, knowing that they can update dependent projects simultaneously.

Setting Up a Monorepo for React:

Choose a Tool:
- Select a monorepo management tool like Yarn Workspaces or Lerna based on your project's requirements. Both tools simplify the process of managing dependencies and scripts across multiple packages.
Organize Your Projects:
- Divide your React projects into packages within the monorepo. Common structures include having separate folders for applications, shared components, and libraries. This organization enhances clarity and maintainability.
Shared Dependencies:
- Clearly define and manage shared dependencies. Ensure that all projects use the same version of React, React Router, and other key dependencies to prevent compatibility issues.
Configure Build Scripts:
- Adapt build scripts to handle the compilation and bundling of individual packages. Tools like Yarn Workspaces automatically manage this, while Lerna provides additional configuration options for customization.

Conclusion:

Implementing a monorepo architecture for React projects offers numerous benefits, from improved code sharing to streamlined dependency management. By centralizing your codebase, you can enhance collaboration, simplify maintenance, and accelerate development. Embrace the monorepo paradigm to unlock new levels of efficiency and scalability in your React projects.

Create Mobx Store In React Native using Hooks & Combining multiple stores

Abhishek Tomar — Tue, 23 Feb 2021 14:17:52 +0000

Create your stores

interface Todo {
  id: number;
  text: string;
}
class TodoStore {
  root: RootStore;
  listTodo: Todo[] = [];
  constructor(root: RootStore) {
    makeAutoObservable(this);
    this.root = root;
  }
  setTodo(todo: Todo) {
    this.listTodo.push(todo);
  }

  get getTodoAll() {
    return this.listTodo;
  }

  getTodoId(id: number) {
    return this.listTodo.filter((f) => f.id == id);
  }
}

class OtherStore {
  root: RootStore;
  totalTodoCount: number = 0;
  constructor(root: RootStore) {
    makeAutoObservable(this);
    this.root = root;
  }

  init() {
    // safe to access other stores
    const allData = this.root.todo.getTodoAll;
    this.totalTodoCount = allData.length;
  }
}

Create root store & combine all stores in root

class RootStore {
  todo: TodoStore;
  other: OtherStore;
  constructor() {
    this.todo = new TodoStore(this);
    this.other = new OtherStore(this);

    this.other.init();
  }
}

Create Provider

let store: RootStore;
const StoreContext = createContext<RootStore | undefined>(undefined);
export default function RootStoreProvider({children}: {children: ReactNode}) {
  const root = store ?? new RootStore();
  return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>;
}

Create hooks for accessing the store

export function useRootStore() {
  const context = useContext(StoreContext);
  if (context === undefined) {
    throw new Error('useRootStore must be used within RootStoreProvider');
  }
  return context;
}

Create UI screen

const AppScreen1 = observer(() => {
  const store = useRootStore();
  const AddNew = () => {
    const ID = Math.floor(1000 + Math.random() * 9000);
    store.todo.setTodo({id: ID, text: `Todo Item ${ID}`});
  };
  return (
    <View style={{flex: 1}}>
      {store.todo.getTodoAll.map((item) => {
        return (
          <Text style={{fontWeight: 'bold'}}>
            {item.id.toString()}/{item.text}
          </Text>
        );
      })}
      <Button title="Add New Todo" onPress={AddNew} />
    </View>
  );
});

Create app entry

export const AppEntry = () => {
  return (
    <RootStoreProvider>
      <AppScreen1 />
    </RootStoreProvider>
  );
};

Thanks,

https://dev.to/ivandotv/mobx-root-store-pattern-with-react-hooks-318d
https://mobx.js.org/README.html
https://github.com/leighhalliday/mobx2021/blob/main/src/store.tsx
https://unsplash.com/photos/vc3iVL_znJ8