Accelerate
Troubleshoot
Observe
In this post we explain why you may want to use Develocity to boost your React and JavaScript build and how to do it. But, first let’s provide some context
The Challenge of the Polyglot Enterprise
The software landscape is fragmented and specialized and will continue to remain so. Developers have their own beloved tools for development, builds, testing, and so on. Often referred to as a tyranny of choice, this fragmentation is becoming increasingly intentional, especially among the ever-blooming open source development landscape.
Fighting this trend is more often than not a boondoggle for organizations, and ultimately, standardization can even lead to anti-patterns. Realizing this, how can you promote developer productivity in your company if you have the common pattern of a polyglot build system environment? Our own Develocity Front End team has implemented both the practice and toolchain, and have seen impressive results:
-
- 431 builds per week
- 23.46 minutes saved per build
- Serial execution factor: 3.3
- 7.1 wall clock minutes saved per build
- 3,064 minutes saved per week (7.1 minutes x 431 builds)
- 102 days saved/year
These results are typical. Your colleagues who are using Develocity with Java are seeing 80-90% build time improvements, efficiently troubleshooting problems using the free or Develocity Build Scan™ service (e.g., effortlessly comparing builds with the Build Comparison function), and making decisions based on performance and failure analytic data. Building with JavaScript and derived platforms like Node and React, what can you incorporate from Develocity today to realize these kinds of productivity improvements?
Using Develocity to Improve the Speed and Reliability of Webpack builds
To improve developer productivity in JavaScript build environments, our Develocity front-end team uses React and Node.js with Webpack to build the UI of the Develocity product.
The team wraps Gradle build scripts around their Webpack-driven CI builds to track the performance in the Develocity dashboards, and they use the Gradle Node plugin to wrap Webpack, Jest, ESLint and others.
Beyond the immediate performance gains the team realizes through caching build commands, a great deal of friction has been removed from the debugging and troubleshooting process by using the Develocity Build Scan™ service. With a flexible and shareable console log, our engineers can collaborate quickly on failures and significantly reduce their time to resolution.
The Build Failures Analytics dashboard has enabled more effective toolchain failure tracking across front end and back end development teams, allowing them to proactively identify negative trends and correct them quickly. By placing a focused effort in this area, developers do not have to report individual failures, nor do they have to stay vigilant over the build process. That’s taken care of by our own productivity engineers using the aggregated failure data presented in the dashboard, though not all businesses will need to build dedicated productivity engineering teams to realize these benefits.
The Trends & Insights view has helped our productivity engineering team track build performance and how well the cache is working, which is essential in ensuring that performance regressions do not creep back in as the codebase grows. Again, developers do not have to think about this, they can focus on their craft and rely on a speedy and consistent build process.
Conclusion
Clearly, polyglot teams can benefit from centralizing build data and metrics into Develocity. The flexibility of the Gradle build scripts makes it easy to wrap compile processes from other languages into the build, allowing this data to be captured and viewed alongside other parts of the full build. Having essential build details available through the Build Scan™ can be the difference between troubleshooting that takes seconds and troubleshooting that takes days. Our own Develocity UI engineers experience significant productivity gains by using Develocity for their Webpack-driven JavaScript builds, a use case we are seeing more and more of, and that demonstrates the real value of investing in an encompassing DPE strategy.