How do you organize your code? Do you use approaches…

The organization of code is based on modularity, reusability, and maintainability. I use a combination of architectural approaches that match the scale and requirements of the project.

Main principles and approaches:

Modular pattern: I actively apply it to divide functionality into independent, loosely coupled modules. Each module is responsible for a specific part of the interface or logic. This simplifies development, testing, and further scaling.

Component-based approach: Primarily, I use component frameworks (React, Vue, Angular). I represent each UI element as a component with its own state, logic, and markup.

// Example of a simple React component
function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

Inheritance: I use it cautiously, mainly for creating base classes or components with common behavior, which are then extended by subclasses. Preference is given to composition over inheritance.

// Example of a base class in plain JavaScript (rarely used in UI)
class BaseComponent {
  constructor(props) {
    this.props = props;
  }

  render() {
    // Basic rendering
  }
}

class SpecificComponent extends BaseComponent {
  render() {
    // Specific rendering, possibly calling super
    super.render();
    // Additional logic
  }
}

Abstraction: I hide implementation details behind a simple interface. This is achieved through functions, classes, components, and modules.
Single Source of Truth: Data is stored in a centralized location (e.g., Redux, Vuex, Context API) to avoid duplication and inconsistency.
Naming: I use semantic and understandable names for variables, functions, classes, and files. I follow accepted conventions.
Directory structure: I organize files by features or types (components, hooks, utils, api, etc.), depending on the size and complexity of the project.
Linting and formatting: I use Prettier and ESLint for automatic code formatting and to identify potential issues and convention violations.
Testing: I write unit, integration, and E2E tests to ensure the correctness of the code.

Brief comparison of inheritance and composition in the context of Frontend:

Approach	Advantages	Disadvantages	Application in Frontend
Inheritance	Simplicity for small hierarchies, "is-a" relationship	Tight coupling, "diamond" problem (multiple ancestors)	Base classes for utility objects (rare), for styles (CSS)
Composition	Flexibility, "has-a" relationship, easier to test	May require more code for simple delegation	Main approach for building UI (components)

Preference is always given to composition because it provides greater flexibility and less coupling, which is important in a dynamic frontend environment.

How do you organize your code? Do you use approaches like modular pattern or inheritance?