React Code Reviews in Open Source: Ensuring Quality and Collaboration

Rate this content
Bookmark

In this lightning talk, we will explore the significance of code reviews in open source projects, specifically within the React ecosystem. We'll discuss the benefits of code reviews for maintaining code quality, encouraging collaboration, and upholding project standards. By emphasizing effective feedback, respectful communication, and the use of relevant tools, participants will gain practical insights on conducting

impactful React code reviews. Join me to learn how code reviews can enhance the development process, encourage knowledge sharing, and contribute to the success of open source projects in the React community.

Patrick Odey
Patrick Odey
6 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Open Source promotes accessibility, inclusivity, collaboration, innovation, transparency, and trust. Code reviews are a collaborative process in software development, with challenges including language barriers, documentation changes, and review backlog. Best practices for effective code reviews include clear objectives, focusing on the code, and using code review tools. Linters are important for scanning code issues, and measuring success in code reviews can be done using key metrics. React Code Reviews are crucial for the success of open-source projects.

Available in Español

1. Introduction to Open Source and Code Reviews

Short description:

Hi, I'm Patrick O'Day, a Developer Relations Engineer at Storyblock. Today, I'll be speaking on React Code Reveals in Open Source, Ensuring Quality and Collaboration. Open Source refers to making software code available to the public, promoting accessibility, inclusivity, collaboration, innovation, transparency, and trust.

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.

2. Understanding Code Reviews and Best Practices

Short description:

Code review is a collaborative process in software development, where one or more developers evaluate the source code written by another developer. The challenges in open source code reviews include language barriers, documentation changes, and review backlog. Best practices for effective code reviews include having clear objectives, focusing on the code, and leveraging code review tools like linters.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Impact: Growing as an Engineer
React Summit 2022React Summit 2022
27 min
Impact: Growing as an Engineer
Top Content
Becoming a web engineer is not easy, but there are tons of resources out there to help you on your journey. But where do you go from there? What do you do to keep growing, and to keep expanding the value you bring to your company? In this talk we’ll look at the different kinds of impact you can have as a web engineer. We’ll walk through what it means to take on bigger, more complex projects, and how to scale yourself, and grow the community around you. By driving our own development we can all grow our impact, and in this talk, we’ll discuss how to go about this.
On Becoming a Tech Lead
TechLead Conference 2023TechLead Conference 2023
25 min
On Becoming a Tech Lead
Top Content
Tech lead sounds like a lot of work. And not the fun coding kind either. Why would you ever want that? What does it feel like when you get it?In this talk Swizec explains why he took the step towards technical leadership, how his priorities changed, and why it means he’s doing more engineering than ever. A whole new world where writing code is the easy part.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Principles for Scaling Frontend Application Development
React Summit 2023React Summit 2023
26 min
Principles for Scaling Frontend Application Development
Top Content
After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
Effective Communication for Engineers
TechLead Conference 2023TechLead Conference 2023
36 min
Effective Communication for Engineers
Your communication skills affect your career prospects, the value you bring to your company, and the likelihood of your promotion. This session helps you communicate better in a variety of professional situations, including meetings, email messages, pitches, and presentations.

Workshops on related topic

Node.js: Landing your first Open Source contribution & how the Node.js project works
Node Congress 2023Node Congress 2023
85 min
Node.js: Landing your first Open Source contribution & how the Node.js project works
Workshop
 Claudio Wunder
Claudio Wunder
This workshop aims to give you an introductory module on the general aspects of Open Source. Follow Claudio Wunder from the OpenJS Foundation to guide you on how the governance model of Node.js work, how high-level decisions are made, and how to land your very first contribution. At the end of the workshop, you'll have a general understanding of all the kinds of work that the Node.js project does (From Bug triage to deciding the Next-10 years of Node.js) and how you can be part of the bigger picture of the JavaScript ecosystem.

The following technologies and soft skills might be needed):
  - Basic understanding of Git & GitHub interface
  - Professional/Intermediate English knowledge for communication and for allowing you to contribute to the Node.js org (As all contributions require communication within GitHub Issues/PRs)
  - The workshop requires you to have a computer (Otherwise, it becomes difficult to collaborate, but tablets are also OK) with an IDE setup, and we recommend VS Code and we recommend the GitHub Pull Requests & Issues Extension for collaborating with Issues and Pull Requests straight from the IDE.

The following themes will be covered during the workshop:
- A recap of some of GitHub UI features, such as GitHub projects and GitHub Issues
- We will cover the basics of Open Source and go through Open Source Guide
- We will recap Markdown
- We will cover Open Source governance and how the Node.js project works and talk about the OpenJS Foundation
  - Including all the ways one might contribute to the Node.js project and how their contributions can be valued
- During this Workshop, we will cover Issues from the nodejs/nodejs.dev as most of them are entry-level and do not require C++ or deep technical knowledge of Node.js.
  - Having that said, we still recommend enthusiast attendees that want to challenge themselves to "Good First Issues" from the nodejs/node (core repository) if they wish.
  - We're going to allow each attendee to choose an issue or to sit together with other attendees and tackle issues together with Pair Programming through VS Code Live Share feature
    - We can also do Zoom breakrooms for people that want to collaborate together
  - Claudio will be there to give support to all attendees and, of course, answer any questions regarding Issues and technical challenges they might face
  - The technologies used within nodejs/nodejs.dev are React/JSX, Markdown, MDX and Gatsby. (No need any knowledge of Gatsby, as most of the issues are platform agnostic)
- By the end of the Workshop, we'll collect all (make a list) the contributors who successfully opened a Pull Request (even if it's a draft) and recognise their participation on Social media.
Bring Code Quality and Security to your CI/CD pipeline
DevOps.js Conf 2022DevOps.js Conf 2022
76 min
Bring Code Quality and Security to your CI/CD pipeline
WorkshopFree
Elena Vilchik
Elena Vilchik
In this workshop we will go through all the aspects and stages when integrating your project into Code Quality and Security Ecosystem. We will take a simple web-application as a starting point and create a CI pipeline triggering code quality monitoring for it. We will do a full development cycle starting from coding in the IDE and opening a Pull Request and I will show you how you can control the quality at those stages. At the end of the workshop you will be ready to enable such integration for your own projects.
How To Design A Sustainable Freelance/Contracting Career
Node Congress 2022Node Congress 2022
39 min
How To Design A Sustainable Freelance/Contracting Career
WorkshopFree
Shane Ketterman
Alexander Weekes
2 authors
Ready to kickstart your freelance career or just getting started on your freelance journey? You’re in the right spot. Learn the tricks of the trade from the industry’s most experienced freelancers.
The independent talent movement is the future of work. If you’re considering leaving full-time employment for a career as a freelancer, now is the time to find your successful space in the independent talent workforce. More people are working freelance today than ever before, with the freelance marketplace now contributing $1.2 trillion to the US economy. Some of the most in-demand roles for freelancers right now are senior developers with professional experience in React, Python, Blockchain, QA, and Node.js.
This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing/contracting career. We will give you tools, tips, best practices, and help you avoid common pitfalls.
Designing A Sustainable Freelance Career
React Advanced Conference 2021React Advanced Conference 2021
145 min
Designing A Sustainable Freelance Career
WorkshopFree
Alexander Weekes
Rodrigo Donini
2 authors
Would you like to pursue your passions and have more control over your career? Would you like schedule and location flexibility and project variety? Would you like the stability of working full-time and getting paid consistently? Thousands of companies have embraced remote work and realize that they have access to a global talent pool. This is advantageous for anyone who has considered or is currently considering freelance work.>> Submit your interest on becoming a freelance engineer with Toptal and get a call with Talent Acquisition specialist <<

Freelancing is no longer an unstable career choice.

This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing career. We will give you tools, tips, best practices, and help you avoid common pitfalls.
Table of contents

Module 1: Dispelling common myths about freelancing
Module 2: What does freelancing look like in 2021 and beyond
Module 3: Freelancing choices and what to look for (and what to avoid)
Module 4: Benefits of freelancing from a freelancer + case study
BREAK
Module 6: How to get started freelancing (experience, resume, preparation)
Module 7: Common paths to full-time freelancing
Module 8: Essentials: setting your rate and getting work
Module 9: Next steps: networking with peers, upskilling, changing the world
Module 10: Freelancer AMA