Dynamic Interactions: webR to Empower Educators & Researchers with Interactive Quarto Docs
Presented by James Balamuta Full talk title: Dynamic Interactions: Empowering Educators and Researchers with Interactive Quarto Documents Using webR Traditional Quarto documents often lack interactivity, limiting the ability of students and researchers to fully explore and engage with the presented topic. In this talk, we propose a novel approach that utilizes webR, a WebAssembly-powered version of R, to seamlessly embed R code directly within the browser without the need for a server. We demonstrate how this approach can transform static Quarto documents into dynamic examples by leveraging webR's capabilities through standard Quarto code cells, enabling real-time execution of R code and dynamic display of results. Our approach empowers educators and researchers alike to harness the power of interactivity and reproducibility for enhanced learning and research experiences. Presented at Posit Conference, between Sept 19-20 2023, Learn more at posit.co/conference. -------------------------- Talk Track: Quarto (1). Session Code: TALK-1073
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
All right, well, thank you guys so much for having me. Hello, from sunny California. I'm really excited to be able to come and talk with you remotely about some work that happened regarding dynamic interactions.
So we're basically taking Quarto documents that you know and love, and that you saw a lot of really great features get developed for, and we're allowing them to become a lot more interactive using WebR.
So before we begin, though, a few quick things. There's a lot of thank yous that go out. First to the core developers of WebR itself. So George and Lionel have been absolutely great. The second part is thank you so much to the testers. So L.A. Holmes and Bob Rudis gave some really great feedback before the extension was released. And then in terms of contributors, we've had Joe Yun, or Joe Young, apologies in advance, work on some accessibility. And then thank you again to the entire Quarto team, not only for the product, but for answering my questions and GitHub issues and discussion forum posts.
With that in mind, a lot of the talk is going to sort of focus here on the main motivation for why dynamic documents are really great. And that sort of goes with this entire notion of setting up an R environment, and it's not really fun. It will then sort of move towards looking at the different technologies that will allow this environment set up to be a lot easier and sort of create every day as like a day one kind of experience for students. And then we're going to sort of pivot more to how this can be used inside of education, so how you can inform your teaching. And we'll also talk just a little, just a super small amount on how you can actually use WebR within a research setting.
The environment setup problem
So that being said, let's talk a little bit about our environment setup. And the motivating case here was the course that I got a chance to design almost 10 years ago now, called Stat 385 at the University of Illinois. Back in the day, I sort of thought students would have access to a computer in which they can install software. It seemed like a very reasonable expectation. And then the computing paradigm changed. We had tablets enter the market, and we had Chromebooks enter the market.
So we had all of these systems that sort of required web-based interfaces to sort of have students actually experience material. If we take a traditional student that has a laptop, there's usually three steps that the student has to do before the first day of class. The first one is they have to be able to pick out their operating system. So Windows, Mac, or Linux. The second part is they have to follow the appropriate R installation recipe. And then the third, of course, is to install RStudio.
So these three together, it's not that bad, maybe. But when you start to add in other parts, like if you need developer tools, so if you're having students explore compiled code, well, then that opens an entire new level of difficulties as well. So R tools itself is notorious for changing the installer. And on Mac, well, there's more of a community-run installer effort where the compile toolchain can easily be set up.
So students usually at this point are asking, well, why can't I just go to an app store and just press the install button? Why do I have to go through an installer? So it's one of these real sticking points when you're trying to start up a course.
So the day one class, as a result, sort of goes a little bit like this. First, you have that wonderful student that says, how do we install R in RStudio? So they didn't get your email, or they didn't have a chance to install it. The second student, when they try and run your code, well, they say it doesn't work. This could be because they didn't update R, they didn't update RStudio, or they didn't put the script in the right spot. Another student could just even be using a company computer, right? So they don't even have permissions to install anything. And then lastly, the student has a really new MacBook, and some software doesn't really install appropriately on it.
And then lastly, the student has a really new MacBook, and some software doesn't really install appropriately on it.
Cloud computing and WebAssembly as solutions
So if we could reimagine what actually this day one looks like, we'd want to go off into the cloud. So we want to go towards some kind of cloud computing. Because the steps here, right, are you would have to log into an environment, you'd have to select a project, and then you'd have to start exploring. These three steps, super quick, all done inside of a web browser.
But what if we could drop one of the steps? When I say drop one of the steps, I mean, just gently modify. So instead of having the student find the project, you could just use a badge. So the badge would effectively take you into the login screen, if they're not already logged in. And then you immediately get them into an environment that's pre set up for you to go off and explore. This feature of Pulsate Cloud, or in this case, RStudio Cloud before, was really, really appealing.
However, sometimes it's not really practical to be able to have students get into RStudio Cloud. It could be that, you know, they run out of free compute credits, they can't afford the $5 per month limit, so on and so forth. So can we figure out a way to sort of recreate this idea of just having them click, and they immediately get access to be able to start exploring?
And this sort of comes through with this technology breakthrough. First, we have this really powerful new idea of WebAssembly, which you can sort of think about it like Flash in your browser, except way better. Or you could think of it like Java applets, which is even way, way better. And then we have WebR, which sort of takes huge advantage of this WebAssembly technology to allow R to exist in your browser. And then last but not least, we have Quarto itself.
So we're going to really quickly mention why Quarto is really useful. So Quarto basically took nine or so different RStudio, or R Markdown packages, and sort of unified them together. So there's a really great common interface. And it also extended the features that were possible. So when we start to develop extensions to Quarto, you can really easily switch formats without hassle. So we can just take this HTML document, and we can immediately plug it right into a website. And then we can start serving.
How Quarto WebR works
Instead of having to go out to post-cloud, what we can do is we can use a compute server. Or not, we can use the compute server, but we can move away from this paradigm of needing a compute server, where we have R running on that server, and then we have this linked connection between R and then the student's computer. Instead, what we can do is we can move over to just using any kind of web server that if it can serve a file, so that is it can allow a student to download a file, they have a working copy of R right in their web browser without sort of us worrying about it.
So this then takes us to the third huge breakthrough, and that is WebR itself. So on the left-hand side, you can see some R code where you're sort of exploring how to iterate through items in a list. And then on the right side, you can sort of see the same code that would allow you to work with R, except directly inside of a web browser. So this allows us, again, to just move away from really needing a compute server and just sort of having a server that we can use to download files, where if the student has the file, then basically they can use R right in their web browser.
So it might seem a little bit complicated. So let's sort of try and show what this unification path really is between these three technologies. So to start, we have Quarto right inside of RStudio. Next, we're going to go ahead and press that render button, and lo and behold, it's going to render into an HTML document. Now, again, everything that you're seeing inside of the blue rectangle, that's all been powered by Quarto.
So if we move over to that idea of needing sort of like a web server, what we can do here is we can go out to any place that sort of serves web content in a static context. So that is GitHub Pages, Netlify, and even Quarto Pub. We can immediately place these sort of rendered HTML documents online really quick. Now, the next part is we're using WebR itself to have R active inside of the browser. So everything inside of the purple rectangle, basically that's all sort of happening because WebR exists.
So where a lot of the dynamic interaction with Quarto is coming in, which is one of the huge parts of this talk, is really through a Quarto extension called Quarto WebR, which basically puts in a way of taking a code cell and translating it in such a way that it works with WebR instead of needing here to actually render a document just with R itself. So it's a really, really powerful ecosystem that you're able to come up with as a result.
So what does this then look like in action? Well, what we can do is we can press the run code button. We can change values. So here we switched from adding to fitting a linear model. And now we can even in the same area, we could create a plot. So there's a huge level of versatility to what we can do.
Installing and configuring the extension
And in terms of making this available, the Quarto WebR extension really only needs to be made available on the person's computer that's rendering the document. So that means that you do need to install a piece of software. The easiest way here is just to go on the lower left-hand side of your RStudio window, press the terminal tab, which is right next to your console, and then type a quick install command of Quarto add codeless forward slash Quarto dash WebR, press enter. And you have two quick prompts to verify that you do indeed want to install the extension.
So on that end, right, we now sort of have it installed. What we can do is we can sort of make our existing HTML documents inside of Quarto dynamic just by sort of changing four things. The first part that we have to change is we have to modify the documents YAML to incorporate an engine parameter. So if we say engine knitter, this makes sure that all of the code cells are going to be run using knitter as the compute engine. The alternative here is everything would go through Jupyter, which would require you to install more software. From there, we need to add a filter. This filter, again, is that Quarto extension along us to incorporate WebR. And then the third part here is we switch the code cell type from R to WebR dash R. So once those three are done, we can just render the document. And lo and behold, we get an interactive document that we can use just about anywhere that there is a static web server host to share our content and have students learn.
So there's other parts to this as well. Again, there's a lot of different options. You can modify WebR's options. You can even change the extension options yourself. There's a bunch of customization options. One of the huge parts here that I'll just point out is you really can improve the user experience if you put up at the top of your document the kinds of packages that are required, because that sort of allows the document to load with all of your software available in comparison to just having them interactively install a package for each code cell that's needed.
Using WebR in education
Now, the other part here, really quick, is the context. So context allows us to basically have this level of interactivity. So we can run code. We can also create an output, right, so output only. And then we have a setup, and the setup is largely left empty. So when it comes to education, these parts allow us to just have these ready-to-go exercises. So we have the what-if scenario. We have a fill-in-the-blank kind of approach. And we can have it work about anywhere, which is really, really powerful.
There are always limits. The first limit here is this very much so requires an internet connection at the start. Not all the packages are available, and it's not really a replacement for VDS code or RStudio. But the other part that's really useful here is you start to actually see student behavior like never before. So we can actually see how students are going through and learning from the document just by adding here a short code. This also works with books, too, in the Quarto format.
So generally, students spent about 1.5 times more on dynamic documents. They frequently interacted with code cells where the outcome wasn't immediately clear in their mind. And they really described this approach as being more modern compared to old-fashioned. So they generally have liked it quite a bit.
So generally, students spent about 1.5 times more on dynamic documents. They frequently interacted with code cells where the outcome wasn't immediately clear in their mind. And they really described this approach as being more modern compared to old-fashioned.
Research use cases and future possibilities
In terms of that research part, well, research-wise, not necessarily quite to the point where you can really compile your own R package. That's not on CRAN in an easy sense. But if it is on CRAN, which you should always strive to put your research on to CRAN, it actually might even be available right now inside of WebR, which means that you can really quickly take this R code that you've developed and you can include a reproducible link to your Quarto notebook alongside of the paper. No longer do you need the static file.
Now, there's a few new possibilities as well. One of the huge things here is Reveal.js. That's a little bit problematic. We do need to improve the interface. And then lastly, we want to sort of also explore a little bit with Pyoid. So here you can sort of see a quick Pyoid demo, which basically allows us to run Python as well.
If you are interested, again, there's some really great resources, the extension, the project, and the community overall for WebR is really growing rapidly. And we'd love to have you here with us. So thank you so much. If there's any questions, I'm more than happy to take them now. Or feel free to reach out and just contact me with them.
Q&A
I'm going to ask you one question, because people are impressed and thinking about starting to convert to stuff. So the obvious question is how stable would you say that WebR extension API is?
So I would say as long as you're not trying to do any kind of direct changes to the WebR instance that we have, you should be fine. So I would say we're not planning on really changing that context option. There's only really one kind of component that you have, and that is really that context option that could potentially change at this point. We will upgrade the extension as new versions of R and WebR become available. So that part is just part of the natural process. I can't guarantee what you're changing would break or not break. Chances are the code that you're running, it should be fine, is my hope. Because of how this is done, each extension version, it's basically locked. So as long as you don't update the extension, again, I think you should be fine.
