[CHORE] Refacto the whole project - module/plugin architecture oriented 🧹

[SquirrelDeveloper]

1. Create a Module Structure

First, let's create a basic folder structure for your modular application:

project-root/
├── src/
│   ├── modules/
│   │   ├── users/
│   │   │   ├── controllers/
│   │   │   ├── services/
│   │   │   ├── models/
│   │   │   ├── routes/
│   │   │   └── index.ts
│   │   ├── products/
│   │   │   ├── controllers/
│   │   │   ├── services/
│   │   │   ├── models/
│   │   │   ├── routes/
│   │   │   └── index.ts
│   │   └── other-modules/
│   ├── core/
│   │   ├── middleware/
│   │   ├── config/
│   │   └── types/
│   ├── utils/
│   └── app.ts
├── package.json
└── tsconfig.json

2. Create Module Interface

Define a standard interface for your modules in src/core/types/module.interface.ts:

import { Router } from 'express';

export interface Module {
  router: Router;
  name: string;
  initialize?: () => Promise<void>;
  cleanup?: () => Promise<void>;
}

3. Create Base Module Implementation

Here's an example of how to implement a module (e.g., src/modules/users/index.ts):

import { Router } from 'express';
import { Module } from '../../core/types/module.interface';

export class UsersModule implements Module {
  public router: Router;
  public name = 'users';

  constructor() {
    this.router = Router();
    this.initializeRoutes();
  }

  private initializeRoutes(): void {
    // Import and use your route handlers
    this.router.get('/', this.getAllUsers);
    this.router.post('/', this.createUser);
    // ... other routes
  }

  private getAllUsers = async (req: Request, res: Response): Promise<void> => {
    // Implementation
  };

  private createUser = async (req: Request, res: Response): Promise<void> => {
    // Implementation
  };

  public async initialize(): Promise<void> {
    // Module initialization logic (e.g., database connections)
    console.log('Users module initialized');
  }

  public async cleanup(): Promise<void> {
    // Cleanup logic when shutting down
    console.log('Users module cleanup');
  }
}

4. Module Registration System

Create a module registration system in src/core/ModuleRegistry.ts:

import { Express } from 'express';
import { Module } from './types/module.interface';

export class ModuleRegistry {
  private modules: Map<string, Module> = new Map();
  private app: Express;

  constructor(app: Express) {
    this.app = app;
  }

  public registerModule(module: Module): void {
    if (this.modules.has(module.name)) {
      throw new Error(`Module ${module.name} is already registered`);
    }

    this.modules.set(module.name, module);
    this.app.use(`/api/${module.name}`, module.router);
  }

  public async initializeAll(): Promise<void> {
    for (const module of this.modules.values()) {
      if (module.initialize) {
        await module.initialize();
      }
    }
  }

  public async cleanupAll(): Promise<void> {
    for (const module of this.modules.values()) {
      if (module.cleanup) {
        await module.cleanup();
      }
    }
  }

  public getModule(name: string): Module | undefined {
    return this.modules.get(name);
  }
}

5. Application Entry Point

Update your src/app.ts:

import express from 'express';
import { ModuleRegistry } from './core/ModuleRegistry';
import { UsersModule } from './modules/users';
import { ProductsModule } from './modules/products';
// Import other modules

const app = express();
const moduleRegistry = new ModuleRegistry(app);

// Basic middleware
app.use(express.json());

// Register modules
moduleRegistry.registerModule(new UsersModule());
moduleRegistry.registerModule(new ProductsModule());
// Register other modules

// Initialize all modules
moduleRegistry.initializeAll().then(() => {
  app.listen(3000, () => {
    console.log('Server is running on port 3000');
  });
});

// Handle cleanup on shutdown
process.on('SIGTERM', async () => {
  await moduleRegistry.cleanupAll();
  process.exit(0);
});

6. Environment Configuration

Create a configuration system in src/core/config/index.ts:

import dotenv from 'dotenv';

dotenv.config();

export const config = {
  port: process.env.PORT || 3000,
  database: {
    url: process.env.DATABASE_URL,
    // other database configs
  },
  // other configuration settings
};

7. Plugin System (Optional)

If you want to add a plugin system, you can create a plugin interface:

// src/core/types/plugin.interface.ts
export interface Plugin {
  name: string;
  version: string;
  install: (app: Express) => Promise<void>;
  uninstall?: () => Promise<void>;
}

And a plugin manager:

// src/core/PluginManager.ts
import { Express } from 'express';
import { Plugin } from './types/plugin.interface';

export class PluginManager {
  private plugins: Map<string, Plugin> = new Map();
  private app: Express;

  constructor(app: Express) {
    this.app = app;
  }

  public async installPlugin(plugin: Plugin): Promise<void> {
    if (this.plugins.has(plugin.name)) {
      throw new Error(`Plugin ${plugin.name} is already installed`);
    }

    await plugin.install(this.app);
    this.plugins.set(plugin.name, plugin);
  }

  public async uninstallPlugin(pluginName: string): Promise<void> {
    const plugin = this.plugins.get(pluginName);
    if (!plugin) {
      throw new Error(`Plugin ${pluginName} is not installed`);
    }

    if (plugin.uninstall) {
      await plugin.uninstall();
    }
    this.plugins.delete(pluginName);
  }
}

This modular architecture provides several benefits:

1. Separation of Concerns: Each module is self-contained with its own routes, controllers, and services.
2. Scalability: Easy to add new modules without affecting existing ones.
3. Maintainability: Code is organized by feature/domain, making it easier to maintain.
4. Testability: Modules can be tested in isolation.
5. Flexibility: Easy to enable/disable features by adding/removing modules.

To migrate your existing code to this architecture:

1. Identify distinct features/domains in your application
2. Create separate modules for each feature
3. Move related routes, controllers, and services into their respective modules
4. Update imports and dependencies
5. Gradually migrate one module at a time to minimize risk

Remember to:

• Keep modules loosely coupled
• Use dependency injection where appropriate
• Implement proper error handling
• Add proper logging
• Use TypeScript interfaces and types for better type safety
• Document your module APIs

Would you like me to elaborate on any specific aspect of this architecture or help you with implementing a specific part?

AI Assistant

Same question for the frontend, that is utilizeing UMIJS MAX with Ant Design Pro

AI Assistant

I'll help you design a modular architecture for your frontend application using UmiJS MAX and Ant Design Pro. UmiJS already provides some built-in modular capabilities, but let's organize it in a more structured way.
Here's a comprehensive guide to implement a modular frontend architecture:

1. Folder Structure

First, let's establish a scalable folder structure:

src/
├── modules/
│   ├── users/
│   │   ├── components/
│   │   │   ├── UserList/
│   │   │   ├── UserForm/
│   │   │   └── index.ts
│   │   ├── models/
│   │   │   ├── users.ts
│   │   │   └── types.ts
│   │   ├── services/
│   │   │   └── userService.ts
│   │   ├── pages/
│   │   │   ├── list/
│   │   │   ├── detail/
│   │   │   └── form/
│   │   ├── hooks/
│   │   │   └── useUsers.ts
│   │   └── index.ts
│   ├── products/
│   │   ├── components/
│   │   ├── models/
│   │   ├── services/
│   │   ├── pages/
│   │   ├── hooks/
│   │   └── index.ts
│   └── shared/
│       ├── components/
│       ├── hooks/
│       ├── utils/
│       └── types/
├── core/
│   ├── providers/
│   ├── services/
│   ├── hooks/
│   └── types/
├── config/
│   ├── routes.ts
│   ├── defaultSettings.ts
│   └── config.ts
└── app.tsx

1. Module Interface

Create a standard module interface in src/core/types/module.ts:

import { ReactNode } from 'react';
import { Route } from '@umijs/max';

export interface Module {
  name: string;
  routes: Route[];
  models?: any[];
  providers?: ReactNode[];
  initialize?: () => Promise<void>;
}

1. Module Implementation

Here's an example of a module implementation (src/modules/users/index.ts):

import { Module } from '@/core/types/module';
import { userModel } from './models/users';
import { UserProvider } from './providers/UserProvider';

// Import your components and pages
import { UserList } from './pages/list';
import { UserDetail } from './pages/detail';
import { UserForm } from './pages/form';

export const UsersModule: Module = {
  name: 'users',
  
  routes: [
    {
      path: '/users',
      name: 'users',
      routes: [
        {
          path: '/users/list',
          component: 'users/pages/list',
          name: 'users-list',
        },
        {
          path: '/users/:id',
          component: 'users/pages/detail',
          name: 'user-detail',
        },
        {
          path: '/users/new',
          component: 'users/pages/form',
          name: 'user-new',
        },
      ],
    },
  ],
  
  models: [userModel],
  
  providers: [UserProvider],
  
  async initialize() {
    // Module initialization logic
    console.log('Users module initialized');
  },
};

// Export components for external use
export { UserList, UserDetail, UserForm };

1. Module Registry

Create a module registry to manage all modules (src/core/ModuleRegistry.ts):

import { ReactNode } from 'react';
import { Module } from './types/module';
import { dynamic } from '@umijs/max';

export class ModuleRegistry {
  private static modules: Map<string, Module> = new Map();

  static registerModule(module: Module) {
    if (this.modules.has(module.name)) {
      throw new Error(`Module ${module.name} is already registered`);
    }
    this.modules.set(module.name, module);
  }

  static getAllRoutes() {
    return Array.from(this.modules.values()).flatMap((module) => module.routes);
  }

  static getAllModels() {
    return Array.from(this.modules.values()).flatMap((module) => module.models || []);
  }

  static getAllProviders(): ReactNode[] {
    return Array.from(this.modules.values()).flatMap((module) => module.providers || []);
  }

  static async initializeAll() {
    for (const module of this.modules.values()) {
      if (module.initialize) {
        await module.initialize();
      }
    }
  }
}

1. Application Setup

Update your src/app.tsx:

import { RunTimeLayoutConfig } from '@umijs/max';
import { ModuleRegistry } from './core/ModuleRegistry';
import { UsersModule } from './modules/users';
import { ProductsModule } from './modules/products';

// Register modules
ModuleRegistry.registerModule(UsersModule);
ModuleRegistry.registerModule(ProductsModule);

// Initialize modules
ModuleRegistry.initializeAll();

// Configure runtime layout
export const layout: RunTimeLayoutConfig = () => {
  return {
    // Your layout configuration
  };
};

// Wrap the app with module providers
export function rootContainer(container: ReactNode) {
  return ModuleRegistry.getAllProviders().reduce(
    (children, Provider) => <Provider>{children}</Provider>,
    container,
  );
}

1. Route Configuration

Update your config/routes.ts:

import { ModuleRegistry } from '@/core/ModuleRegistry';

export default [
  {
    path: '/',
    layout: true,
    routes: [
      {
        path: '/welcome',
        name: 'welcome',
        component: './Welcome',
      },
      ...ModuleRegistry.getAllRoutes(),
    ],
  },
];

1. State Management

Create module-specific models (src/modules/users/models/users.ts):

import { Effect, Reducer } from '@umijs/max';
import { message } from 'antd';
import { getUserList } from '../services/userService';

export interface UserState {
  list: User[];
  currentUser: User | null;
}

export default {
  namespace: 'users',
  
  state: {
    list: [],
    currentUser: null,
  },
  
  effects: {
    *fetchUsers({ payload }, { call, put }) {
      try {
        const response = yield call(getUserList, payload);
        yield put({
          type: 'saveUsers',
          payload: response.data,
        });
      } catch (error) {
        message.error('Failed to fetch users');
      }
    },
  },
  
  reducers: {
    saveUsers(state, { payload }) {
      return {
        ...state,
        list: payload,
      };
    },
  },
};

1. Shared Components and Hooks

Create reusable components and hooks in the shared module:

// src/modules/shared/components/PageContainer/index.tsx
import { PageContainer as AntPageContainer } from '@ant-design/pro-components';
import { ReactNode } from 'react';

interface PageContainerProps {
  title: string;
  children: ReactNode;
}

export const PageContainer = ({ title, children }: PageContainerProps) => {
  return (
    <AntPageContainer title={title}>
      {children}
    </AntPageContainer>
  );
};

1. Module-Specific Components

Create components for each module:

// src/modules/users/components/UserList/index.tsx
import { Table } from 'antd';
import { useModel } from '@umijs/max';
import styles from './index.less';

export const UserList = () => {
  const { users, loading } = useModel('users');

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    // ... other columns
  ];

  return (
    <Table
      className={styles.userTable}
      columns={columns}
      dataSource={users}
      loading={loading}
    />
  );
};

1. API Services

Organize API calls in service files:

// src/modules/users/services/userService.ts
import { request } from '@umijs/max';

export const getUserList = async (params: any) => {
  return request('/api/users', {
    method: 'GET',
    params,
  });
};

export const createUser = async (data: any) => {
  return request('/api/users', {
    method: 'POST',
    data,
  });
};

1. Custom Hooks

Create module-specific hooks:

// src/modules/users/hooks/useUsers.ts
import { useModel } from '@umijs/max';

export const useUsers = () => {
  const { users, loading, fetchUsers } = useModel('users');

  const refreshUsers = async () => {
    await fetchUsers();
  };

  return {
    users,
    loading,
    refreshUsers,
  };
};

This architecture provides several benefits:

1. Modularity: Each feature is self-contained with its own components, models, and services
2. Reusability: Shared components and utilities can be easily reused
3. Maintainability: Code is organized by feature and is easier to maintain
4. Scalability: New modules can be added without affecting existing ones
5. Type Safety: TypeScript interfaces ensure type consistency

Best Practices:

1. Lazy Loading: Use dynamic imports for routes to improve initial load time
2. State Management: Keep state local to modules when possible
3. Component Design: Create reusable components in the shared module
4. Type Safety: Use TypeScript interfaces for all props and state
5. Testing: Write tests for each module independently

To migrate your existing code:

1. Create the new folder structure
2. Move related components and logic into appropriate modules
3. Update imports and dependencies
4. Test each module independently
5. Gradually migrate one feature at a time