oslabs-beta / smorejs

SmoreJS ·

SmoreJS

State Management Optimization for Recoil

SmoreJS is an Electron based GUI that provides a testing environment for applications using Recoil. When a user's application is loaded, Smore displays the application and its initial state. Upon clicking the update button, users will be able to see an interactive component tree that visualizes component relationships and subscriptions to atoms and selectors. When the state from the user's application change, Smore updates the component tree to reflect the change by highlighting the node of the component that updated. Users are also able to see all the state data from their application. Smore will log the differences between each render and the user can store and save this data in a database. Smore facilitates the optimization of users' applications by allowing the users to visualize the changes in state in Recoil atoms and selectors for an easier debugging process.

---

SmoreJS was built in a Node.js environment with an Electron shell. It is primarily written in TypeScript and uses Facebook's experimental Recoil library for state management.

Installation

To test your application with SmoreJS:

Clone this repository to your machine.

 git clone https://github.com/oslabs-beta/SmoreJS.git

Install all dependencies.

npm install

Run the application to be tested

Next run the SmoreJS app. Go to the SmoreJS directory in your terminal and run

npm run dev:react

then open another terminal the SmoreJS directory and run

npm run dev:electron

When Electron opens on your machine, create a login.

Once you get to the application screen enter the localhost url where your app is running. For example http:localhost:3000

How to Analyze your apps state

Electron Shell The user enters and loads the URL of their Recoil application and clicks update.

Component Tree

Upon clicking update, Smore will display an interactive component tree that shows component parent, sibling, and child relationships. The component tree also highlights which component has been updated in the most recent update. There are also atom and selector dropdown menus in which users can click specific atoms and selectors and the component that is subscribed to that atom or selector will change color.

State Data Display

In this display you can see an in depth view into the application's state. You can see your application's components and the atoms or selectors that they are subscribed. You can see how many times a component has rendered and the values of the current state.

Users' Log

Users are also able to see logs of their state data, which include the version number of the render and differences in state values. They are also able to save these logs into a database.

License

Distributed under the MIT License. See LICENSE for more information.

@Medium @SmoreJS

The Engineers

🔥 Brian Liang - @GitHub - @LinkedIn

🔥 Eileen Lee - @GitHub - @LinkedIn

🔥 Will Ramirez - @GitHub - @LinkedIn

🔥 Phillip Sturgeon - @GitHub - @LinkedIn