Mastodawn

George Stagg Mar 12, 2023

I've been playing around with using #WebR and #Quarto for client-side interactive lesson material and it's amazing! All the R code (including #TidyVerse 📦) is running in the user's browser, so no server setup, resources, or security to worry about.

Demo Website: https://interactive-lessons.weecology.org/
GitHub: https://github.com/ethanwhite/datacarp-interactive

Huge thanks to @hrbrmstr for sharing all of this awesomeness this week(end). Checkout his new blog post on this: https://rud.is/b/2023/03/12/almost-bare-bones-webr-starter-app/

Interactive Data Lessons - Experimental interactive version of Data Carpentry for Biologists

Ethan White Mar 12, 2023

And a huge thanks to @gws for #WebR and @coatless for the #WebR #Quarto extension that make all of this feasible @hrbrmstr

Ethan White Mar 12, 2023

Note: You can work with these interactive lessons in any web browser - including the one of your phone or tablet, so you can do client side interactive lessons on basically any device. This is a really big deal for #OER for #rstats!

hrbrmstr 🇺🇦 🇬🇱 🇨🇦Mar 12, 2023

@ethanwhite Even knowing how it works in great detail, those local-browser executable R code blocks are just amazing!

Gabe The Engineer Mar 12, 2023

@ethanwhite @hrbrmstr I haven't seen a mention of tidyverse with webR. I assume it's not yet compatible?

hrbrmstr 🇺🇦 🇬🇱 🇨🇦Mar 12, 2023

@gdbassett @ethanwhite available pkg. Ethan’s demo uses what’s avail from tidyverse

Gabe The Engineer Mar 12, 2023

@hrbrmstr @ethanwhite Wonderful! Time to crank my R scratch project back open!

Gabe The Engineer Mar 12, 2023

@ethanwhite @hrbrmstr Once we have tidyverse (or even just dplyr) with webR, pairing it with scratch will be amazing for no code data analysis. (a dream of mine for years).

Ethan White Mar 12, 2023

@gdbassett dplyr demo is live on the site https://interactive-lessons.weecology.org/dplyr.html And yeah, it definitely makes a big difference @hrbrmstr

Interactive Data Lessons - Working with Tabular Data

hrbrmstr 🇺🇦 🇬🇱 🇨🇦Mar 12, 2023

@ethanwhite oh, and #ty for letting me get the coveted “first starred” status on that repo :-)

Dan Fulop Mar 12, 2023

@ethanwhite the same strategy could be used in industry for client-side data dashboards and tools! There are lots of such tools in most co’s, running on servers. Adding the flexibility to run such tools client-side would be good.

To complete the ecosystem I’d want an R webapp framework as light as Streamlit

Ethan White Mar 12, 2023

@danfulop This is exactly the sort of thing that @hrbrmstr has been working on that motivated and guided my work.

Checkout his excellent blog post: https://rud.is/b/2023/03/12/almost-bare-bones-webr-starter-app/

And the demo dashboard: https://rud.is/webr-dash/no-dplyr.html

Almost Bare Bones WebR Starter App

Let's walk through how to set up a <a href="https://rud.is/webr-app/">~minimal HTML/JS/CS + WebR-powered

rud.is

Dan Fulop Mar 12, 2023

@ethanwhite @hrbrmstr awesome. Thanks for mentioning his blog post!

Philippe Massicotte Mar 12, 2023

Pretty impressive! I have tried your code and run that locally, but it takes longer to install dplyr and readr that what I can experience on your website.

In you code setup, you install these libraries. Is the installation (using js) occurring every time the page is loaded?

Ethan White Mar 12, 2023

@philmassicotte Thanks!

1. The speed difference is due to setting two http headers. See https://docs.r-wasm.org/webr/latest/serving.html
2. Yes, the install is happening on every page load. I don't know enough yet to know if it's possible to make things more persistent. Maybe @gws can tell us whether there's a way to do this

WebR - R in the Browser - Serving Pages with WebR

Philippe Massicotte Mar 12, 2023

Thanks for your answer. I tried this and it works fine. Thank you again for the demo!

Ethan White Mar 12, 2023

@philmassicotte I'm glad it's useful!

I'm not actually sure that I was right about (2). Once I stopped changing the site reloads seem to be a lot quicker, so webR may actually be caching those installs.

Philippe Massicotte Mar 13, 2023

Cool I will do some test on my side. Do I have to set up these two header things only locally, or will it be ok if hosted on github-pages or Netlify?

Ethan White Mar 13, 2023

@philmassicotte You need to add them on the host as well. Instructions for netlify on the my blog post on this that just when live https://jabberwocky.weecology.org/2023/03/13/a-brief-introduction-to-using-webr-and-quarto-for-client-side-interactive-lesson-material/

@hrbrmstr had a post yesterday about getting things working on GH pages https://mastodon.social/@hrbrmstr/110011327969591021

A brief introduction to using WebR and Quarto for client-side interactive lesson material

Jabberwocky Ecology

Philippe Massicotte Mar 13, 2023

@ethanwhite @hrbrmstr

Thanks, this is very cool. A new toy to play with :)