Lesson 6

Best Practices for Code Reviews and Automating Workflows

Workplace Context

You are working as a senior developer on a fast-paced team responsible for a large-scale web application. As part of your role, you are responsible for reviewing code submitted by other developers, ensuring that the code is efficient, maintainable, and follows industry standards. To ensure that nothing slips through the cracks, you and your team have decided to implement automated workflows that run tests, check for code quality issues, and enforce coding standards before merging any code into the main branch.

The following trainings will improve your ability to:

Conduct effective and constructive code reviews.
Implement automated workflows using GitHub Actions to ensure high-quality code without the need for manual intervention at every step.

By integrating best practices for code reviews and automation into your team’s workflow, you can streamline collaboration, improve code quality, and reduce the likelihood of errors being introduced into the production environment.

Learning Objectives

By the end of this lesson, you will be able to:

Explain the importance of code reviews in maintaining code quality and collaboration.
Conduct effective code reviews, focusing on readability, maintainability, and efficiency.
Provide constructive feedback during a code review.
Set up GitHub Actions to automate tasks such as testing, linting, and deployment.
Implement automated workflows to improve development efficiency and reduce manual errors.

Prerequisite: Node.js and npm

Node.js Overview

Node.js is a JavaScript runtime that allows you to run JavaScript code on your computer outside of a web browser. It is commonly used for server-side development and enables developers to use JavaScript to build backend applications, scripts, and automation tools.

Why Do You Need Node.js? In this lesson, you will use Node.js to install development tools, run scripts, and automate workflows. Many modern development tools, such as linters (e.g., ESLint) and testing frameworks (e.g., Jest), require Node.js to work properly.

npm Overview

npm stands for Node Package Manager. It is the default package manager for Node.js and is used to install, manage, and share JavaScript packages (libraries or tools).

Why Do You Need npm? npm allows you to easily install and manage tools like ESLint for linting code, Jest for testing, and GitHub Actions for automating workflows. It also helps you manage dependencies for your projects.

Installing Node.js and npm

Step-by-Step: Installing Node.js and npm

On Windows

Download Node.js:
- Go to the official Node.js website: https://nodejs.org .
- Download the LTS (Long-Term Support) version, as it is more stable for development purposes.
Install Node.js:
- Run the installer you downloaded.
- Follow the prompts to install Node.js. This will also install npm automatically.
Verify Installation:
- Open the Command Prompt or PowerShell.
- Run the following commands to verify that Node.js and npm have been installed correctly:
```
node -v
npm -v
```
- You should see the version numbers of Node.js and npm. If so, the installation was successful.

On macOS

Download Node.js:
- Visit https://nodejs.org and download the LTS version of Node.js for macOS.
Install Node.js:
- Open the downloaded installer and follow the instructions to install Node.js. This will also install npm.
Verify Installation:
- Open the Terminal.
- Run the following commands to verify the installation:
```
node -v
npm -v
```
- You should see the version numbers of Node.js and npm, indicating a successful installation.

On Linux

Install Node.js via the package manager for your distribution (e.g., apt for Ubuntu):
```
sudo apt update
sudo apt install nodejs npm
```
Verify Installation:
- Run the following commands to check that Node.js and npm are installed:
```
node -v
npm -v
```

If you encounter any issues during installation, refer to the Node.js documentation for detailed troubleshooting.

Best Practices for Code Reviews

Now that you have Node.js and npm set up, let us explore how to conduct effective code reviews.

1. Review Code in Small Increments

Reviewing smaller, incremental changes is easier and more manageable than reviewing large blocks of code. Encourage your teammates to submit pull requests (PRs) that contain well-scoped changes.
Smaller PRs allow for faster reviews, quicker feedback, and more focused discussions.

2. Focus on Readability and Maintainability

Ensure that the code is easy to understand. Can someone new to the project quickly grasp what the code does?
Check that variable names, function names, and class names are descriptive and follow your team’s naming conventions.

3. Look for Consistency

Code consistency helps maintain a clean codebase and improves collaboration. Check for consistent formatting, indentation, and structure.
Tools like Prettier or ESLint can be used to automate code formatting and linting to ensure that the style remains uniform across the project.

4. Check for Efficiency

Review the code for performance improvements or optimizations. Does the code contain unnecessary loops or duplicated logic? Can the same task be accomplished with fewer resources?
Encourage the use of efficient algorithms and data structures where applicable.

5. Ensure Security Best Practices

Look for common security issues, such as unvalidated user input, hard-coded credentials, or insecure handling of sensitive data.
Ensure that the code adheres to security best practices such as input validation, authentication, and proper error handling.

6. Give Constructive Feedback

When providing feedback, be specific and actionable. Instead of saying “this is wrong,” suggest improvements and explain why they are necessary.
Maintain a positive tone and encourage collaborative discussion. For example: “I noticed this function could be simplified by using a higher-order function, which might improve readability.”

Automating Code Reviews with GitHub Actions

Manual code reviews can miss important issues, especially if team members are reviewing large or complex codebases. Automation can complement human reviews by enforcing coding standards, running tests, and even detecting security vulnerabilities before code is merged.

1. What Are GitHub Actions?

GitHub Actions is a tool that allows you to automate your software development workflows directly in your GitHub repository. You can use it to:

Automatically run tests.
Enforce code quality by running linters.
Deploy applications after a successful merge.

Automation helps catch issues early and reduces the manual effort required to maintain a high-quality codebase.

2. Setting Up a Simple Workflow with GitHub Actions

Let us walk through how to set up a basic GitHub Actions workflow to run tests and lint the code whenever a pull request is opened.

Step-by-Step: Create a GitHub Actions Workflow

Create a Workflow File:
- In your repository, navigate to the .github/workflows/ directory (create it if it does not exist).
- Add a new file named ci.yml for your continuous integration (CI) workflow.

Configure the Workflow:

Here is an example of a simple workflow that runs tests and checks for code linting using Node.js:


name: CI Workflow
 
on:
  pull_request:
    branches:
      - main
 
jobs:
  build:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
 
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "14"
 
      - name: Install dependencies
        run: npm install
 
      - name: Run tests
        run: npm test
 
      - name: Run lint
        run: npm run lint

This workflow is triggered automatically whenever a pull request is opened. It checks out the code, installs dependencies, and runs the tests and linting tasks.
You will become more familiar with these npm commands and other items as you continue learning, so do not worry about memorizing them now.

Commit the Workflow File:
- Once the workflow file is created, commit it to your repository. GitHub Actions will start running the workflow whenever a pull request is submitted to the main branch.

Activity: Setting Up Automated Workflows

Task: Automate Your Project’s CI Workflow

Set Up ESLint:
- Install ESLint in your project and configure it with your preferred rules. Ensure that the linter runs automatically whenever code is pushed or a pull request is submitted.
Submit a Pull Request:
- Create a pull request in your project. The GitHub Actions workflow you have set up will automatically check your code for issues and run your tests.
Review a Pull Request:
- Pair with a classmate and review each other’s pull requests. Ensure that the automated workflow runs successfully before approving and merging the PR.

Aside: GitHub Desktop

It is incredibly important to be familiar with git and GitHub in order to be a successful developer. Interviews for developer positions often include questions on version control and workflow, so it is highly recommended you become familiar with the command line interface, git commands, and keeping your hands on the keyboard.

However, there is also a graphical interface available for managing version control in your projects called GitHub Desktop , which is often more convenient. You may explore this interface as you continue learning, but ensure you are aware of the foundational concepts of version control that are happening in the background!

Source: GitHub Desktop

Examples from Industry

React Repository

Head over one last (probably not) time to the React repository on GitHub , this time to explore the GitHub Actions that are currently associated with the repository.

Click on the “Actions” tab at the top of the repository, which should bring you to the actions page for the repository . Here, you can see which actions are active, which branches they are active on, when the last time they were run is, how long they took to run, and a number of other important pieces of information.

Take a look through some of the active actions, and try to identify their purpose and method. While the scripts involved in each action may be unfamiliar territory, the actions themselves should contain descriptive enough steps to understand them (most of the time).

GitHub actions could be an entire training session on their own, and thus you are not expected to be experts in them at this stage; however, it is a wonderful tool to explore as you continue training!

As a bonus, look through some more pull requests with the added context of code review best practices, and observe how reviews occur in the real world!

Knowledge Check

What is the primary benefit of using GitHub Actions in your development workflow?

It allows you to manually review all code changes.
It automates repetitive tasks like running tests and linting.
It manages code versions automatically.
It creates new branches for each developer.
Select an answer to view feedback.

Which of the following is a best practice for conducting code reviews?

Only review large pull requests with many changes.
Focus on readability, maintainability, and consistency.
Ignore formatting issues to focus on functionality.
Avoid providing feedback unless there are major issues.
Select an answer to view feedback.

Summary

In this lesson, you learned how to install Node.js and npm, conduct effective code reviews, and set up automated workflows using GitHub Actions. Automation helps ensure code quality and consistency while reducing manual effort. Additionally, best practices for code reviews were discussed to help maintain a high-quality codebase.