Reactime Renovation: Updates Coming in Version 23.0!
Co-authored by the Reactime v23 team: John Banks, Liam Donaher, David Moore, Jesse Rosengrant
Since its launch in 2013, React has been a dominant force in the front-end framework landscape. Offering users the ability to build customizable web components and adhering to a declarative programming paradigm, React is a powerful tool for web developers. Its ever-expanding ecosystem provides access to countless custom hooks and ensures that React will remain a popular framework for years to come.
Managing these components and hooks can be difficult. As applications grow in size and complexity, the need to track state changes and visualize one’s component architecture present developers with a challenge that cries out for a developer tool. Enter, Reactime!
Reactime is a lightweight chrome extension that sheds light on users’ React applications. With features that include a node diagram of React components, render-time analytics, state snapshots and time travel debugging, Reactime offers a suite of clear, actionable information that streamlines the development process.
Now in v23, Reactime has started the new year with some powerful upgrades and sleek design improvements. From robust launch stability to dynamically resizing node diagrams and a complete overhaul of the dependency packages, we are excited to share Reactime’s latest and greatest with all of you.
Ready! Steady! Launch!
No part of the user experience matters more than their first impression. The diversity, power, and agility of Reactime’s feature set has always blown us away, but we felt the launch experience needed a little TLC.
Our first step in tackling these loading inconsistencies was to thoroughly unpack Reactime’s inner workings. Tracking the flow of messages from our content script, our background service workers, the Redux state management and our extension’s backend allowed us to diagnose potential roadblocks as Reactime was spinning up. An exhaustive period of trial and error further deepened our understanding of the problem and ultimately led us towards our new and robustly stable launch experience.
Beyond this, we have built out a road map of documentation. The goal is to set future Reactime developers on the fast track to further enhance the stability of Reactime’s launch and overall user experience.
Is Reactime ready for the future? That depends…
Seasons change, and one Reactime version gives way to the next. One thing that seems to stick around are the tool’s dependency packages. As packages go through their own versioning processes, a project’s list of dependencies begins to look and feel like an increasingly complex and unbreakable knot. We have tackled this issue head-on in v23 of Reactime. We trimmed bulky packages that already served their purpose. We completely updated those that played a vital role in our extension’s current operation, and we fully resolved their conflicts with other dependencies. By downsizing from 124 to 70 packages, we have put Reactime in prime fighting shape.
This effort serves to bolster Reactime in two ways: First, updating packages like React Router and Webpack gives Reactime’s users access to the performance upgrades that come with modern versions. Additionally, we have future-proofed Reactime by leaving our dependencies at their latest versions. This effort gives future developers of the extension a head start in adding new features and expanding the power of existing ones.
VisX marks the spot
As web applications take on more and more React components, visualizing these as a diagram of nodes becomes an increasing challenge. While Reactime’s use of the the VisX framework offers a straightforward way of producing said diagrams, it used to squeeze and pack these maps into spaces that obscured legibility. By leveraging a simple collision-detection algorithm, Reactime v23 sheds new light on our busier diagrams, giving nodes their own space through a dynamic response to the target application’s component architecture.
Let’s step into the light!
We all love a fresh haircut, a new coat of paint on our car or, in Reactime v23’s case, a sharp new look and feel to our extension’s UI. Instead of updating our existing style aesthetic, we opted to completely overhaul the styling architecture for future developers’ ease of use.
At the start of this process, Reactime leveraged myriad control styles throughout the application. Sass variables, a MUI framework, and hard-coded CSS values abounded as we looked towards consolidating the manner of styling expression. The existing Sass architecture seemed an attractive solution here, so we chose to place all of our very stylish eggs in that basket. What remains, delivered in a single Sass file, is a one-stop color shop for referencing all colors used in the app.
As fond as we are of Reactime’s fresh color palette, we know that design trends change, and future Reactime devs will have their own aesthetic preferences. Hopefully this theme organization overhaul, as well as all the other v23 updates, will alleviate many headaches for future developers of the extension.
Developing for Reactime has been a thrilling process, filled with deep learning and exploration. We are excited to bring you Reactime v23, and hope to hear from you!
Try the extension on the Chrome Web Store!
Download / contribute to the open source repo on Github!
Meet the v23 Reactime Team:
John Banks | Github | LinkedIn
Liam Donaher | Github | LinkedIn
