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

WIP: Implement client side rendering #483

Draft
wants to merge 26 commits into
base: develop
from

Conversation

@johnbillion
Copy link
Owner

johnbillion commented Nov 7, 2019

This starts us down the path of switching over Query Monitor's output to client-side rendered React components.

This has numerous benefits including:

  • Better performance (no need to render a big pile of HTML)
  • Allowing for state to be swapped out in order to show data for requests other than the current page load (eg. Ajax, REST API, redirects, and historical requests)
  • Panels which can be reused outside of the context of WordPress
  • Data accessible elsewhere in the client, eg in the developer tools panel

There's still lots to do, but the concept has been proven.

See #291.

Progress

  • Proof of concept
  • Functional
  • Quality
  • Functionally complete
  • Shiny and ready to go

Aims

  • Feature parity with all existing panels.
  • JSON data payload to hydrate the client-side panels. Remove unnecessary properties as we go.
  • Retain support for server-side rendered panels so add-ons for QM and Debug Bar continue to work.
  • Partial client-side rendering. The main panel container and its menu tabs will remain server-side rendered for the time being. Individual panel contents will be converted to client-side rendering.
  • Retain and continuously improve the existing server-side panel rendering until all client-side panels are at completion.

Considerations

  • Bundling for WP backwards compatibility. wp.i18n isn't bundled with WP prior to 5.0.
  • Bundling in general. Should React be bundled or should core's be used?
  • ...

Per-panel Tasks

The existing collectors and outputters in QM are very well separated, but nevertheless as each panel is worked on the following actions may need to be made:

  • Move logic out of the HTML outputter and into the corresponding collector.
  • Move translatable strings out of the collector and into the corresponding HTML outputter and React component.

Panel Progress

  • overview
  • admin
  • assets_scripts
  • assets_styles
  • block_editor
  • caps
  • conditionals
  • db_callers
  • db_components
  • db_dupes
  • db_queries
  • environment
  • headers
  • hooks
  • http
  • languages
  • logger
  • php_errors
  • request
  • theme
  • timing
  • transients
  • Hooks in Use panels
  • Settings panel

UI Component Progress

  • Toggles
  • Filter dropdowns
  • Filter links
  • Table sorters
  • Clickable stack traces
  • Table footers

Nope

The following panels will remain server-side rendered:

  • debug_bar
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.