Code Review 101: A Guide for Front End Developers

Have you heard of the term “code review”? It’s like a safety net in software development.

Basically, it’s a process where another developer or team member checks the code written by someone else. This is a crucial step in ensuring that the code is clean, efficient, and free of bugs.

As a front-end developer, it is important to know how to conduct effective code reviews to ensure high-quality code.

Code review: Catch errors early, improve quality, and foster collaboration.

“In this guide: “Code Review 101: A Guide for Front End Developers”, I provide best practices and a checklist for front end developers to conduct effective code reviews.

Firstly, the guide emphasizes the importance of communication, collaboration, and constructive feedback during the code review process.

Secondly, covers essential elements to check in HTML, CSS, and JavaScript code, with examples of common mistakes and how to fix them.

Thirdly, includes real-world examples and case studies to illustrate the benefits of code reviews and how they can help improve the quality of code.

Finally, provides links to relevant resources for further learning on code reviews and front end development best practices.”

Why Code review is important?

It ensure that the user interface is functioning as expected and meets project requirements.
It allows for collaboration and learning between team members, sharing knowledge, best practices, and identifying areas for improvement.
Moreover, code reviews can help us to identify security vulnerabilities for instance such as Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF). Therefore, we should conduct code reviews regularly and carefully.
It is an important step in ensuring high-quality code and a better end product.

Code review is an integral part of DevOps cycles, as it helps ensure that code is as clean as possible from the first step of the development pipeline.

Benefits of code review

There are several benefits of code review for improving code quality, collaboration, and learning, including:

Catching errors and bugs early: Can help catch errors and bugs early in the development process, making it easier to fix them and preventing them from causing bigger issues down the line.
Ensuring code quality: Code review helps the development team ensure that the code they produce meets the project requirements, adheres to coding standards, and is optimized for performance.
Facilitating collaboration and learning: Through code review, team members collaborate and share knowledge, allowing them to consider different perspectives and approaches to improve the quality of the code.
Identifying best practices: Code review provides an opportunity to identify and adopt best practices and coding standards that can be applied to future projects, leading to better and more efficient development practices.
Improving team communication: Code review provides an opportunity for team members to communicate effectively and share feedback, leading to better teamwork and a more positive work environment.
Identifying potential security vulnerabilities: Code review can help identify potential security vulnerabilities as a result allowing developers to take steps to address them before the code is released. Thus, code review is an essential practice for ensuring the security of our website.

Common challenges and pitfalls of code review

Here are some of the most common challenges and tips on how to avoid them:

Reviewing too much code at once: Reviewing too much code at once can lead to fatigue and decreased focus. To avoid this, break the code review into smaller, more manageable chunks.
Lack of consistency: Lack of consistency in the code review process can lead to confusion and missed opportunities for improvement. Establish a clear process and guidelines for code review that everyone on the team follows.
Overreliance on automated tools: Automated tools can be helpful in identifying issues, but they should not replace human review. Make sure to review the code manually as well.
Focusing on trivial issues: Focusing on trivial issues can lead to wasted time and decreased productivity. Prioritize the most important issues and focus on those first.
Defensive reactions to feedback: Receiving feedback can be difficult, but it is important to approach it with an open mind and a willingness to learn and improve. Encourage constructive criticism and create a culture of continuous improvement.
Lack of follow-up: After identifying issues in the code review, it is important to follow up and ensure that they are addressed. Establish a system for tracking and addressing issues identified during code review.

By avoiding these common challenges and pitfalls, front-end developers can conduct effective code reviews that lead to higher-quality code and a more productive work environment.

Best practices for code reviews

Effective communication and collaboration are essential

Here are some best practices to consider:

Set clear goals for the code review to ensure everyone understands and can align feedback with them.
Providing context: Firstly, you should provide context around the code you review for example including its purpose, requirements, and expected outcomes. Therefore, providing context can help you and other developers understand the code better and avoid misunderstandings.
Use collaborative tools like GitHub or GitLab to make the code review process more efficient and effective by providing a centralized location for discussions and feedback.
Conduct code reviews in a respectful and constructive manner, focusing on improving the code instead of criticizing the developer, and using a professional and respectful tone in all communication.
Provide specific and actionable feedback, such as suggesting a different naming convention for a variable, to help developers understand what changes they need to make to improve the code.

Some additional tips for making your code review process more user-friendly and interesting

Use visual aids: Incorporate visual aids, such as diagrams or screenshots, to help illustrate your feedback. This can make your feedback easier to understand and more engaging.
Use examples: Use examples to help explain your feedback. This can help developers understand what changes they need to make and how to make them.
Use positive feedback: In addition to providing constructive feedback, make sure to also highlight what the developer did well. Positive feedback can help motivate developers and make the code review process more enjoyable.
Provide resources: Provide resources, such as links to relevant documentation or tutorials, to help developers improve their code. This can show that you are invested in their growth and development as a developer.
Be open to feedback: Finally, be open to feedback from the developer. This can help create a culture of collaboration and can lead to better quality code in the long run.

By incorporating these tips into your code review process, you can make it more engaging and user-friendly for developers, leading to better quality code and a more positive team dynamic.

The role of automated tools in code reviews

Automated tools can analyze code for potential issues, check compliance with coding standards, test code, and integrate into development workflows.
Automated tools should not replace manual code reviews.
Combining automated tools with manual reviews ensures high-quality code and catches issues early in the development process.

Examples of common mistakes and how to fix them

During code reviews, it’s important to identify common mistakes that developers may make and provide suggestions for how to fix them. Here are some examples of common mistakes and how to address them:

Lack of comments: Often, developers may not provide enough comments to explain their code, making it difficult for other team members to understand. To address this issue, developers should provide clear and concise comments throughout their code to explain the purpose of each function or block of code.
Overcomplicated code: Developers may create code that is overly complex and difficult to understand. In order to simplify their code, developers should break it down into smaller, more manageable functions and use clear and concise naming conventions.
Ignoring best practices: Sometimes, developers fail to follow best practices for coding, such as using appropriate variable names or formatting their code correctly. To ensure that their code adheres to best practices, developers should review them regularly.
Poor error handling: If developers don’t handle errors correctly, it can lead to unexpected results or crashes. To address this, developers should ensure that their code includes proper error handling to prevent these issues.
Inefficient code: Code that is not optimized for performance can lead to slow load times or other performance issues. Developers can optimize their code by using efficient algorithms, minimizing network requests, and caching data where possible.

Real-world examples of code reviews and their outcomes

Sure, here are some examples of code reviews and their outcomes:

Amazon: In 2019, Amazon conducted a code review of its AWS S3 service after experiencing a major outage. After conducting a review, it was revealed that the outage was caused by a coding error that disabled a larger number of servers than intended. As a result of the review, Amazon implemented changes to its software and processes to prevent similar issues in the future.
Mozilla: Mozilla, the company behind the Firefox web browser, conducts regular code reviews to ensure the quality and security of its software. In one instance, a code review revealed a security vulnerability that could have allowed an attacker to execute malicious code on a user’s computer. The vulnerability was quickly addressed and patched, preventing potential harm to users.
Google: Google uses automated tools to assist with code reviews, but also conducts manual reviews for critical code changes. In one instance, a manual code review of Google’s Android operating system revealed a critical security vulnerability that could have allowed an attacker to gain access to a user’s device. The vulnerability was quickly addressed and patched, ensuring the security of Android devices.

Common mistakes that can be identified during code reviews include:

Lack of documentation: Developers may not provide enough documentation for their code, making it difficult for others to understand and maintain. This can be avoided by enforcing documentation standards and guidelines.
Overcomplicated code: Developers may create code that is overly complex and difficult to understand. This can be avoided by adhering to best practices and simplifying code where possible.
Ignoring best practices: Developers may ignore best practices for coding, such as using appropriate variable names or formatting their code correctly. This can be avoided by regularly reviewing and adhering to best practices.

How do you perform code review?

1. What is the aim when you do code review?

Enhancing the value of the system via improving maintainability, operations, scalability, and performance
Add value to People to help them learn new things
Supporting best practices and identifying common mistakes/patterns

2. When do you do code review?

High Focus Time
- New developer joins the team?
- New methodology or technology change is being implemented?
- Vertical Slice is being built
Normal Focus Time when Peer Reviews during the sprint
As early as possible

3. What are the good practices in doing Code Reviews?

Eslint
Sonar lint
Sonar Cloud

4. What are the things you look for in the Code Review?

Architecture
Design
Cross Cutting
Code
Engineering Practices

Code Review checklist

During code review, it’s important to ask the following questions to yourself:

Can I easily understand, maintain, and scale the code?
Does the code adhere to coding standards and guidelines?
Is any code duplicated more than twice?
Can I easily unit test or debug the code to identify the root cause of any issues?
Is a function or class too large or responsible for too many things?

If the answer to any of these questions is unsatisfactory, it’s appropriate to suggest or recommend code changes.

General

Does the code work as expected and meet the requirements?
Is the code easy to understand and maintain?
Is the code consistent with the project’s architecture and design patterns?
Does the code have appropriate error handling and logging?
Code follows coding standards/guidelines.
DRY. Is the same code duplicated more than twice?
Are functions/classes/components reasonably small?
Event listeners removed at teardown.
Naming conventions followed for variables, file names, and translations.
Removed unused packages from NPM.
Separation of Concerns followed.

Code style

Is the code properly formatted and indented?
Does the code follow consistent naming conventions for variables, functions, and files?
Does the code use proper spacing and alignment?
Is the code written in a readable and understandable manner?
Avoid multiple if/else blocks.
No commented-out code.
No unnecessary comments: comments that describe the how.
Add necessary comments where needed. Necessary comments are comments that describe the why.

ES6+

Is the code using modern JavaScript features, such as arrow functions and destructuring?
Use spread/rest operator.
Use default values.
Use const over let (avoid var).
Use import and export.
Use template literals.
Use Destructuring assignment for arrays and objects.
Use Promises or Asyns/Await. Rejection is handled.

React

Are components have defined propTypes/typescript/flow?
Keep components small.
Functional components for components that don’t use state.
No API calls in containers, delegate to Sagas
No state updates in loop.
Minimize logic in the render method.
Don’t use mixins, prefer HOC and composition.

Third-Party Libraries

Use lodash/ramda functions instead of implementing itself.
Is Immutable.js was used correctly?
Is any nice/useful library was used which we didn’t know before?

Eslint

Code has no linter errors or warnings.
No console. Logs.

CSS/CSS in JS

Consistent naming conventions are used (BEM, OOCSS, SMACSS, e.t.c.).
CSS selectors are only as specific as they need to be grouped logically.
Is any ‘CSS in JS’ library was used?
Use Hex colour codes #000 unless using rgba().
Avoid absolute positioning.
Use flexbox.
Avoid! important.
Do not animate width, height, top, left and others. Use transforms instead.
Use same units for all projects.
Avoid inline styles.

Testing

Tests are readable, maintainable, trustworthy.
Test names (describe, it) are concise, explicit, descriptive.
Avoid logic in your tests.
Don’t test multiple concerns in the same test.
Cover the general case and the edge cases.
Test the behavior, not the internal implementation.
Use a mock to simulate/stub complex class structure, methods or async functions.

Git

Commits are small and divided into logical parts.
Commits messages are small and understandable.
Use branches for new features.
Make sure no dist files, editor/IDE files, etc are checked in. There should be a. .gitignore for that.

Other

Security.
Usability.
Is the code optimized for performance and loading speed?

Conclusion

📝 In conclusion, we can say that code review is an essential process in software development, helping to improve code quality, identify defects and vulnerabilities, and promote a culture of continuous improvement. To make the code review process more effective, it is important to choose the right reviewer, set clear expectations, and provide constructive feedback and suggestions.

If you want to learn more about code review for front end developers, here are some resources that you may find useful:

Code Review Best Practices: A guide to code review best practices by Atlassian, including tips for conducting effective code reviews and avoiding common mistakes.
Front End Handbook 2019: A comprehensive guide to front end development, covering topics such as HTML, CSS, JavaScript, and best practices for development.
ESLint: A popular open-source tool for detecting and reporting errors in JavaScript code. It can be used as part of a code review process to ensure code quality and consistency.
Stylelint: An open-source tool for detecting and reporting errors in CSS code. It can be used as part of a code review process to ensure CSS code is well-formatted and adheres to best practices.
Codecademy: An online learning platform offering courses on web development, including HTML, CSS, JavaScript, and other front end development technologies.
Mozilla Developer Network: A resource for web developers, offering documentation, tutorials, and best practices for front end development.

👨‍💻 Thank you for reading this blog post. I hope you have learned something new and useful about code review for front end developers. Happy coding! 😊

For more on React and complex user interfaces, check out my post on micro-frontend architecture.

I explored breaking down large frontends into smaller, manageable pieces with React and modern tech.

Check it out here: Micro Frontend Architecture Overview