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
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
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
datasetspackage and shoves it into a
- 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:
<div>that will show anything we assign to it
<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
#dataset-outputwhich will hold a
str()of the selected dataset.
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.
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.
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.