WebR: Why, What, How

Fred Hutch User Group

Ted Laderas

2024-06-06

Learning Objectives

After watching this presentation, you will be able to

• Articulate what WebR is and how it lets your run in the browser
• Explain why to use WebR in your educational work
• Utilize WebR in your presentations and web pages (how)

Follow along!

What is WebR?

Why WebR?

• Education (example from Andrew Heiss)
  • Works on phones!
• Internal Websites
  • Sharepoint
• Shinylive (Shiny without Shiny Server)

How does WebR work?

• R has been compiled to WebAssembly
  • Machine code (low-level) for web browsers
• Browsers can run both WebAssembly and JavaScript

This is a huge accomplishment

Bob Rudis’ WebR Talk

WebR Worker

• WebR launches a worker process in browser
• Uses JavaScript to communicate between web page and worker
• Everything is run in the browser

Communication

• Webpages use Javascript to communicate with WebR Worker
• Results are returned within a <div>

Where to read about WebR?

WebR documentation

• Very technical
• Specifies how to get JS to interact with WebR in a web page
• Asynchronous evaluation
• Made for developers

Recommended for Users: Quarto/WebR documentation

• By James Balamuta and company
• Quarto WebR documentation
• Quarto/WebR extension
• Handles the communication between JS and WebR
• Don’t worry!

Getting started with Quarto/WebR

First, Create a Project in RStudio

File >> New Project >> New Folder >> Quarto Website

├── _quarto.yml
├── _site
├── about.qmd
├── index.qmd
├── styles.css
└── webr-demo.Rproj

Next, install Quarto Extension in Project

• In the RStudio Terminal Window:

quarto add coatless/quarto-webr

Next, install Quarto Extension in Project

• In the RStudio Terminal Window:

quarto add coatless/quarto-webr

This folder will be installed in your project:

├── _extensions
│   └── coatless
│       └── webr  ## Contains a lot of JavaScript

Quarto/WebR Setup

Quarto Frontmatter

---
title: "My WebR Demo"
format: html
engine: knitr
---

• Start like usual
• Specify engine: knitr

Quarto Frontmatter

---
title: "My WebR Demo"
format: html
engine: knitr
filters:                     
  - webr                    
--- 

• Need to use filters with - webr option

Quarto Frontmatter

---
title: "My WebR Demo"
format: html
engine: knitr
filters:                         
  - webr                         
webr:                            
  packages: ['ggplot2', 'dplyr', 'palmerpenguins']
---

• webr is where you set options:
  • packages: to install
  • base-url: to change WebR repository
  • cell-options: to set default code window options

Full Frontmatter

A Note about Packages

• Packages need to be compiled for WebAssembly
  • {rwasm} package
  • Need to solve dependencies (for FORTRAN, C++, code)
• Using R Packages in WebR
  • Can install in setup chunk or using the webr::install() option

Not all dependencies are available

• WebR Compiled Packages
  • Default repository for packages (19532+ compiled, but not everything)
• Some packages don’t have all dependencies compiled
  • Example: Bioconductor (Biobase) is not compiled

Add Your Code Blocks

Quarto/WebR Block

```{webr-r}
library(palmerpenguins)
table(penguins$island)
```

Quarto/WebR Block

```{webr-r}
library(palmerpenguins)
table(penguins$island)
```

This becomes:

Keep in Mind

• Every webpage is a single WebR Session
• Data objects persist between code windows
• Be careful with incremental lessons with multiple code windows
• Design consideration: what goes together in a single webpage?

Persistence of Penguins

Be careful with multi-stage problems - mistakes may propagate

Education Example

Adding Layers

Add another layer to the below plot by appending a geom_point(aes(color=species)) to it.

WebR Filesystem

What about files?

• There is a filesystem that is created
  • emscripten filesystem
• Not super easy to get stuff in
• Distinct from your project
  • can’t see anything in your directory

Options to get data in

• Data packages
• Serve data at a URL
  • URL needs to be https://
  • download.file()

Getting data in from a URL

For teaching, put in a context: setup chunk:

Loading data in the filesystem

rwasm::file_packager()

• Lets you package a folder into a filesystem
• Still needs to be hosted somewhere

Code Block Options

context: setup

context: setup - Pre-load data, load packages, for use globally

```{webr-r}
#| context: setup

library(dplyr)
library(ggplot2)
library(penguins)
```

context: output

Show only output, not execution cell

```{webr-r}
#| context: output

table(penguins$species)
```

context: output

Deploy your HTML

Deployment

• You will need a web server to deploy your WebR page
• Serve HTML, no shiny server needed
• Browser needs internet access to download packages

Deployment

• Can use github pages:

  quarto publish gh-pages ./

• Netlify

  quarto publish netlify ./

Netlify Drop Demo

What about Shiny?

Shinylive

Resources

• WebR Filesystem (Bob Rudis)
• Teaching with WebR - Nicola Rennie
• Bob Rudis’ WebR Talk - much more about the indepth details of WebR
• Quarto/WebR extension - What I’ve been talking about
• WebR Developer Resources

Wrapping Up

Hopefully you learned to:

• Articulate what WebR is and how it lets your run in the browser
• Explain why to use WebR in your educational work
• Utilize WebR in your presentations and web pages (how)

Keep in Touch

• Source code: https://github.com/laderast/webr-demo/
• Mastodon: https://vmst.io/@tladeras
• Email: tedladeras at gmail
• Web: https://laderast.github.io