Reactime just keeps getting better
Co-authored by Sergei Liubchenko, James McCollough and Mike Bednarz
Reactime is an open-source tool for debugging and time travel in React applications while in development. It is a Chrome Extension that allows developers to monitor, record, and conceptualize changes in their application via state snapshots. It provides detailed application performance monitoring by supplying metrics such as component render time and render frequency.
Why use Reactime?
Reactime simplifies development by allowing developers to see state changes in real time, time travel through different snapshots of state, and view performance metrics of their application. It is a handy, comprehensive tool for developers using React.
What’s new in Reactime 20?
In this release, we have improved the following features:
- Continued converting JavaScript to TypeScript throughout the codebase, making the code more robust and easier to maintain.
- Added more testing with React Testing Library and Jest, which will help catch bugs before they reach production.
- Made existing tests more robust and fixed broken testing environments to ensure that Reactime is working as expected.
- Improved Accessibility, making Reactime compliant with Web Content Accessibility Guidelines (WCAG).
- Removed deprecated dependencies that caused compilation errors and updated the corresponding functionality in Reactime.
- Resolved a bug that caused apps to throw errors when using Reactime while executing login functionality.
- Made the app more performant by removing unnecessary code and optimizing the existing code.
Resolved Bugs
Upon first opening Reactime, the Reactime 20 team encountered several major errors. We found that Reactime would not compile properly, which was ultimately related to some deprecated packages. We also discovered that using an application’s login functionality while using Reactime in the background would trigger an error, crashing the entire application. We resolved these bugs by removing deprecated code and transforming the snapshot data on the backend of Reactime.
Increased TypeScript Coverage
We have significantly increased conversion of Reactime’s JavaScript files to TypeScript. Our team worked extremely hard to make this happen. Implementing TypeScript has become standard practice in the industry, and maximizing TypeScript usage in Reactime brings some important benefits to the codebase: static typing, fewer bugs at runtime, and improved maintainability and readability, all of which makes Reactime a more robust codebase for future iterators.
Expanded Testing
Reactime now has 83% testing coverage, which helps ensure that the app performs as expected. Reaching this optimal level of testing in Reactime will ensure the app’s stability for future React developers and prevent new bugs from developing as the codebase grows, maintain code quality, and speed future development. In addition to new testing, we have also improved existing tests and fixed some broken test environments.
Improved Accessibility
Reactime is now more accessible than ever! We have updated many aspects of Reactime’s UI/UX. All fonts are now at least 12pt, which is a significant increase in size for much of the text in Reactime. All text and backgrounds have been updated to ensure the contrast ratio between the text and background is at least 4.5:1, consistent with WCAG. All color schemes have been altered to make the elements more visible to users with color blindness. As a result of these changes, Reactime is much more usable and visible for developers.
Download Reactime 20.0 on the Chrome Web Store!
