Switch to client side templating for HTML output

[johnbillion]

The server-side generation of QM's HTML output leaves a lot to be desired. If the user doesn't interact with QM then all that rendering happens for nothing. When the output gets very large, the delay in generating the HTML becomes noticeable.

QM should switch to client side template rendering via Underscore templates. The rendering only needs to occur at the moment when the user clicks an item in QM's admin toolbar menu and the data can be populated with a JSON representation of the collected data.

I've decided on Underscore templates because it's bundled with WordPress and means it's the least likely to have problems with conflicts with other libraries.

This leads to several benefits, for example reusable templates that can be used outside of QM's included output mechanism. One example could be rendering of QM sessions stored elsewhere, playback of recent sessions, full or partial output for Ajax or REST API responses, server-side rendering of Underscore templates using Node, etc.

Having QM's data available as JSON on the page also opens up some interesting use cases. The data can be accessed via the browser's developer console, data could be sent off client side for logging somewhere else or used as part of analytics, and a headless browser could automatically collect performance stats as part of an automated performance budget monitoring tool.

First PR: #292
Current PR: #483

[johnbillion]

Latest PR: #483

[lkraav]

Heya @johnbillion hopefully all is well.

I'm looking to get something going for scripts and styles handle count totals output in a JSON structure for continous monitoring.

It seems #483 still has ways to go.

Is there a way to reach the above goal with current QM architecture, how would you recommend approaching it?