webR 0.2 Overview: R in the browser | George Stagg | Posit
WebR is a version of the statistical language R compiled for the browser and Node.js using WebAssembly, via Emscripten. WebR makes it possible to run R code in the browser without the need for an R server to execute the code: the R interpreter runs directly on the user’s machine. Several R packages have also been ported for use with webR, and can be loaded in the usual way using the library() function. George Stagg shares what's new in the 0.2.0 release! 00:23 About WebR and applications of computing with WebAssembly 02:25 Overview of changes in webR 0.2.0 release 04:10 The webR REPL app 07:28 Improved speed in graphics rendering 08:43 Text rendering in plots, including international and accessible fonts 10:27 Updated support for standard bitmap devices 13:05 Lazy virtual file system allows for decreased download size 15:40 Links with where to learn more Website: https://docs.r-wasm.org/ webR REPL example: https://webr.r-wasm.org/latest/
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hello, my name is George Stagg. I'm an open-source software engineer working in the Tidyverse team for Posit. I'm the lead developer of the WebR project and today I wanted to make a video to talk about some of the changes in WebR 0.2.0. So if you don't know about WebR, it's a version of R compiled for WebAssembly so that it can run in a web browser and other WebAssembly environments such as Node.js.
So this is probably my favorite quick example of what WebR can do. This is a code block with some R code in it, in this case a linear model done in base R. And if I hit the run code button, you can see that that R code is run and the results shown to you on the screen. And the important part about this is that there's no R server running to execute that code. That code is being executed in the web browser directly on this machine.
This is live and interactive so I can change it. I can produce a new R code and run it to get real interactive live results. And that also includes plotting. I can plot images all directly in the web browser. So you can imagine the applications that this opens for users of R on the web. And the ones I'm most interested in are things like educational content. So interactive documents and presentations like this one and educational content, including even things like R documentation. And WebR having those tactile interactive examples directly in the web page, I feel really helps with those use cases.
Another thing we're beginning to look at is the idea of containerization of an R application and sandboxing and taking some R application and being able to run it in its entirety on another machine through the idea of portability and distribution of WebAssembly apps. I am also aware of one application, one person using WebR as a way to access R on a tablet. In this case, they're running WebR in a web browser through their tablet on a device that otherwise wouldn't be able to access R.
WebR 0.2.0 overview
So as I say, WebR version 0.2.0 is now available. The top link shown there is a demo WebR REPL application. REPL stands for read eval print loop. And it's another name for the R console that I'm sure you're familiar with. If you're a JavaScript developer, you can install WebR through NPM or you can run it directly from CDN. And the documentation to integrate WebR into your own programs is at that URL there.
So let me talk about the updated WebR REPL application. But before I do that, I'll just talk about the changes since version 0.1.1 WebR. So we updated the source version of R from I think it was R4.1.0 to 4.3.0. We've changed the package name from R-Wasm slash WebR, this sort of namespace package, just to the WebR package in NPM. Makes it a little easier to install. And we've rebuilt the demo application using a more modern framework. We've migrated from using jQuery to the React framework. We've expanded the functionality of the in-browser Canvas graphics and Bitmap graphics systems. And we've made improvements to accessibility and internationalization in those graphics systems. And we're supporting lots more R packages, which I'll talk about in a separate video.
Something else I'll talk about in a separate video is the changes to the developer API. And if you want to read more about that, you can also read the news document inside the WebR repo.
The WebR REPL app
So let me talk about the WebR REPL app. So it looks like this. And you can see if you saw the previous version of the REPL app, it looks a bit different as part of the redesign into the React framework. We've expanded the view so that there's now this editor in the top left-hand corner. So I can type R code in here and you get code suggestions and syntax highlighting all built into this code mirror code editor.
The nice thing about this is that you can also save the files directly to the virtual file system that WebR is running in, which takes you to this panel here. This is the file system viewer built into WebR. It's been expanded to have more controls at the top to manage files and directories on that virtual file system. And the view itself, the component implementing that tree of directories has been replaced with a React library designed to build an accessible tree view component so that users who browse the web through keyboard only, for example, are able to use this component effectively.
The console is as it was in the previous version. The main difference between the previous version and this is that it has a feature enabled that allows users to use screen readers to read the input and output of that console. So if you're doing some kind of analysis, or in my case, just generate some random numbers, the previous version of this component, those results were not accessible to things like screen readers, but here they are. So again, users with accessibility issues who need to use those tools are able to use the R console in this WebR app effectively.
And then finally, the last panel is the plotting panel. So if I run a command to produce some plots, this is using a built-in graphics device into WebR, I'm calling it the canvas graphics device. It's drawing those plots using a web API known as canvas graphics. And you can move through plot history and save plots into a bitmap file or clear them directly from this page.
The final thing I'll say about the editor is that you may have noticed earlier that as I type, code suggestions are produced. This is using a feature built into the CodeMirror editor that we've hooked up to R's built-in code completion engine. And that means it's context aware of the code you're typing. So if I type sample here, S-I-Z, you can see it's suggesting the argument size to me. And that's because the code completion generator knows that size is an argument to the sample function, which is really nice as you're writing code to have those suggestions given intelligently like that.
HTML canvas graphics device
So that's the REPL application. I'll move on now to talking about the HTML canvas graphics device, which I briefly showed in the lower portion of the screen. So the canvas graphics device is built into the WebR application and allows you to render graphics in a web browser. We've made big improvements since the last release by moving from the canvas API to this off-screen canvas API. So here's a video of producing a plot with 300,000 points from the last version of WebR. And you can see it's quite slow. The reason for that is because each of those points is drawn by sending a message from the worker thread where computation happens in the WebAssembly environment to the main thread where that plot is being drawn. So dispatching and handling all of those messages for each of those points separately creates a big overhead. And that's what the main cause of those performance issues were.
In the latest version of WebR, it's much improved. It's an order of magnitude faster. And it's all thanks to this off-screen canvas API. What it does is it lets us draw the image on the worker thread and then just send a single message with the finished image to the main thread to be shown.
In the latest version of WebR, it's much improved. It's an order of magnitude faster. And it's all thanks to this off-screen canvas API.
Using off-screen canvas has enabled us to enable much more advanced text rendering features too. We can now take advantage of the text rendering provided by the web browser that WebR is running in. So here's an example of some code, again, running live in this slide, showing off some of those advanced text features. The biggest benefit of this is probably that WebR now supports much better international scripts when plotting. So you can see there's some Arabic text here, some Hebrew and some Japanese. And they're all handled automatically now by the WebR canvas graphics device. That font fallback that enables this also allows you to use emoji in your plot should you want to.
The nice thing about the canvas graphics device is because we're relying on the web browser to plot and to draw those graphics, we can actually use font files that are installed on the user's machine. We can use system fonts. So here, for example, I have family future as the title, but I can change that. And this provides not only a benefit to internationalization for all those alternative scripts, but also accessibility, because there exists some fonts that are designed to help users with reading barriers such as dyslexia to be able to comfortably read text. So there's open dyslexic is such a font. You can see that if I re-render that image, that font is now being used for the title and the X and Y labels. So those users who prefer to read text with that font are now able to do so in WebR should they wish.
Bitmap graphics and the lazy virtual file system
In addition to the canvas graphics device, WebR also has updates to support the standard bitmap graphics devices built into R. So if you're running in a browser that doesn't have a, if you're running an environment that's not a web browser, such as node server side, or you're running R code that isn't aware of the canvas graphics device, you can now do so with WebR. So here I have an example that this is just loading WebR into the page. And then there's some R plotting code here, writing a PNG to the virtual file system. And once that PNG has been written to the virtual file system with WebR, there are a file system APIs that let you read that file into a JavaScript variable. And once you have that data in JavaScript, you can do what you need to do with it. You can offer it to the user as a download, you can display it in the page, or if you're running server side, you could send that data over the network.
The way this works is that we've compiled the Cairo graphics library and Pango text layout engine to WebAssembly as part of the WebR build process. And by compiling those libraries to WebAssembly and linking them in, we can enable those advanced text features that I already talked about for the built-in graphics devices, as well as the canvas graphics device. The main difference between the two is that for built-in Cairo graphics with PNG, for example, those fonts can't be read off the user's file system. And instead, they must be provided to Cairo through the WebR virtual file system. So WebR ships with a minimal selection of Noto fonts. But if you do have other requirements for different scripts or different font typefaces, you can upload those fonts to the virtual file system. And WebR has been configured to search that directory, home, web, user, fonts, for font files, and use them.
So here's an example, very similar to the previous example I showed you. The only difference is this time it's creating a PNG file instead of displaying it in a browser. And you can see the results are very, very similar. And all those text features that I talked about, things like ligatures in Arabic text and the font fallback for different glyphs, they're all supported, including the right-to-left text and various other features. This works in this example because I've uploaded some fonts for those alternative scripts to the virtual file system in the correct place, and WebR has automatically then used them to produce this plot.
So the last thing I want to talk about in this video is something we're calling the lazy virtual file system. So everything I've shown you so far comes with a price. Increased web assembly, download size, data size. If you're bundling fonts, they'll have to be downloaded. But not every user will want all of those features. Not every user will want to use Cairo graphics and download those font files. Some people will just want to do some computation and return some numbers. The same thing applies to files built into R already. So R ships with lots of documentation and examples and data sets, and they're not necessarily needed for every user. So it would be nice if WebR only downloaded the data it actually needs to run your R code.
And WebR 0.2.0 does just that. It uses an API provided by Emscripten for their file system environment that allows the file system to only download the files when they're requested. So here in this example, I'll just open the dev tools and you'll see exactly what I mean. So if I refresh the page, you can see the R files are downloaded to run R and its base packages. But then if I run the command png to use Cairo graphics to build a bitmap graphics image, you can see it's only at that point that those Cairo libraries are downloaded to the device. And a similar thing, if I plot something now and I draw some text, you'll see that the font files are only downloaded at the point of actually producing that plot. So if I don't use Cairo graphics and produce a plot that requires those fonts, they won't be downloaded by the user.
That's really nice because it reduces the initial download size of WebR by a lot. For the application that I've been showing, the demo REPL app in the previous version of WebR with less features, that was 40 megabytes of download. In the new version, it's only 9.5 megabytes and that's with the extra features. So that's only 23% of the previous download size. So that's a really good improvement for the download size of an initial WebR loading of the engine into a page.
In the new version, it's only 9.5 megabytes and that's with the extra features. So that's only 23% of the previous download size.
So that's everything I wanted to talk about in this video. Do try out the app and run your own R scripts. And if you're a developer, as I said, you can install WebR from npm or CDN. And the documentation is shown there on the screen at that URL. Do go and read the documentation if you want to try WebR in your own applications, because there are some subtleties when it comes to when it comes to putting those applications on the web. If you do create something interesting with WebR, please let me know. My email address is shown on the screen and I'd love to hear about it. And thank you very much for listening.