Skip to content

Commit 1a2bded

Browse files
authored
Merge pull request #294 from oslabs-beta/master
Updated readme
2 parents 005802d + 1b1b48e commit 1a2bded

File tree

4 files changed

+15
-5
lines changed

4 files changed

+15
-5
lines changed

README.md

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,21 +43,27 @@
4343
<a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.io">Website</a> • <a href="#read-more">Read More</a>
4444
</p>
4545

46-
<b>Reactime 15.0</b> adds a new visualization, allowing users to zone in on individual components of a specific snapshot. Additionally, a number of bug fixes have been implemented.
46+
<b>Reactime 16.0</b> presents the codebase with substancial, much-needed clean-up. From the backend and frontend to testing, the Reactime XVI team has: removed vestigial code, added comments to clarify code, implemented 100% testing coverage for the codebase, compartmentalized and modularized files, and implemented typescript.
4747

48-
Currently, Reactime supports React apps (now including React Router apps) using stateful components and Hooks, with beta support for Recoil and Context API and frameworks like Gatsby and Next.js.
48+
The primary purpose of this update is to allow easier understanding of Reactime's codebase by individuals or groups wishing to further update Reactime, keeping this great developer tool alive.
4949

50-
Previously, <b>Reactime 14.0</b> added the exciting features below:
50+
Previously, <b>Reactime 14.0 and 15.0</b> added the exciting features below:
5151

5252
I. React Router Compatibility <br>
5353
Reactime is now compatible with React Router applications! Prior to Reactime 14.0, recording state snapshots as the user navigated across various routes was possible, but time travel debugging was only possible for the current route (i.e. jumping back to a prior state at a different route was not possible). In order to streamline debugging of applications with multiple routes, Reactime 14.0 added functionality that allows the user to time-travel back to different routes, including live updating in the browser to reflect the state of their application at that previously visited route.
5454

5555
II. Classifying State Snapshots by Route <br>
5656
The list of state snapshots in the Reactime dashboard is now classified by route to give the developer visual cues of the snapshot-route relationship and make time travel debugging of various routes easier.
5757

58-
III. Filtering Performance Metrics by Route <br>
58+
III. Filtering Performance Metrics By Route <br>
5959
The Reactime dashboard includes a stacked bar graph showing render times for each component, with a separate bar stack for each snapshot. With Reactime 14.0, this composite bar graph can now be filtered by route to allow the developer to review detailed performance data by route.
6060

61+
IV. Visualize And Compare Components Within a Snapshot <br>
62+
Users not only have access to multiple snapshots, but can now zone into a specified snapshot more granularly through a new visualization consisting of its individual components. These new graphs are rendered directly in the same Performance tab in Reactime and provide details for each component when the user hovers over, providing a new visual comparison of components across a single chosen state.
63+
64+
<p align="center">
65+
<img src="./assets/snapshot-comparison.gif" />
66+
6167
After installing Reactime, you can test its functionalities with your React application in development mode.
6268

6369
Please note, the time jumping feature will <b>ONLY</b> work when your application is running in <b>development mode</b>. In production mode, you are able to view your application’s component map but no additional features.
@@ -179,6 +185,10 @@ After cloning this repository, developers can simply run `npm run docs` at the r
179185
- Declarative titles in the actions sidebar
180186
- Interative Tutorial Walkthrough
181187
- Toggle feature allowing temporary pause of state monitoring
188+
- Updated frontend diagram:
189+
190+
<p align="center">
191+
<img src="./assets/frontend-diagram.png" />
182192

183193
### <b>Bug Fixes</b>
184194

assets/frontend-diagram.png

88 KB
Loading

assets/snapshot-comparison.gif

1.14 MB
Loading

src/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ src/
4949

5050
1. The *app* folder is responsible for the Single Page Application that you see when you open the chrome dev tools under the Reactime tab.
5151

52-
![FRONTEND DATA FLOW](../assets/frontend.png)
52+
![FRONTEND DATA FLOW](../assets/frontend-diagram.png)
5353

5454
2. The *backend* folder contains the set of all scripts that we inject into our "target" application via `background.js`
5555
- In Reactime, its main role is to generate data and handle time-jump requests from the background script in our *extension* folder.

0 commit comments

Comments
 (0)