Frontend Code Review Guidelines || Angular

Establishing clear guidelines for code reviews is crucial for maintaining code quality and consistency. Here are some guidelines for code reviews:

General Guidelines:

1. Modularity and Reusability: Encourage modular code and reusable components/services to promote maintainability.

2. Naming Conventions: Ensure adherence to consistent naming conventions for variables, functions, classes, etc., following Angular and TypeScript style guides.

3. Error Handling: Verify proper error handling and logging strategies are implemented.

4. Performance: Review code for performance bottlenecks, unnecessary loops, or inefficient logic.

5. Documentation: Ensure code is adequately documented, including comments for complex sections or non-trivial functions.

Angular-Specific Guidelines:

1. Angular Best Practices: Ensure compliance with Angular best practices, such as using Angular CLI, lazy loading modules, AOT compilation, etc.

2. Angular Style Guide: Follow the official Angular style guide for code formatting and structuring.

3. Template Syntax: Review HTML template syntax to ensure it's concise and follows best practices.

4. Dependency Injection: Validate proper use of dependency injection throughout the codebase.

TypeScript-Specific Guidelines:

1. Type Safety: Ensure strict typing and use TypeScript features effectively to catch potential bugs at compile-time.

2. Code Readability: Review code for readability, ensuring meaningful type names and clear interfaces.

3. Strict Null Checks: Leverage TypeScript's strict null checks to minimize null/undefined-related errors.

4. Enums and Interfaces: Encourage the use of enums and interfaces for better type safety and readability.

NgRx-Specific Guidelines:

State Management: Check state management approaches and adherence to best practices.

Memory Leak Detection in Code Reviews:

1. Subscription Handling:

   • Check for subscriptions to observables (e.g., from HTTP requests or services) and ensure they are unsubscribed when the component is destroyed.

   • Look for subscriptions made directly in components, services, or within templates using the async pipe.

2. DOM Cleanup:

   • Review any direct DOM manipulations and ensure they are properly cleaned up when the associated component or view is destroyed.

   • Examine the use of Renderer2 to manage DOM elements and ensure proper cleanup.

3. Change Detection Strategies:

   • Evaluate the use of Angular's change detection strategies (ChangeDetectionStrategy.OnPush) to optimize change detection and prevent unnecessary checks that can cause memory overhead.

4. Component Lifecycle Hooks:

   • Check if components properly implement ngOnDestroy() to release resources, unsubscribe from observables, or perform cleanup tasks.

5. Avoiding Circular Dependencies:

   • Be mindful of circular dependencies between services or components, as they can lead to memory leaks. Encourage a modular and decoupled architecture.

6. Avoid Storing Data in Components:

   • Encourage developers not to store large or unnecessary data directly within components, especially if that data persists beyond the component's lifecycle.

7. Memory Profiling:

   • Recommend using browser developer tools (such as Chrome DevTools) to profile memory usage. Look for increases in memory allocation that persist after certain component interactions.

Code Review Process:

1. Size of Changes: Encourage smaller, manageable pull requests by limiting changes to under 200 lines.

2. Early Review: Review code in a Work-in-Progress (WIP) state within feature branches to catch issues early.

3. Main focus: Perform thorough reviews, focusing on different aspects (functional, architectural, style, etc.).

4. Constructive Feedback: Provide constructive feedback focusing on improvements rather than criticism.

5. Clear Action Items: Ensure that action items from the review are clearly communicated and addressed.

Tools for Code Reviews:

1. Version Control System: Utilize Git or other version control systems to manage code changes and review through merge requests/pull requests.

2. Code Review Tools: Use GitLab to facilitate code reviews, comments, and discussions.

3. Linters and Formatters: Integrate linters and code formatters to enforce code style and catch common errors before reviews.

These guidelines provide a comprehensive approach to reviewing frontend code, ensuring code quality, maintainability, and adherence to best practices. Also, these guidelines can evolve over time as best practices and project requirements change.