Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Review use of Vue #107

Closed
jpmckinney opened this issue Jan 18, 2023 · 2 comments
Closed

Review use of Vue #107

jpmckinney opened this issue Jan 18, 2023 · 2 comments
Labels
Milestone

Comments

@jpmckinney
Copy link
Member

jpmckinney commented Jan 18, 2023

Vue seems to have bugs that are difficult to resolve:

  • Eliminates whitespaces, requiring  . Some components seem to preserve whitespace; others don't. Fix whitespace removal #106
  • Makes it challenging to respect browser behavior (e.g. cmd-click to open link in new tab). In listings, the @click on the div can be removed, and a b-link with :to can be added, but this also reduces the size of the target from the full row to the text. It's possible that switching to b-table instead of divs and using row-clicked is the correct solution. We might also just add some non-Vue JS like in the data-registry to add a larger clickable. Previously, Datlab had overridden the context menu (!), but this means the browser's context menu is inaccessible. Allow Ctrl-Click / Cmd-Click to work to open new tabs on table rows #105

Also, the way Vue is implemented...

  • It sends multiple HTTP requests per page. Whatever gains were made by not reloading the full page are lost by making additional requests. Only on the overview page, and mostly to pre-load the next pages.
  • There is a ton of repeated CSS across components. While component-specific CSS is meant to reduce payload, the implementation ends up increasing it. We can tidy this up.
  • Hyperlinks are often missing. I fixed those on the landing page Hyperlinks need to be visible to users #35, but this should be corrected in all tables. However, this runs into the challenges in the second bullet above.

It also has some weird things that are officially documented, like how disabled b-links look the same as regular links, and additional CSS is required to fix it.

Off the top of my head, the only real needs for JS are:

  • Sample display (and pretty JSON)
  • Export modals
  • Filter modals
  • Charts (vue-google-charts)
  • Copy to clipboard

If we remove Vue (not a small task), we might not need much of an API, and therefore resolve:

Besides #105 and #106 above, we can also skip:

#104 also becomes easier, as we just use Django's translation framework.

@jpmckinney
Copy link
Member Author

After closing and progressing some of the above issues, Vue is worth keeping despite some rough edges (in v2 at least).

@jpmckinney
Copy link
Member Author

jpmckinney commented Apr 24, 2024

Another note: the JSON API is actually quite simple and well designed (especially after the #74 refactor), unlike some other SPAs, where the JSON API is a mess with no design other than "the frontend needs this data".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant