WebR Filesystem Machinations & ReefR

It’s difficult to believe it has only been a couple of weeks since WebR has been around. But that might just be my perception. The spike protein invasion has significantly increased sedentary time, and that has enabled me to focus on this new toy to keep my attention focused on something positive. So, I’ve had “WebR on the mind” more than most others.

As folks likely know, I’m keeping a log of these “experiments” over at GH, and I’ve blogged, here, a bit on a few of them. (I promise I’ll get to Part 2 of “ggwebr”, soon.). Today we have an update on two of them.

WebR Filesystem Machinations

This WebR-powered page is pretty a pretty self-contained explanation of how to work with the Emscripten filesystem from both the javascript and R contexts of WebR. I set out to just do that, but I was also sick of writing HTML for everything, and spent some time coming up with a system for hacking on these experiments with Markdown.

Yes, I could just use the exciting new Quarto WebR extension and Quarto itself, but there are advantages to working in plain Markdown, HTML, and Vanilla JS blank canvas (Quarto-rendered HTML is a bit, er, crufty).

The code in this filesystem experiment is also a bit different in another way: it uses a Vanilla JS lightweight reactive framework called Reef.

It worked so well that I made a few more examples, which are covered in the remaining sections.

More Concise Example

The filesystem experiment is a tad big, especially since it introduces some fancy javascript things many R folks are not familiar with. That, combined with the cognitive load associated with learning WebR itself, meant I had to simplify things a bit if I wanted to convey the utility of this setup.

If you’re asking, “why not just use React?”, the answer is that React is overkill for the small projects I have in mind, and that I think many other folks who may want to use WebR also have in mind. I also don’t really like packers/bundlers. The early days of the web were fun and easy to work in, and I wanted to replicate that for WebR.

So, I made the sadly named webr-reef example. It’s a small app that:

• loads a list of all datasets in the datasets package and shoves it into a <select> list.
• when a dataset is selected, the str() output of it is displayed below the popup menu.

If you view index.md, you’ll see it’s just some light markdown and a couple bits of HTML for the:

• reactive #message <div> that will show anything we assign to it
• reactive #selected-dataset <select> list which will get automagically populated on load and, when changed, will cause the value of the next item in this list to change
• reactive #dataset-output which will hold a str() of the selected dataset.

The index.html file is really just a shell for opengraph tags plus an element to put this app into. main.js does all the work.

The source is fairly well-annotated, but it still was not simple enough IMO.

ReefR Template

Reef + WebR == ReefR

I wanted to make this super easy to read and start using quickly, so it’s ready-made to deploy to GH Pages. Just tell GHP to use / of the main branch, change a couple settings — like SW_URL — and it should “just work”. Here’s the GHP Link for the template repo, and here it is running on my site.

There are just two reactive components: the #message thing I mentioned earlier, and a <pre> block that gets filled with the value of the WebR WASM R version string, which is taken from executing code in the WebR context.

FIN

I’ll be iterating on ReefR to add some JS and R helpers folks can use to make it easier to work with WebR, so keep an eye on the experiments and template repo if this piques your interest. Also drop issues with ideas or questions.