An inside look at how React powers Grafana’s frontend
Grafana dashboards enable millions of users to visualize and analyze their data. And working behind the scenes of the widely used open source platform is React, a frontend JavaScript library for building user interfaces.
In this post — which was inspired by my recent presentation at React Summit 2023 in Amsterdam — we’ll explore why we chose to use React for Grafana, and the benefits and challenges we’ve seen along the way. We’ll also share how we are responding to those challenges in our new dashboard runtime, Scenes.
Story time: Why Grafana uses React
Grafana didn’t always use React. First, it used Angular, a framework for building web applications.
In 2018, the team came to a crossroads: either migrate from Angular 1 to Angular 2, or consider other options. Ultimately, the team decided to switch to React, as the effort was comparable to the Angular migration, and React offered a number of advantages we wanted to tap into. Today, we use React to power the entire frontend of Grafana, from dashboards to Explore and Grafana Alerting — and it’s provided three significant benefits.
- React’s ecosystem is immense. You know the common saying, “There’s an app for that”? React is like that — but instead, it’s “There’s a third-party library for that.” Access to this ecosystem has allowed us to ship features faster and reduce our technical debt. For example, we wanted to build a new panel type called canvas that allows users to create custom layouts and UIs. A third-party library called Moveable helped us out immensely, getting us to beta state months earlier than we otherwise would have.
- React’s performance has allowed us to scale. The built-in rendering optimizations, as well as class-based components’ shouldComponentUpdate and hooks’ dependency arrays, have made it easier for us to optimize our code’s performance and ultimately provide a great user experience.
- React is widely used. As Grafana is open source, being based on the most popular frontend library has helped facilitate community contributions to Grafana.
Challenges with React
However, Grafana Labs has also experienced some challenges with React, especially when it comes to state management.
Unlike Angular, React has never claimed to be a framework, so the question of how to manage complex app state while using React has long been open-ended. Before context, there was Redux, and before Redux, there was the good-old unidirectional passing of props.
What has Grafana’s approach been to this? To use a mixture of them all — Redux, RxJS, props, and context. As Grafana matures, it is yet to be seen if this approach is sustainable. In general, we feel that a team should use the state management tool that best fits their problem space.
The ambiguity of which solution to use is a classic problem for versatile, open source libraries and platforms. Grafana itself has a big tent philosophy, supporting as much of the observability ecosystem as possible. This provides our users with a huge amount of flexibility in visualizing their data, no matter the source — a Kubernetes cluster, Raspberry Pi, different cloud services, or even Google Sheets. At the same time, this can lead to confusion when end users try to construct the best observability solution for themselves.
Another challenge we have faced with React is with its hooks paradigm.
Some at Grafana Labs have expressed frustration with hooks because they introduce stale closures and require learning and mastering hook rules. Functional components, as they are called, are rarely pure functions.
Hooks also introduce a much stronger coupling with the React runtime than before. The name “hook” indicates this; you are hooking into React internals, so you need to understand those internals. Hooks are far from being a functional abstraction, as you need to know the internal details of their implementation. (This becomes even more apparent when you try to test one hook in isolation.) React has followed a functional programming paradigm, and with the introduction of hooks, it might be straying from that paradigm and entering into framework land.
Despite some concerns, hooks have been a powerful tool for our developers. As with any tool, there may be a learning curve, but once mastered, they can greatly enhance the development process. At Grafana Labs, we recognize the importance of exploring and experimenting with new tools and methodologies to continually improve our development process. We appreciate how hooks have benefited our development workflow and continue to explore new ways to enhance our tools and processes.
New dashboard runtime: Grafana Scenes
With that being said, at GrafanaCON 2023 we released Grafana 10, which includes our approach to building our next-generation dashboard runtime library: Scenes. This approach simplifies the development process and reduces the learning curve for our developers.
In the Scenes library, each component subscribes to state built with RxJS, renders markup, and pipes callbacks back to the state model. Scenes does not replace React, but it eliminates the need to use complex hook paradigms, such as useEffect and useCallback, facilitating cleaner code and improved separation of concerns. The state model takes care of any necessary mount effects, making the development process more intuitive and efficient.
We are confident that our new library will be a game-changer for our developers, and we believe this simplified approach will lead to a more positive development experience. Although the library is still in its early stages of development, we are excited to see how it will continue to evolve and improve the way we build our dashboards.
To learn more about Grafana Scenes, our new dashboard runtime library, check out this on-demand session from our recent GrafanaCON 2023 conference.
Conclusion
Despite our challenges, React is a powerful tool to implement and maintain complex frontends. React’s versatility is key, and with it, there is freedom to consider a myriad of state management options and pick whichever makes the most sense.
Moving forward, it’s important to recognize that as an open source community, we have options. When a tool stops solving the problem we deploy it for, we can revisit the issue and see what needs improvement. But for now, we are happy with our decision to switch to React and will continue to use it as long as it makes sense for our use case.
Grafana Cloud is the easiest way to get started with metrics, logs, traces, and dashboards. We recently added new features to our generous forever-free tier, including access to all Enterprise plugins for three users. Plus there are plans for every use case. Sign up for free today!
