OJS developer experience: live preview / hot reload

[declann]

Description

Hi,

As a mainly JS developer using Quarto (and I love it!) I'm jealous of the developer experience available for Python/R in Quarto, Rstudio, and other tools supported by Posit - especially whenever iterating avoids full page reloads (I think this is a big part of why Notebooks and Rstudio are so popular).

In Quarto, the execution context for OJS is different versus Python/R: OJS runs in the browser, Python/R/Julia code runs in kernels (I think) that talk to Quarto during the render process. And OJS is functional and can add a tonne of value to outputs from Python/R or by itself.

But different execution contexts also means the developer experience for OJS is different.

Trying Rstudio, Positron, VSCode, I can't find any developer experience where it's possible to iterate on OJS in Quarto without full page reloads triggered by quarto preview. These are slow and break flow/context etc.

Observable Framework shows that "live previewing" of OJS is possible, and that the OJS runtime (which Quarto uses) is suitable to support a super fast iterative developer experience for OJS.

Currently, I iterate in Observable notebooks and migrate to Quarto when things are mostly ready - but this is really inefficient; and I especially run into trouble when my target is a Quarto page with significant different layout/features versus Observable notebooks (like a Quarto dashboard or a closeread).

Observable nailed OJS DX in Framework and Observable notebooks, and I'm not under an illusion that achieving the same quality DX is a trivial task. quarto preview would need at least a socket server to communicate updates, and just identifying the changes to push will be a bit of work. And that doesn't account for non-OJS cells especially markdown/text updates, or how other particular environments should adapt (environment-specific changes is an alternative approach).

Am I missing a way to iterate on OJS without full page reloads?
Am I missing other big challenges to do this?
Do Quarto users even want this? I suspect most are Python and R developers and don't encounter OJS DX except briefly - I'm probably unusual because I make most of my work in OJS.
Are there public developments for OJS DX such as hot reload being considered/planned? (in quarto preview or in environments)

Imo, Quarto and OJS are great and for those developers who turn to OJS, a neat and fast DX can help them to do new and interesting things. Obviously there is a lot of people (like me) who develop in OJS outside of Quarto too.

Cheers,
Declan

[mcanouil]

Quarto needs to render the whole document to make a preview (possibly triggered by the watch input default setting).

Computations needs to occur even before rendering so there are no ways around that.

Observable or any raw HTML contents are different but still needs to be transformed into the AST internally to then be transformed as HTML output.

I don't believe what you want here is even possible for Quarto/Pandoc.

[declann]

Ah. Thanks for the response. So you would need to fall back to a full page refresh for other updates, possibly including markdown, possibly including new OJS cell positioning, which does seem kinda poor. At the same time, it could still tighten OJS iteration loop (I know it would help me even if limited - but I would probably really want hot markdown updates, possibly I'd consider moving my markdown into OJS blocks too in this scenario).

OTOH looking strictly at the OJS parts...

In my HTML on OJS heavy pages (like this) I mainly see empty div containers.

The OJS runtime does a lot of heavy lifting already in the client side (necessarily).

Interesting basic requirements for OJS are already exposed. For instance on that page you can paste window._ojs.ojsConnector.mainModule.redefine("pinchiness_in", [], 0.4) (OJS runtime docs) into the console and OJS will alter the definition and reactively update (the slider will no longer work because the definition has changed)
Screencast from 2024-12-28 05-37-02.webm

[mcanouil]

Interesting basic requirements for OJS are already exposed. For instance on that page you can paste window._ojs.ojsConnector.mainModule.redefine("pinchiness_in", [], 0.4) (OJS runtime docs) into the console and OJS will alter the definition and reactively update (the slider will no longer work because the definition has changed)

Then you could be able to make a Quarto extension to allow live edition (note that it won't modify the source obviously).

[declann]

That seems like something it could be worthwhile I play with at some stage. Maybe I can begin by only doing hot reload for imported JS or imported OJS - that should help to know which changes to do a live reload or a full page reload for. The code in quarto-ojs-runtime.js seems to be well documented.

I think a blocker to deliver an extension however will be the preview server - the reload socket message is just "reload" when I update any file, so client code won't be able to conditionally reload without Quarto changes (extension spinning up a custom watcher is the only workaround I can think of)