A web front-end for Reported.
Install Node and Yarn, then run the following:
git clone https://github.com/josephfrazier/Reported-Web reported-web
cd reported-web
yarn
cp .env.example .envIn one session, load variables from .env into your environment, then:
yarn mongo-start
yarn parseIn another session:
yarn startMiscellaneous commands:
yarn dashboard # Runs a dashboard for the Parse server
yarn mongo-stop # Stops MongoDBContext on localStorage use (w.r.t performance concerns about lag/delay/slowness/latency when typing)
Over the years, reports of slow typing have come from multiple users, and it periodically gets (re)discussed in our Slack. Since our Slack currently doesn't preserve old messages, I often find myself re-investigating the issue and re-typing previous responses. This section is meant to provide more central and permanent documentation of these investigations.
For example: here's one of my posts from a conversation from July 2023 where this came up: https://reportedcab.slack.com/archives/C9VNM3DL4/p1690221553212389?thread_ts=1690137347.880569&cid=C9VNM3DL4
hey y'all, "happy" to see it's not just Rich Mintz and Justin with this issue, that makes it easier to investigate. As @Justin found, this does seem to have to do with the webapp's use of localStorage to save the form's state locally.
The original intent of this change was to make it so that fields like your username/password and violation type would be saved across sessions, so that you don't have to log back in every time you open the website. However, it sounds like this may be storing more data than intended, possibly the "Previous Submissions" section as Rich mentioned.
I'm hesitant to remove the use of localStorage entirely, as that could cause other issues like one that was previously reported when I tried to stop using localStorage as much, and led to it being reintroduced:
Not sure if this is an app problem or a me and my phone problem, but when I am starting a report, then leave the tab or browser before I finish, it makes me start all over from the login screen when I come back
If the latency issues are indeed related to the number of previous submissions made, then hopefully I can make it so that those aren't part of the saved state, and speed things back up for our power users, without losing the upsides of keeping saved state across webapp loads.
Hmm, looking into the localStorage usage, I currently only see the following fields being saved (specifically, not Previous Submissions), when I run
Object.keys(JSON.parse(localStorage.Function)):[ "email", "password", "FirstName", "LastName", "Phone", "testify", "plate", "licenseState", "typeofcomplaint", "reportDescription", "can_be_shared_publicly", "latitude", "longitude", "coordsAreInNyc", "formatted_address", "CreateDate", "isAlprEnabled", "isReverseGeocodingEnabled", "isUserInfoOpen", "isMapOpen" ]And the saved data is only 597 characters long, according to
localStorage.Function.lengthSeth, Rich Mintz, Justin, and anyone else affected by this issue, could you run the above commands in your JS console, or find another way to tell me how big the
localStorageusage of the webapp is?If clearing localStorage speeds things up for you, that makes me wonder if some browsers implement it in a way that gets slower over time, even though I believe the code overwrites any previously stored data, rather than appending to a list of "previous form states" or anything like that
Responses from Justin:
(20) ['email', 'password', 'FirstName', 'LastName', 'Phone', 'testify', 'plate', 'licenseState', 'typeofcomplaint', 'reportDescription', 'can_be_shared_publicly', 'latitude', 'longitude', 'coordsAreInNyc', 'formatted_address', 'CreateDate', 'isAlprEnabled', 'isReverseGeocodingEnabled', 'isUserInfoOpen', 'isMapOpen']
The issue reappears shortly after clearing the local storage. Can it just be caused by hammering the save every 500ms? Or maybe the debounce is broken and its saving more often?
as a test, after clearing local storage
- login
- type something in the description box
- refresh
- typing in description box is now laggy
More debugging info from https://reportedcab.slack.com/archives/C9VNM3DL4/p1690233028016149?thread_ts=1690137347.880569&cid=C9VNM3DL4:
My next step might be to add some profiling in to make it clearer how long each save is taking
TL;DR: I've made some good progress finding the source of the issue
back on the code that uses localStorage, I'm doing some debugging locally on my MacOS desktop, and I am able to reproduce the issue by typing quickly and seeing the letters not instantly appear!
I tried removing just the auto-save behavior while keeping the other localStorage usage (mainly, loading the username/password/etc when the app is first loaded, but that doesn't fix the problem.
However, if I go on to remove the localStorage usage entirely, the problem goes away for me, so it seems like the problem is indeed in the localStorage code, but not necessarily the auto-saving part of it.
back to the debugging, I tried adding a bunch of logging to the React component that uses localstorage, to see if it was being called even without the auto-saving behavior in the webapp, but I don't see any extra logs in the console when typing in the description field, so now I'm thinking that something about the component itself being present in the React component tree is causing the slowness
We've managed to work around the problem by not loading Previous Submissions until clicked on, see https://reportedcab.slack.com/archives/C9VNM3DL4/p1690318259649319?thread_ts=1690137347.880569&cid=C9VNM3DL4:
ok, it's definitely related to the presence of the Previous Submissions section, as I've found by removing it and seeing performance go back to normal: https://github.com/josephfrazier/reported-web/commit/884365086c56d8af001290eebda9c644a58a0ee5
Interesting! Does it vary with number of previous submissions? Could explain why it’s gotten worse for me over time
yeah, I think it must. Still don't know why it affects the performance of saving the state, but I can make it so that the Previous Submissions don't load until you expand the section, which works around the problem for me in that I can type quickly as long as I don't expand that section, but it's still available to me if I want it
This project is based on React Starter Kit. See its README below:
React Starter Kit README
React Starter Kit — "isomorphic" web app boilerplate 
React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.
See getting started guide, demo,
docs,
roadmap |
Join #react-starter-kit chat room on Gitter |
Visit our sponsors:
- Follow the getting started guide to download and run the project (Node.js >= 6.9)
- Check the code recipes used in this boilerplate, or share yours
The master branch of React Starter Kit doesn't include a Flux implementation or any other
advanced integrations. Nevertheless, we have some integrations available to you in feature
branches that you can use either as a reference or merge into your project:
- feature/redux (PR)
— isomorphic Redux by Pavel Lang
(see how to integrate Redux) (based on
master) - feature/apollo (PR)
— isomorphic Apollo Client by Pavel Lang
(see Tracking PR #1147) (based on
feature/redux) - feature/react-intl (PR)
— isomorphic Redux and React Intl by Pavel Lang
(see how to integrate React Intl) (based on
feature/apollo) - feature/apollo-pure (PR)
— bare Apollo codebase by piglovesyou (based on
master)
You can see status of most reasonable merge combination as PRs labeled as TRACKING
If you think that any of these features should be on master, or vice versa, some features should
removed from the master branch, please let us know.
We love your feedback!
|
React Starter Kit 
|
React Static Boilerplate 
|
ASP.NET Core Starter Kit 
|
|
|---|---|---|---|
| App type | Isomorphic (universal) | Single-page application | Single-page application |
| Frontend | |||
| Language | JavaScript (ES2015+, JSX) | JavaScript (ES2015+, JSX) | JavaScript (ES2015+, JSX) |
| Libraries | React, History, Universal Router | React, History, Redux | React, History, Redux |
| Routes | Imperative (functional) | Declarative | Declarative, cross-stack |
| Backend | |||
| Language | JavaScript (ES2015+, JSX) | n/a | C#, F# |
| Libraries |
Node.js,
Express,
Sequelize, GraphQL |
n/a |
ASP.NET Core,
EF Core, ASP.NET Identity |
| SSR | Yes | n/a | n/a |
| Data API | GraphQL | n/a | Web API |
♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.
- Getting Started with React.js
- Getting Started with GraphQL and Relay
- React.js Questions on StackOverflow
- React.js Discussion Board
- Flux Architecture for Building User Interfaces
- Enzyme — JavaScript Testing utilities for React
- Flow — A static type checker for JavaScript
- The Future of React
- Learn ES6, ES6 Features
- GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
- Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
- Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries
- #react-starter-kit on Stack Overflow — Questions and answers
- #react-starter-kit on Gitter — Watch announcements, share ideas and feedback
- GitHub issues, or Scrum board — File issues, send feature requests
- appear.in/react — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
- @koistya on Codementor, or Skype — Private consulting
Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.
Made with ♥ by Konstantin Tarkus (@koistya) and contributors