We use cookies to enhance your experience on the site
CodeWorlds

Code Organization in Large Projects

In large projects, organization is key - just like in the shogun's army, everyone must know their place.

Barrel Exports (index.ts)

1// features/samurai/index.ts
2export * from './samurai.component';
3export * from './samurai.service';
4export * from './samurai.model';
5export * from './components/samurai-card.component';
6
7// Usage - one import instead of many
8import {
9  SamuraiComponent,
10  SamuraiService,
11  SamuraiCardComponent
12} from './features/samurai';

Naming Conventions

1feature.component.ts       # Component
2feature.component.html     # Template
3feature.component.scss     # Styles
4feature.component.spec.ts  # Tests
5
6feature.service.ts         # Service
7feature.guard.ts           # Guard
8feature.directive.ts       # Directive
9feature.pipe.ts            # Pipe
10feature.module.ts          # Module (legacy)
11feature.routes.ts          # Routes (standalone)

Best Practices

  1. One component = one directory (with related files)
  2. Group by functionality, not by type
  3. Use barrel exports for clean imports
  4. Core for singletons, Shared for reusable elements
  5. Lazy loading for feature modules
  6. Maximum 400 lines per component file
Go to CodeWorlds