(2 things) Before we begin…

Into the WebR-Verse

Bringing the power of R to your browser and beyond.

  • Foundations (i.e., WASM 101)
  • Origin Story (i.e., The challeges of getting R compiled to WASM)
  • With Great Power… (i.e., Just what can you do with WebR)
  • Web-Slinging 101 (i.e., Learning modern web dev skills)
  • Dive Into The WebR-Verse (i.e., Ideas & where you can go to learn more)

Foundations

WebAssembly (2015)

Binary instruction format targeting a stack-based virtual machine that runs in-browser or on-system.


  (module
    (memory (export "memory") 1)
    (data (i32.const 0) "Hello, world!")
    (global (export "length") i32 (i32.const 12))
    (global (export "position") i32 (i32.const 0)))

☝️ is the text representation (WAT)

WebAssembly

You don’t need to write WAT code to create WASM targets.

  • C and C++: Emscripten is an LLVM-to-JavaScript/WebAssembly compiler that is used to compile C and C++ code into WebAssembly
  • Rust: Rust also uses LLVM as its compiler backend, enabling it to compile Rust code into WebAssembly
  • Go has experimental support for WebAssembly as a compilation target

↗️ Lots more do as well.

Why WASM?

  • In-browser (and on-system) near-native execution speed
  • Designed with safety in-mind
    • Flash was a disaster (It’s back now & safe thanks to WASM!)
    • Java applets UX was terrible (They’re back now, too 😔)
  • Nobody sane wants to add more Java code to the universe
  • Gives us whole new ways of creating in-browser applications and experiences
  • Universal execution at “the edge”

Origin Story

George Stagg

Lionel Henry

Origin Story

Waaaay back on Jan 17, 2022…

https://github.com/r-wasm/webr/

4c8a937881b0bb4a28a992389eba264020c8997c


  webr
  ├── Dockerfile
  ├── patches
  │   └── R-4.1.2
  │       ├── stage1.patch
  │       └── stage2.patch
  └── scripts
      ├── build_R.sh
      ├── build_pcre.sh
      ├── build_xz.sh
      └── emfc

  4 directories, 7 files

Origin Story

In theory…

✅ 💰 ✈️ 🏖️ 🍻

Origin Story

But you and I use alot of FORTRAN when we use R

  • BLAS (1979)
  • LAPACK (1992)
  • Various other subroutines…

😩 😖 😡

Now…

What will/can you do with this power?

Great Power

Really straightforward to get setup in HTML:


// r.js

import { WebR } from '@r-wasm/webr'

// `globalThis` is a browser hack to make certain type of
// javascript objects available everywhere like the old days.

// i.e., this can be accessed everywhere as "webR"

globalThis.webR = new WebR();
await globalThis.webR.init();

export const webR = globalThis.webR;

Great Power


// main.js

import './r.js'

// I kinda made a 😊 helper ƒ() to make calling R code from JS super 😌
// We don't have 🕐 to go into to it today.

const rDates = await R`
seq.Date(as.Date("2018-01-02"), as.Date("2018-02-28"), "1 day") |> 
  as.character()
`

console.log(rDates)

Great Power


// js console output

(58) ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05', 
  '2018-01-06', '2018-01-07', '2018-01-08', '2018-01-09', '2018-01-10',
  '2018-01-11', '2018-01-12', '2018-01-13', '2018-01-14', '2018-01-15', 
  '2018-01-16', '2018-01-17', '2018-01-18', '2018-01-19', '2018-01-20'
  '2018-01-21', '2018-01-22', '2018-01-23', '2018-01-24', '2018-01-25', 
  '2018-01-26', '2018-01-27', '2018-01-28', '2018-01-29', '2018-01-30',
  '2018-01-31', '2018-02-01', '2018-02-02', '2018-02-03', '2018-02-04',
  '2018-02-05', '2018-02-06', '2018-02-07', '2018-02-08', '2018-02-09', 
  '2018-02-10', '2018-02-11', '2018-02-12', '2018-02-13', '2018-02-14', 
  '2018-02-15', '2018-02-16', '2018-02-17', '2018-02-18', '2018-02-19', 
  '2018-02-20', '2018-02-21', '2018-02-22', '2018-02-23', '2018-02-24', 
  '2018-02-25', '2018-02-26', '2018-02-27', '2018-02-28']

Great Power

James Balamuta made it dirt simple to use WebR in Quarto.

That’s how I made the “session info” demo, you saw earlier.

---
title: "Easy WebR In Quarto"
format: html
engine: knitr
filters:
- webr
---

```{webr-r}
sessionInfo()
```

(It has many more features that this.)

Great Power

  • There are now ~200 pre-built WebR 📦!!! (up from ~90)
  • R-Universe ↗️ is revving up to deliver WASM’d 📦
  • All pure base R 📦 are actually available now.

Web Slinging 101

I purport that all of you know:

✅ Markdown (qmd/rmd/etc.)

✅ HTML/CSS (for what Markdown cannot do)

✅ At least a little JS (or at least can copypasta a <script> tag snippet)

Web Slinging 101

But, you now have Great Power at your fingertips!

And, like it or not, the browser is the future of data science.

And, you cannot let this power be co-opted by any entity telling you “this is the way…”.

At best, that just constrains you.

Web Slinging 101

  • Learn modern HTML / CSS / JS
  • Learn modern tooling for HTML / CSS / JS
    • Glitch ↗️lets you learn 100% online (I have a WebR starter project on Glitch for you.) ReplIt ↗️. is also 👍🏽.
  • Use VS Code or one of the forks that doesn’t spy on you.

Dive Into The WebR-Verse

Dive Into The WebR-Verse

  • See what more established WASM language ports have been up to:
    • Like what you can do with Pyodide ↗️
    • And, Rust ↗️
    • And, Go ↗️
  • And, what amazing things you can do in WASM-ified land that we would have done in R:

Dive Into The WebR-Verse

  • Then remember all the cool things you know how to do in R!
  • And, then consider what kind of lightweight and useful web apps you might be able to bring into the world when you don’t need to worry about a Shiny server being available.
  • And, then think about all the ways you can teach concepts in R to folks without needing a 💰☁️ server.
  • And, what changes when R is available to every modern mobile device.

Thank You!

👉🏼 Link to this presentation source ↗️.

📍 Where to find me:

  • 🐘 @hrbrmstr@mastodon.social
  • 🦋 @hrbrmstr.dev
  • 🕸️ rud.is/
  • 📰 dailyfinds.hrbrmstr.dev/
  • 🔭 observablehq.com/@hrbrmstr/
  • 📑 git[la|hu]b.com/hrbrmstr/

2023 New York R Conference • @hrbrmstr (boB Rudis)