Contributing to an open source project can be intimidating at first. You’re faced with thousands of files, directories, and programming languages you’ve probably never even heard of. Before you become overwhelmed, the first step to success is finding the project’s documentation.
Every open source project sets their own standards and follow specific guidelines for development. Such as initial setup, bug reporting, styling, contribution procedures, etc. All this information can be found in the documentation. A.K.A your bible to any open source project.
For the purpose of this post, I will be comparing the contribution process of two popular open source JavaScript libraries:
React, Facebook’s user interface library along with Google’s dynamic web app framework, AngularJS.
I will outline where to look in order to find information on creating an issue, patching bugs, contribution procedures, and analyze pull requests.
Bugs
In order to track a public issue, find a known bug, or file a new bug, Facebook uses GitHubs issue tracking. This allows users to collaborate with one another in solving questions and building solutions. In the case of a security issue, Facebook has implemented a separate bounty program for safe disclosure of bugs.
Squashing a Bug
If you’re planning on fixing a bug it’s important to check the comment thread to see if someone else is already working on a fix. If nobody is currently working on the issue, you should leave a comment stating that you intend to work on a fix.
If the issue doesn’t exist, it is recommended that you file an issue first before making a pull request. This allows others to see a detailing description of what it is your fixing. Also, it helps developers keep track of the issue in case your fix isn’t accepted.
Pull Request Breakdown
Header component search input fixed for mobile #10749
This is a great example of how the same contribution process is applied to React JS team members.
- bvaughn suggested fixing a search input field on mobile device
- Great use of visuals to reproduce the bug
-
- bvaughn requested a review from a react developer
- facebook-github-bot detected the CLA was signed by the contributor
- Great use of visuals to reproduce the bug
- reactjs-bot produce a deploy preview built with commit
- f71981d bvaughn merged commit 00296ea into gatsby
Bugs
If you’re looking to submit a new issue or suggest a new feature, you have a couple of options. In an attempt to better coordinate and prevent duplication of work Google suggests that:
Major Changes discuss withing their dev mailing list or IRC
Minor Changes submitted to the GitHub Repository as a Pull Request.
Squashing a Bug
Like any other open source project it is important to search the issue log, in case your questions or bug has already been posted. If your search turns up no results, you can open a new issue.
Below is Angular’s suggest template to follow while submitting a bug:
- Overview of the Issue — if an error is being thrown a non-minified stack trace helps
- Motivation for or Use Case — explain why this is a bug for you
- AngularJS Version(s) — is it a regression?
- Browsers and Operating System — is this a problem with all browsers or only specific ones?
- Reproduce the Error — provide a live example (using Plunker or JSFiddle) or an unambiguous set of steps.
- Related Issues — has a similar issue been reported before?
- Suggest a Fix — if you can’t fix the bug yourself, perhaps you can point to what might be causing the problem (line of code or commit)
Pull Request Breakdown
perf(jqLite): avoid repeated add/removeAttribute in jqLiteRemoveClass #16131
- jbedard had suggested removing repeated attributes in a class
- GoogleBot detected that a CLA was signed by the contributor
- gkalpak an Angular software engineer approved the change
- another user suggested a change to jbedard’s solution
- gkalpak approved the new changes
- suggested adding tests
- mgol a member of jQuery & AngularJS approved the changes
- jbedard merged commit 5728076 into angular:master
