Tomas Reimers Co-founder of Graphite; previously Facebook NY and Harvard. Passionate about dev velocity. Hobbyist photographer, runner, and writer.

Stay unblocked in code review and build products faster with stacking

3 min read 888

Stay unblocked in code review and build products faster with stacking

You just finished writing the new checkout flow for your shopping app, and now you need to add a promo codes feature. Promo codes are built on top of the checkout flow, but you realize you can’t build on top of the checkout flow because your first pull request hasn’t landed yet — it’s stuck in code review. In other words, you’re blocked.

What are you to do? You could:

  1. Work on something else: This isn’t awesome, you have the entire codebase for comments in your head right now, and moving to something else is just going to slow you down
  2. Bother your reviewer: Also not awesome, you’re just going to slow them down
  3. Fold it into the first PR: There’s nothing a developer likes to receive more than multi-thousand line code review

Or, you could stack.

Ready to learn more about stacking?

Jump ahead:

What is stacking?

Stacking is the best-kept secret of high-performing developers. The principle is simple: once you’ve finished writing a feature, you commit it to your feature branch, move it up the branch for review, and create a branch off of that feature branch.

Stacking diagram
Diagram credit: Xiulung Choy

Hold on, you’re saying — we always branch off of main. Why would I branch off of a feature branch?

The answer is fairly straightforward. Branching off of a feature branch allows you pick up your work where you left off. No need to wait for that feature to land, just branch and go.

Over at Graphite, we recently wrote about how to build Wordle using stacking. Here is a PR building all of Wordle all at once.

And here is a stack of eight that does the same thing:



As a reviewer, which of those two was easier to read? Which one are you likely to review faster? Which one do you think will get merged first? Let us know what you think in the comments section.

How to incorporate stacking into a team environment

Now, I’m sure you’re asking, will this confuse my teammates?

Good question! And no, this will not confuse your teammates. GitHub thankfully has basic inbuilt support for stacks.

Let’s say you have a stack going: main → checkout → promo_codes. To create that stack, you can create two pull requests on GitHub:

  • One merging branch promo_codes into checkout
  • One merging branch checkout into main

One branch merges into the branch below it in the stack, and as a result, GitHub will only show the diff between those two changes, allowing your reviewer to understand the stack in bite-sized pieces.

When you merge checkout into main, you’ll automatically re-target the second pull request to now merge into main.

Create a checkout flow for the app

Two things we’ve seen others do to help their teammates understand their stack:

      1. Many people title their pull requests with the position in the stack, i.e., “[1/8] PR title”, “[2/8] Another PR title”)
      2. Some especially helpful teammates leave links to the rest of their stack in their descriptions to help reviewers navigate the stack as they’re reviewing itLeave stacking descriptions in the comments sections

If this last bit sounds like a burden, this is where automated tooling can help, which we’ll discuss in a separate section.

Why don’t more people use stacking?

While GitHub’s code review tooling has basic support for stacking, it still isn’t as easy out of the box as it is with Phabricator or Gerrit, where stacking is common. Most people don’t stack because the local tooling for it isn’t great — in GitHub, if you need to edit the pull request at the base of a stack, rebasing the upstack ones can be a lot of work.


More great articles from LogRocket:


Fortunately, much of that work can be automated, and there are many tools that help manage that work. Before starting Graphite, we used git-town, ghstack, branchless, and others.

Graphite was a tool purpose-built to bring this workflow to GitHub. It syncs your stacks, adds comments to GitHub to help orient your reviewers, and you can start using it today, even if your coworkers on GitHub aren’t ready to change their workflows.

How do I stack in an existing project?

The usual workflow has you fold your code into the first PR. With stacking, you can break up your changes into multiple PRs, which allows you to:

  • Land each change separately
  • Run CI against it
  • Keep your reviewer’s workload light, leading to faster and more thorough reviews

Furthermore, you can get more and more granular about feature releases once you start breaking apart your changes. Our example checkout flow sounds like a complex feature — at the least, it could be split into multiple pull requests, one for the server changes and one for the client changes.

Conclusion

Regardless of what you use, if you want to be a faster developer, just start stacking.

: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

.
Tomas Reimers Co-founder of Graphite; previously Facebook NY and Harvard. Passionate about dev velocity. Hobbyist photographer, runner, and writer.

Leave a Reply