Front‑End Project Architecture, Code Standards, and Engineering Practices

Front‑End Project Architecture, Code Standards, and Engineering Practices

Preface

The author recounts personal experiences of multiple layoffs, a year of front‑end infrastructure work, and growing interest in AI and machine learning, concluding with a resolve to share interview preparation and technical insights.

1. Project Directory Conventions

Two common directory structures are presented; the second, based on functional types, is adopted. Example layout:

├─src
│  ├─api                # data requests
│  ├─assets
│  │  ├─css
│  │  └─images
│  ├─config
│  ├─components
│  │  ├─common
│  │  └─Home
│  ├─layout
│  ├─hooks
│  ├─routes
│  ├─store
│  │  └─Home
│  ├─pages
│  │  └─Home
│  ├─utils
│  └─main.ts

An alternative domain‑model‑driven layout groups page‑specific APIs and components within each page folder.

2. Code Writing Standards

Key conventions include component naming, interface prefixes, event handler prefixes, and tooling support (VSCode, EditorConfig, Prettier, ESLint, Stylelint). Git commit standards are enforced via Husky, lint‑staged, commit‑lint, and Commitizen.

2.1 React Component Example

import React, { memo, useMemo } from 'react';

interface ITitleProps { title: string }

const Title: React.FC
= props => {
  const { title } = props;
  return
{title}
;
};

export default memo(Title);

2.2 API Interface Example

export interface HttpSuccessResponse
{ code: number; message: string; data: T }
export interface ILoginParams { username: string; password: string }
export interface ILoginData { token: string }

export const loginApi = (params: ILoginParams) => request.post
('/xxx', params);

2.3 Event Naming

const onChange = () => { /* ... */ };

3. State Management Optimization

A custom store creator using React Context and generics provides useModel , connectModel , StoreProvider , and getModel utilities.

function createStore
(store: () => T) { /* implementation */ }
export default createStore;

Usage examples for functional components, class components, and external modules are shown.

4. Unified Local Storage

A generic LocalStorage class handles serialization, type inference, and cross‑platform compatibility.

export class LocalStorage
implements IStorage
{ /* setItem, getItem, removeItem */ }

5. Request Abstraction

An Axios instance with request/response interceptors adds token headers and normalizes error handling, returning objects instead of rejected promises.

export const createAxiosIntance = (baseURL: string) => { /* interceptors */ };
export const request = createAxiosIntance('https://xxx');

6. API Management

API folders contain type definitions and request functions, e.g., a login API.

export interface ILoginParams { username: string; password: string }
export interface ILoginData { token: string }
export const loginApi = (params: ILoginParams) => request.post
('/distribute/school/login', params);

7. Utility Function Library

Common methods and hooks are extracted into a reusable library (≈30+ utilities) with Jest tests, built using dumi2.

8. Component Library

Reusable UI, business, and functional components (e.g., pull‑to‑refresh, virtual scroll) are packaged as a component library using dumi2.

9. CSS Pre‑processor and Module Strategy

Less or SCSS is used as a CSS superset; CSS modules (or Vue scoped styles) provide isolation. Vite configuration example:

export default defineConfig({
  css: {
    modules: {
      localsConvention: 'camelCase',
      generateScopedName: '[local]-[hash:base64:5]',
    },
  },
});

10. Immer for Immutable Updates

Immer simplifies immutable state updates in React, reducing unnecessary re‑renders and boilerplate.

import produce from 'immer';
setUserInfo(produce(draft => { draft.age = age; }));

11. Private NPM Registry

Guidance on setting up an internal npm registry (e.g., Verdaccio or OSS) to host private packages such as state‑management, request, component, and CLI libraries.

12. Project Templates

Pre‑configured templates for backend admin, mini‑programs, H5, Node, and other project types streamline onboarding.

13. CLI Scaffold

A custom CLI (similar to vue‑cli, vite, CRA) enables quick selection and download of project templates, improving developer productivity.

14. Git Workflow Standards

Adopt a Git‑flow process with commit hooks, lint‑staged checks, and commit‑lint to maintain repository health.

15. Documentation Site

All conventions, libraries, and guides are published to an online documentation site (e.g., Yuque) for easy reference by new team members.