Frontend Development Standard Operating Procedure (SOP)

This document outlines the development lifecycle for frontend projects, emphasizing best practices in coding, testing, and deployment. Following these guidelines ensures code quality, maintainability, and performance in our projects.

1. Writing Code: Follow Best Practices

When writing code, always follow coding standards and best practices to ensure your code is clean, readable, and maintainable. Refer to the Angular Style Guide for guidance.

Coding Best Practices:

• Consistent Naming Conventions: Use meaningful names for variables, functions, and classes. Follow Angular’s naming conventions (e.g., PascalCase for components, camelCase for variables).

• Proper Commenting: Write clear, concise comments to explain complex logic. Add comments above functions and blocks of code when necessary.

  • Example:

    /** * This method fetches user details based on the provided user ID. */ getUserDetails(userId: string): Observable<User> { // Call the user service to fetch user details return this.userService.getUserById(userId); }

• Avoid Hardcoding Values: Store configurable values (like URLs, magic numbers) in environment files or constants.

• Keep Functions Small: Each function should perform one clear task. Avoid large, multi-purpose functions.

• DRY Principle (Don't Repeat Yourself): Reuse code where possible, and avoid duplication by using services, helpers, or shared modules.

2. Real-Time Development & Monitoring

While developing, ensure you monitor application performance and behavior in real-time. Use browser tools to track issues early in the development cycle.

Key Areas to Focus:

• Monitor Console Logs:

  • Regularly check the developer console for runtime errors or warnings and address them immediately.

  • Remove any console.log() or debugger statements before committing code.

• Inspect Network Activity:

  • Use the Network tab in browser developer tools to monitor API calls. Avoid duplicate or unnecessary API requests.

• UI Responsiveness:

  • Ensure that the UI is responsive and works across different devices (mobile, tablet, and desktop) as per the design specifications or requirement.

3. Linting and Code Review

Before committing your changes, ensure the code is clean and adheres to the project’s linting rules.

Steps:

• Run Linting:

  • Use ng lint or npm run lint to check for code style violations.

• Code DIFF Review:

  • Review all code DIFFs before committing to spot any unintended changes.

• Follow Commit Message Guidelines:

  • Write clear and meaningful commit messages that describe the purpose of the changes (e.g., "Fixed API call issue in user service").

4. Version Control and Collaboration

Good version control practices help keep the repository clean and make collaboration easier.

Version Control Best Practices:

• Work on Feature Branches:

  • Always create a new branch for every feature or task (git checkout -b feature/task-name).

• Regularly Pull from Main Branch:

  • Keep your branch updated by pulling changes from the main branch and resolving conflicts.

• Push Small, Logical Commits:

  • Break down work into small, logical commits with clear messages to make them easier to review and revert if necessary.

5. Preparing for Merge Requests

Before submitting a merge request, ensure that all relevant checks are performed.

Steps:

• Review Code DIFFs:

  • Use GitLab to review code changes between the source and target branches while creating merge request.

• Follow Merge Request Naming Conventions:

  • Use clear and consistent titles for merge requests (e.g., {{Source branch}} to {{Target branch}}: {{Title}} | {{Jira id}}).

6. Post-Deployment Checks

After deploying, ensure that everything works as expected in the production or staging environment.

Steps:

• Monitor Logs:

  • Monitor application logs and console for any runtime issues post-deployment.

• Perform Smoke Testing:

  • Perform a quick test of major features and flows to ensure everything is functioning correctly.

By following these lifecycle steps and adhering to coding best practices, We can ensure consistent, high-quality code that meets both performance and maintainability standards. This SOP aims to streamline the development process and prevent common mistakes.