You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -94,11 +94,6 @@ If Reactime loses its connection to the tab you're monitoring, simply click the
94
94
<br>
95
95
<br>
96
96
97
-
<palign="center">
98
-
<imgsrc="./assets/gifs/ReconnectGif22.gif" />
99
-
</p>
100
-
<br>
101
-
102
97
### 🔹 Re-render Optimization
103
98
104
99
One of the most common issues that affects performance in React is unnecessary
@@ -167,15 +162,22 @@ of the structure and interfaces of the codebase.
167
162
168
163
<h1>What's New!</h1>
169
164
170
-
Reactime 22.0 heralds significant enhancements, addressing core performance issues and fortifying the overall application's stability and reliability. In our pursuit of consistent evolution, we've updated outdated packages and transitioned state management to Redux Toolkit. This strategic shift not only modernizes our tech stack but also ensures our application is positioned for easier maintenance and scalability in the future. Complementing these upgrades, this release also mends various bugs. The debut of features like the reconnection button, a status icon, and the integration of key web metrics – Cumulative Layout Shift (CLS) and Interaction To Next Paint (INP) – amplifies its functionality and offers users a more refined experience.
165
+
Reactime 23.0 brings a new look to the UI, completely updates all outdated packages, and significantly improves stability by solving loading bugs.
171
166
172
-
<i>Taking a deeper look</i>
167
+
UI
173
168
174
-
Addressing the persistent disconnection/black screen issues that occasionally affected users during regular application use, we made decisive improvements by removing the "keepAlive" function and implementing robust logic to fix the core issue. This enabled us to refine the communication protocol between our application and the Chrome extension API, delivering a more consistent and stable connection. To further enhance the user experience and foster resilience, we introduced a user-friendly reconnection feature. This not only offers users a swift recovery route but also acts as an added layer of protection against any unexpected disconnections in the future.
169
+
V23 showcases a sharp new theme to our extension’s UI. We also opted to completely overhaul the styling architecture to make it easier for future developers to change it to their liking.
175
170
176
-
In an effort to improve maintainability, scalability, and longevity, we updated and phased out certain dependencies. To name a few, we moved away from the Immer library and transitioned our state management to use Redux Toolkit, while upgrading the Web Vitals API from version 1.1.2 to 3.5.0, allowing us to harness a broader range of web metrics. As part of this transition, we also converted all of the existing tests to work with the updated state management system, while further expanding testing suites to increase overall testing coverage. Lastly, we achieved a notable increase in TypeScript coverage, strengthening code quality and early detection of potential development issues.
171
+
Dependencies
177
172
178
-
For an improved user experience, we set our sights on several impactful enhancements. First on our list is the reconnection feature, designed as a protective measure for those unexpected moments when a user gets disconnected. In such events, an intuitive pop-up dialog will instantly emerge, offering users a seamless way to dive right back into their session, while also offering the option to download recorded snapshots of state as a JSON file. Complementing this, we've integrated a dynamic status indicator that transparently displays a user's current app status, highlighting whether they're online or offline. But that's not all. We've enriched the application with two vital web performance metrics: Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP). These metrics are pivotal, providing developers with insights into layout stability and responsiveness, empowering them to optimize user interactions with precision.
173
+
As of Reactime v22, installing node modules required the use of npm --force due to numerous lingering peer dependency issues. 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 made Reactime much lighter and more future-proof.
174
+
175
+
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.
176
+
177
+
Loading stability
178
+
179
+
Reactime has experienced persistent issues with stably loading up. 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.
180
+
Beyond this, we have built out a road map of documentation with the goal of setting future Reactime developers on the fast track to further enhance the stability of Reactime’s launch and overall user experience.
179
181
180
182
If you would like to read more about previous releases, click <ahref="https://github.com/open-source-labs/reactime/releases">here!</a>
181
183
@@ -211,14 +213,16 @@ locally.
211
213
212
214
<i>Please refer to Developer Install for a detailed guide:</i>
213
215
214
-
Refer [DEVELOPER README](src/README.md) for more info on the project, and
216
+
Refer to the [DEVELOPER README](src/DEVELOPER_README.md) for more info on the project, and
215
217
instructions on building from source.
216
218
217
219
### <b>How to Use</b>
218
220
219
221
After installing the Chrome extension, just open up your project in the browser.
220
222
221
-
Then open up your Chrome DevTools and navigate to the Reactime panel.
223
+
Then right click on your application and choose the 'Reactime' context menu item to open up a Reactime panel.
224
+
225
+
Alternatively, you can open up your Chrome DevTools and navigate to the Reactime panel.
222
226
223
227
## <b>Troubleshooting</b>
224
228
@@ -240,7 +244,7 @@ clicking the right mouse button “Reload frame”.
240
244
### ❓ <b>I found a bug in Reactime</b>
241
245
242
246
Reactime is an open-source project, and we'd love to hear from you about
243
-
improving the user experience. Please read [DEVELOPER README](src/README.md),
247
+
improving the user experience. Please read [DEVELOPER README](src/DEVELOPER_README.md),
244
248
and create a pull request (or issue) to propose and collaborate on changes to Reactime.
245
249
246
250
### ❓ <b>Node version compatibility</b>
@@ -251,7 +255,7 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
-[Reactime renovation: Updates Coming in Version 23.0!](https://medium.com/@liam.donaher/reactime-renovation-updates-coming-in-version-23-0-37b2ef2a2771)
255
259
256
260
## <b>Authors</b>
257
261
@@ -351,6 +355,10 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
If ‘npm install –legacy-peer-deps’ doesn’t work, install dependencies using ‘npm install --force’
26
-
27
25
With release of Node v18.12.1 (LTS) on 11/4/22, the script has been updated to 'npm run dev' || 'npm run build' for backwards compatibility.<br/>
28
26
For version Node v16.16.0, please use script 'npm run devlegacy' || 'npm run buildlegacy'
29
27
@@ -56,6 +54,24 @@ _Before_ beginning development, especially on teams, make sure to configure your
56
54
57
55
Here are some notes on the current state of Reactime and considerations for future development.
58
56
57
+
## Address open issues on the main OSLabs Reactime Github
58
+
59
+
There are a variety of open issues on the [OSLabs Reactime Github](https://github.com/open-source-labs/reactime) that remain to be addressed.
60
+
61
+
## Main Slice Modularity
62
+
63
+
Currently, Reactime employs Redux Toolkit for state management. At present, all actions are housed within the mainSlice.ts file. As this file has expanded significantly, it would be beneficial to modularize it, creating separate slices for distinct components.
64
+
65
+
## Testing
66
+
67
+
With Reactime V23, as a result of updating all outdated packages and peer dependencies, the Jest testing framework has unresolved errors. This should be a pretty easy win for future iterators to bring the Jest library back up and running smoothly. The jest-environment-jsdom package has some deprecated sub-packages, so if there is an alternative that can be used, that would be best, so it does not introduce new deprecated packages.
68
+
69
+
In addition, while our current test coverage provides a sturdy base, the application can benefit from deeper exploration into critical user paths and broadening end-to-end testing scenarios. Embracing automation and periodic reviews can further ensure consistent quality and robustness in the face of evolving requirements.
70
+
71
+
## Continue to investigate app behavior on load
72
+
73
+
With Reactime V23, loading errors were eliminated by having the web app reload upon a Reactime panel being opened. While this provides a working solution to what were persistent loading issues, the app's behavior on load should still be examined. There are odd interactions happening within the message passing framework of chrome which may be a root cause. Please examine the interaction between background.js, contentscript, maincontainer, and redux toolkit.
74
+
59
75
## Including Support for Hooks Beyond useState
60
76
61
77
Reactime currently shows data stored via useState, but does not show data stored via other hooks such as useContext or useReducer. While showing this data would be simple, maintaining the time travel functionality of Reactime with these hooks would not. _Please see file demo-app/src/client/Components/ButtonsWithMoreHooks.jsx for more details._
@@ -71,11 +87,7 @@ To see how hook data is stored on the fiber tree:
71
87
72
88
Any changes to console.logs in Reactime can be seen by refreshing the browser the app is running in.
73
89
74
-
## Replace Functionality for Outdated Packages
75
-
76
-
Package dependencies need to be trimmed down, updated, and/or removed. Peer dependency errors are the reason npm install --force may be necessary when installing the dependencies of Reactime. While Reactime v22.0 has reduced package dependency errors for developers from multiple pages of errors down to ~15 errors, the goal is to decrease overall package/library dependency to a minimum to promote long-term maintainability
77
-
78
-
Material-ui/core has been updated to use React 18. Future developers may choose to remove Material-ui/core from the application to ensure compatibility in the future or continue to build out the UI. The choice is yours!
90
+
## React DevTools Global Hook
79
91
80
92
React Developer Tools has NOT deprecated \_\_REACT_DEVTOOLS_GLOBAL_HOOK\_\_. However, Reactime v21 has sleuthed and learned the following from the team at React:
81
93
@@ -90,13 +102,13 @@ Can Reactime functionality be extended so applications using Redux can track sta
90
102
91
103
Yes, but it would be very time-consuming and not the most feasible option while Redux devtools exists already. With how Redux devtools is currently set up, a developer is unable to use Redux devtools as a third-party user and integrate its functionality into their own application, as Redux devtools is meant to be used directly on an application using Redux for state-tracking purposes. Since the devtools do not appear to have a public API for integrated use in an application or it simply does not exist, Redux devtools would need to be rebuilt from the ground up and then integrated into Reactime, or built into Reactime directly still from scratch.
92
104
93
-
## Main Slice Modularity
105
+
## Newsletter functionality on the Reactime website
94
106
95
-
Currently, Reactime employs Redux Toolkit for state management. At present, all actions are housed within the mainSlice.ts file. As this file has expanded significantly, it would be beneficial to modularize it, creating separate slices for distinct components.
107
+
As noted in the [Reactime Webite Github](https://github.com/reactimetravel/reactime-website), a newsletter functionality would be nice but has not been implemented yet.
96
108
97
-
## Testing
109
+
## Optimize webpack bundle size in production mode
98
110
99
-
While our current test coverage provides a sturdy base, the application can benefit from deeper exploration into critical user paths and broadening end-to-end testing scenarios. Embracing automation and periodic reviews can further ensure consistent quality and robustness in the face of evolving requirements.
111
+
Currently, the webpack bundle size when running in production mode (through npm run build) is much larger than the recommended size. Implementing new rules, plugins, and/or uglification and minification strategies could help reduce the size.
100
112
101
113
# File Structure
102
114
@@ -106,12 +118,11 @@ In the _src_ folder, there are three directories we care about: _app_, _backend_
106
118
src/
107
119
├── app/ # Frontend code
108
120
│ ├── __tests__/ # React Testing Library
109
-
│ ├── actions/ # Redux action creators
110
121
│ ├── components/ # React components
111
-
│ ├── constants/ #
112
122
│ ├── containers/ # More React components
113
123
│ ├── slices/ # Redux Toolkit mechanism for updating state
114
124
│ ├── styles/ #
125
+
| ├── App.tsx
115
126
│ ├── FrontendTypes.ts # Library of typescript interfaces
116
127
│ ├── index.tsx # Starting point for root App component
117
128
│ ├── module.d.ts #
@@ -175,11 +186,11 @@ All the diagrams of data flows are available on [MIRO](https://miro.com/app/boar
175
186
176
187
The general flow of data is described in the following steps:
177
188
178
-
189
+
179
190
180
191
1. When the background bundle is loaded by the browser, it executes a script injection into the dom. (see section on _backend_). This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to send state data from the app to the content script every specified milliseconds (in our case, this interval is 70ms).
181
192
182
-
2. The content script (now contentScript.ts) always listens for messages being passed from the extension's target application. Upon receiving data from the target app, the content script will immediately forward this data to the background script which then updates an object called `tabsObj`. Each time `tabsObj` is updated, its latest version will be passed to Reactime, where it is processed for displaying to the user by the _app_ folder scripts.
193
+
2. The content script always listens for messages being passed from the extension's target application. Upon receiving data from the target app, the content script will immediately forward this data to the background script which then updates an object called `tabsObj`. Each time `tabsObj` is updated, its latest version will be passed to Reactime, where it is processed for displaying to the user by the _app_ folder scripts.
183
194
184
195
3. Likewise, when Reactime emits an action due to user interaction -- a "jump" request for example -- a message will be passed from Reactime via the background script to the content script. Then, the content script will pass a message to the target application containing a payload that represents the state the user wants the DOM to reflect or "jump" to.
185
196
- One important thing to note here is that this jump action must be dispatched in the target application (i.e. _backend_ land), because only there do we have direct access to the DOM.
@@ -262,8 +273,10 @@ Once you are ready for launch, follow these steps to simplify deployment to the
262
273
4. Update the Store Listing and that’s it! Click “Submit for review” and wait for the Chrome store to process your request
-[Reactime renovation: Updates Coming in Version 23.0!](https://medium.com/@liam.donaher/reactime-renovation-updates-coming-in-version-23-0-37b2ef2a2771)
0 commit comments