Shivam ChhunejaIntroduction
The facebook/react repository, commonly known as React, is the undisputed heavyweight champ of JavaScript libraries for building user interfaces. With a massive fan base of contributors and relentless feature updates, it's like the Marvel Universe of front-end development---constantly evolving, and everyone wants to be a part of it.
Middleware Puts on Its Investigative Hat to Unravel React's Production Secrets
At Middleware, we're always on the lookout for the next big thing in efficient development practices. Naturally, the React repository had us curious:
How does this behemoth of a repository manage to roll out features and fixes so seamlessly?
How do they keep their deployments coming without breaking a sweat?
We decided it was time to dig deep into React's production metrics.
Using Middleware Open Source, we got down to business. And just like that moment in a detective movie when everything clicks, we started uncovering some fascinating details.
But before we spoil the plot, let's set the stage with some background on the tools and metrics we used to crack the case.
Background on Dora Metrics
Now that we've got you hooked, let's talk about the tools of the trade---Dora metrics. These aren't just any metrics; they're like the magic formula that separates the efficient teams from the rest. Here's what Dora metrics measure:
Deployment Frequency: How often you release code into production.
Lead Time for Changes: The time it takes from committing code to having it live in production.
Change Failure Rate: How often those changes lead to problems in production.
Time to Restore Service: How quickly you can fix things when they go wrong.
These metrics tell you if your development process is sleek and speedy or if it's drowning in the quicksand.
Spoiler alert: React's numbers didn't disappoint. But let's dive into the details.
Key Findings
What React Does Well: Quick Code Reviews and Merge Times
If React were a sports team, it would be winning gold medals in the 'Speedy Code Review' event. With cycle times that would make a Formula 1 pit crew proud, React might very well be the high-speed champion of open-source projects. Let's break it down:
Cycle Time: On average, React takes just 65 hours to go from PR open to merge. For the uninitiated, that's less than three days---basically quicker than deciding what to binge-watch next when you're very hungry and the meal is in right front of you.
First Response Time: React's team doesn't ghost you. They hit you with feedback within 15 hours. That's barely enough time to finish your favorite series or rewatch The Office (again).
Merge Time: Once feedback is in, it's an 11-hour sprint to merge. Talk about efficiency!
The graph illustrates the comparison between React's Cycle Times vs. Avg. PR Cycle Times. The "Avg." line represents the average time it takes across teams to complete the PR cycle (from opening to merging), while the "React" line demonstrates how React significantly outperforms the average by taking much less time to go through the process.
React's line being lower and flatter shows its consistently faster cycle, particularly in reducing the time it takes to respond and merge PRs, emphasizing its efficiency in comparison to the longer, slower process of the average.
React's winning formula?
Fast responses and quick merges keep the codebase fresh and the contributors happy.
Room for Improvement: When React's Code Review Times Go on a Wild Ride
Even superheroes have weaknesses, and for React, it's cycle time variance. Some features breeze through, while others crawl like a sloth trying to cross a national highway road.
-
Cycle Time Trend: The range of 35 to 121 hours suggests that some PRs move quickly while others drag on. However, this could be due to outliers---PRs that take an unusually long time to merge. By excluding these outliers, the cycle time would likely appear faster and more consistent.
(Another way to analyze this in depth would be to set up an IQR, removing outliers and edge cases for further analysis. )
Rework Time: The average rework time of 43 hours shows that revisions are common. Again, outliers could make this average seem higher than it actually is for most PRs. Filtering them out gives a clearer picture of the typical rework time.
Note: Our numbers are calculated after excluding outlier PRs. These outliers, such as a couple of PRs that remained open for several months, skewed the numbers heavily by themselves. By filtering them out, we present a more accurate representation of React's cycle and rework times.
Why the Variance? Well, it all comes down to three big culprits:
1. Big, Gnarly Features
Imagine trying to tame a beast of a feature that's sprawling across your codebase. These massive updates aren't just tricky; they require heaps of patience and elbow grease to get right. Tackling these can easily stretch out your cycle time because, let's face it, Rome wasn't built in a day, and neither is that complex feature overhaul.
2. Lengthy Testing and Reviews
Just when you thought you were done, the testing phase swoops in like that friend who won't leave the party. Thorough testing and reviews are crucial for maintaining quality, but they can feel endless. Every bug squashed and every line of code scrutinized adds precious hours---or even days---before your feature gets that coveted "merged" status.
3. Complex Updates That Make Your Brain Hurt
Sometimes, you hit a patch of code that feels like it was specifically designed to fry your brain. These complex updates can send you down a rabbit hole of revisions, rewrites, and "let's try this one more time" moments. The complexity can cause a roller-coaster of delays, adding to the variance in cycle times.
In short, when you mix big features, intense reviews, and brain-busting updates, it's no wonder that cycle times start looking more like a wild ride than a smooth sprint!
Nature of Work in React: The Balancing Act
React's to-do list isn't just your everyday checklist---it's more like a high-wire act, balancing between feature innovation and keeping the codebase squeaky clean. Here's a closer look at how the React team juggles their priorities:
Feature Work: The Big Leaps Forward
When React dives into feature work, it's all about pushing boundaries. We're talking about the shiny new features, major refactorings, and those enhancements that make developers go, "Wow!"
Contributors: The Busy Bees in the React Hive
The React repository is always buzzing with activity, thanks to its dedicated contributors. On any given month, you'll find 10-12 contributors hard at work, each bringing their expertise to the table.
These developers keep the wheels turning and the code flowing. It's a collaborative effort that ensures React remains at the cutting edge, with fresh ideas and continuous improvements pouring in from all corners of the globe.
Rework: The Relentless Pursuit of Perfection
If React had a motto, it might be, "Good enough isn't good enough." The team's commitment to quality often leads to rework---and while that might sound like a dirty word, it's actually a testament to their dedication.
Rework is all about making sure every line of code meets the high standards React is known for. Sure, it might contribute to longer cycle times, but in the end, it's also about delivering a product that's as rock-solid as it is innovative and not just speed. After all, who wants to ship code that's anything less than perfect? Right?
Impact on Project and Community
React's development process is a perfectly managed system in place that keeps the community engaged and the codebase solid. But with great power comes great responsibility---and that's where React's cycle time variance and rework time show there's room for improvement.
Perhaps a more structured review process (check out Middleware Playbook for a well-organized way to get things done and focus on strategic decisions) and thorough pre-PR testing could smooth out some of those bumps.
Takeaways
Swift Code Reviews: Quick feedback in PR reviews can be a game-changer. Just ask React---PRs like #30298 were in and out in a flash.
Rigor in Reviews: High rework time may sting a bit, but it ensures quality in the long run. PR #30132 shows that even the big boys need a little extra polish.
Balance Feature Work and Maintenance: It's all about balance. New features like [Fizz] and [Flight] are exciting, but bugs need squashing too.
Dora Score: 8/10
So, after putting React through its paces with our Open Source Dora Metrics toolkit, here's the juicy rundown: React scores a solid 8/10.
We're talking lightning-fast deployments with minimal "oh no" moments when things go live. But like any rockstar, React has its off days---especially when it comes to trimming cycle times and cutting down on rework.
The takeaway? Even the mighty React team can fine-tune their workflow for a bit more perfection. For those out of the loop, the Dora score is like the ultimate report card for dev teams, rating their balance of speed, stability, and quality.
Our deep dive into React, stacking it up against the top performer scores in Google's annual Dora report showed where it shines and where it could use some polish.
And if you're itching to see how your repo measures up---or want to turn your team into a lean, mean coding machine---Middleware's OSS can be your weapon of choice.
Conclusion: React's Repo: A Masterclass with a Few Bumps
React's development process is a masterclass in managing speed, quality, and community engagement. With its lightning-fast PR reviews and stringent code standards, React sets a high bar for open-source projects, demonstrating how to keep things moving swiftly while ensuring top-notch quality.
However, React's cycle time variance and occasional rework challenges remind us that no process is without its hiccups. Some features breeze through, while others face delays, and complex updates can turn into marathon tasks.
Here's a good thing: even the best can get better. By integrating structured reviews and advanced tools, you can refine your process and push your performance to new heights.
Also, if you're curious and want to discuss these case studies and more with fellow engineering leaders---jump into The Middle Out Community.
Trivia
Did you know: React was created by Jordan Walke, a software engineer at Meta, who initially developed a prototype called "F-Bolt" which was later renamed "FaxJS".
