React Code Reviews in Open Source: Ensuring Quality and Collaboration

Hi everybody, my name is Patrick O'Day, I'm a Developer Relations Engineer at Storyblock. I'm really excited to be speaking at the React Advanced London 2023. Today I'm going to be speaking on React Code Reveals in Open Source, Ensuring Quality and Collaboration.

If I get deep into this topic, we first of all have to understand what Open Source is. Simply put, Open Source refers to a software development approach where the code of a software is made available to the public. Basically when you have an open source software, it's free to use and people can choose to contribute to the software also.

Now, as a fun fact, React is an open source project. What are the significance of open source? Accessibility and inclusivity. Now, on an open source project, anyone can contribute irrespective of gender, race, or abilities. Collaborative development. In open source, we encourage collaboration, also rapid innovation. When you are coding or contributing to open source software, you always meet innovation and ideas from fellow contributors. We see transparency and trust. In open source contributions, there's always transparency, because you can actually look at the code and tell if there's any malicious code in there. So there's always trust and transparency.

Now, we talk about code reviews. What is code review? Code review is a collaborative process in software development, where one or more developers evaluates the source code written by another developer. Now, we are going to look at how code reviews work. The first step would be submission by the contributor. Now, when the contributor submits a particular code or a PR, there's always a request for review by the reviewer or the maintainer of that open source project. Now, this would undergo evaluation, which would now return feedback to the contributor. If necessary, there will be discussion, but after that, approval, if everything goes well, then the code or the commit is being merged into the actual repo.

Now, we are going to look at the challenges in open source code reviews. The first is language barriers. Now, this is really common because, in an open source project, you have different persons from different parts of the world with different languages contributing. So, communication might be an issue. Documentation. Different persons are committing to a particular open source project. So, since they are new features, there are always changes in the documentation. And this can be a hassle for the documentation team managing a particular open source project. Look at review backlog. This goes to the reviewers because there are many PRs that comes with a popular open source project. For example, we actually have a lot of PRs there that are being looked at by the reviewers, and this takes a lot of time and can be a hassle or pain.

Now, we look at best practices for effective code reviews. The first is having clear objectives. It's also good or it's important to define the goals and expectations of the code review such as finding bugs or improving the code quality in this particular sprint review. Review the code, not the person. This is very important because we have to focus on the code as a reviewer and not the author. We keep the feedback constructive and also respect and emphasize on improvements rather than criticism. We look at the use of code review tools. It's important to leverage code review tools that streamline the process making it easier to track changes and discussion. We will look at the tools in the next slide. As you can see from the GIF here, you already know because most of them are or all of them are popular. The first is linters. The most popular linter I know is ESLint.

What's the use of the linter? Linters scan for code issues such as syntax errors, style violation, and potential bugs. We can leverage the use of code review platforms like GitHub, GitLab, Bitbucket. And these tools provide built-in code review tools or features and you can integrate them with other tools.

For continuous integration, we can leverage the tools like CI, CircleCI, Travis and Jenkins, and this can automatically run tests on linters.

Now measuring success, how do we measure success in open-source code reviews? Now you can use some KPIs or some key metrics. I'll just leave one here. So for code review and completion time, if you have a high number of devs actively participating in a code review, there will be a shorter amount of time for that particular code review. So the higher number of devs reviewing a particular code, the better. Let's get it done together.

So in a nutshell, React Code Reviews are the source that makes open source projects thrive. So why wait? Join the React Code Review revolution today. Let's create a little bit of magic.