-
Notifications
You must be signed in to change notification settings - Fork 0
/
2023-nyr-webr.qmd
357 lines (232 loc) Β· 11.6 KB
/
2023-nyr-webr.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
---
engine: knitr
format:
revealjs:
incremental: true
logo: logo.png
footer: 2023 New York R Conference β’ @hrbrmstr (boB Rudis)
theme: [dark, custom.scss]
---
# (2 things) Before we beginβ¦
<center>
</center>
# Into the WebR-Verse {background-image="img/mask.jpg" background-opacity="20%"}
Bringing the power of R to your browser and beyond.
## {background-image="img/hippie.jpeg" background-opacity="25%"}
- Foundations <span class="parenthetical">(i.e., WASM 101)</span>
- Origin Story <span class="parenthetical">(i.e., The challeges of getting R compiled to WASM)</span>
- With Great Power⦠<span class="parenthetical">(i.e., Just what _can_ you do with WebR)</span>
- Web-Slinging 101 <span class="parenthetical">(i.e., Learning modern web dev skills)</span>
- Dive Into The WebR-Verse <span class="parenthetical">(i.e., Ideas & where you can go to learn more)</span>
## Foundations {background-image="img/panels.png" background-opacity="20%"}
## WebAssembly (2015) {background-image="img/panels.png" background-opacity="20%"}
Binary instruction format targeting a stack-based virtual machine that runs <span class="h">in-browser</span> or <span class="h">on-system</span>.
. . .
```
(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)))
```
. . .
<p class="parenthetical">βοΈ is the text representation (WAT)</p>
## WebAssembly {background-image="img/panels.png" background-opacity="20%"}
You don't need to write WAT code to create WASM targets.
- <span class="h">C and C++</span>: Emscripten is an LLVM-to-JavaScript/WebAssembly compiler that is used to compile C and C++ code into WebAssembly
- <span class="h">Rust</span>: Rust also uses LLVM as its compiler backend, enabling it to compile Rust code into WebAssembly
- <span class="h">Go</span> has experimental support for WebAssembly as a compilation target
. . .
βοΈ [Lots more do as well.](https://www.fermyon.com/wasm-languages/webassembly-language-support)
## {background-image="img/why.png" background-opacity="100%"}
## Why WASM? {background-image="img/panels.png" background-opacity="20%"}
- In-browser (and on-system) <span class="h">near-native execution speed</span>
- Designed with <span class="h">safety</span> in-mind
- Flash was a _disaster_ <span class="parenthetical">(It's back now & safe thanks to WASM!)</span>
- Java applets UX was _terrible_ <span class="parenthetical">(They're back now, too π)</span>
- <span class="hb">Nobody</span> sane wants to add more Java code to the universe
- Gives us whole <span class="h">new ways</span> of creating in-browser applications and experiences
- <span class="h">Universal execution</span> at "the edge"
## {background-image="img/panels.png" background-opacity="20%"}
<iframe seamless width="100%" height="100%" scrolling="no" src="webr.html"></iframe>
## {background-image="img/why-r-bubbles.png" background-opacity="100%"}
## Origin Story {background-image="img/bite.webp" background-opacity="50%"}
:::: {.columns}
::: {.column width="50%"}
<center>
George Stagg
</center>
:::
::: {.column width="50%"}
<center>
Lionel Henry
</center>
:::
::::
## Origin Story {background-image="img/bite.webp" background-opacity="50%"}
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 {background-image="img/bite.webp" background-opacity="50%"}
In theoryβ¦
. . .
. . .
<center><h1>β
π° βοΈ ποΈ π»</h1></center>
## Origin Story {background-image="img/bite.webp" background-opacity="50%"}
But you and I use _alot_ of FORTRAN when we use R
- BLAS (1979)
- LAPACK (1992)
- Various other subroutinesβ¦
. . .
<center><h1>π© π π‘</h1></center>
## Now⦠{background-image="img/bite.webp" background-opacity="30%"}
<img src="img/111-002.png" style="max-width:80% !important; max-height:80% !important; margin-left: 10%; margin-top:-1.5%;"/>
##
:::: {.columns}
::: {.column width="50%"}
:::
::: {.column width="50%"}
<h3 style="margin-top:50%; text-align:center; height:100%;">What will/can _you_ do with this power?</h3>
:::
::::
## Great Power {background-image="img/web.jpg" background-opacity="30%"}
Really straightforward to get setup in HTML:
```{javascript, eval=FALSE, echo=TRUE}
// 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 {background-image="img/web.jpg" background-opacity="30%"}
```{javascript, eval=FALSE, echo=TRUE}
// 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 {background-image="img/web.jpg" background-opacity="30%"}
```{javascript, eval=FALSE, echo=TRUE}
// 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 {background-image="img/web.jpg" background-opacity="30%"}
James Balamuta made it dirt simple to use WebR in Quarto.
That's how I made the "session info" demo, you saw earlier.
````markdown
---
title: "Easy WebR In Quarto"
format: html
engine: knitr
filters:
- webr
---
```{webr-r}
sessionInfo()
```
````
(It has many more features that this.)
## Great Power {background-image="img/web.jpg" background-opacity="30%"}
- There are now ~200 pre-built WebR π¦!!! (up from ~90)
- [R-Universe](https://r-universe.dev/) βοΈ is revving up to deliver WASM'd π¦
- All pure base R π¦ are actually available now.
## Web Slinging 101 {background-image="img/school.jpg" background-opacity="20%"}
. . .
I purport that all of you know:
. . .
β
Markdown <span class="parenthetical">(qmd/rmd/etc.)</span>
. . .
β
HTML/CSS <span class="parenthetical">(for what Markdown cannot do)</span>
. . .
β
At least a _little_ JS <span class="parenthetical">(or at least can copypasta a <span style='font-family:monospace; font-size:0.9rem;'><script></span> tag snippet)</span>
. . .
## Web Slinging 101 {background-image="img/school.jpg" background-opacity="20%"}
. . .
But, you now have <span class="h">Great Power</span> at your fingertips!
. . .
And, like it or not, the <span class="h">browser</span> is the future of data science.
. . .
And, you <span class="h">cannot let this power be co-opted</span> by any entity telling you _"this is the wayβ¦"_.
. . .
At _best_, that just <span class="h">constrains you</span>.
## {background-image="img/drones.jpg" background-opacity="100%"}
## Web Slinging 101 {background-image="img/school.jpg" background-opacity="20%"}
- Learn modern HTML / CSS / JS
- [Go Make Things](https://gomakethings.com/) βοΈ is a good place to start.
- [MDN](https://developer.mozilla.org/en-US/docs/Learn) βοΈ is a great resource.
- As is [W3Schools](https://www.w3schools.com/) βοΈ.
- Learn modern _tooling_ for HTML / CSS / JS
- [Glitch](https://glitch.com/) βοΈlets you learn 100% online _(I have a WebR starter project on Glitch for you.)_ [ReplIt](https://replit.com/) βοΈ. is also ππ½.
- Use VS Code or one of the forks that doesn't spy on you.
- [neovim](https://github.com/neovim/neovim) βοΈ is a solid alternative as is [Sublime Text](https://www.sublimetext.com/) βοΈ.
## Dive Into The WebR-Verse {background-image="img/across.avif" background-opacity="20%"}
- Hit up [the πΈ mothership](https://docs.r-wasm.org/webr/latest/) βοΈ.
- Check out [my π§ͺπΈοΈ experiments](https://rud.is/webr-experiments/) βοΈ
- Start in [π Quarto](https://github.com/coatless/quarto-webr/) βοΈ
- [π Monitor the WebR topic](https://github.com/topics/webr) βοΈ
- Track the [awesome π list](https://github.com/nanxstats/awesome-webr) βοΈ
- Keep an eye on what [R-universe π is up to](https://github.com/r-universe-org/webr-bundle/tree/master) βοΈ
## Dive Into The WebR-Verse {background-image="img/across.avif" background-opacity="20%"}
- See what more established WASM language ports have been up to:
- Like what you can do with [Pyodide](https://testdriven.io/blog/build-spa-with-python-part-1/) βοΈ
- And, [Rust](https://rustwasm.github.io/book/reference/project-templates.html) βοΈ
- And, [Go](https://wasmbyexample.dev/examples/hello-world/hello-world.go.en-us.html) βοΈ
- And, what amazing things you can do in WASM-ified land that we would have done in R:
- Like, [geocomputation/mapping](https://observablehq.com/@kylebarron/prototyping-georust-geoarrow-in-webassembly) βοΈ
- And, robust [data wrangling](https://observablehq.com/@cmudig/duckdb) βοΈ
## Dive Into The WebR-Verse {background-image="img/across.avif" background-opacity="20%"}
- Then remember all the _cool_ things <span class="h">you</span> know how to do <span class="h">in R</span>!
- And, then consider what kind of <span class="h">lightweight and useful web apps</span> 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 <span class="h">teach concepts in R</span> to folks _without needing a_ π°βοΈ _server_.
- Like the [School of Data](https://www.theschoolofdata.org/) βοΈ.
- And, what changes when <span class="h">R is available to every modern mobile device</span>.
- Perhaps turn [this into an native iOS app vs macOS app](https://github.com/hrbrmstr/macoswasmr) βοΈ
## Thank You! {background-image="img/you.webp" background-opacity="30%"}
ππΌ [Link to this presentation source](https://gitlab.com/hrbrmstr/2023-nyr-webr) βοΈ.
π Where to find me:
- π <span style="font-family: 'comic code ligatures', monosapce;">@hrbrmstr@mastodon.social</span>
- π¦ <span style="font-family: 'comic code ligatures', monosapce;">@hrbrmstr.dev</span>
- πΈοΈ <span style="font-family: 'comic code ligatures', monosapce;">rud.is/</span>
- π° <span style="font-family: 'comic code ligatures', monosapce;">dailyfinds.hrbrmstr.dev/</span>
- π <span style="font-family: 'comic code ligatures', monosapce;">observablehq.com/@hrbrmstr/</span>
- π <span style="font-family: 'comic code ligatures', monosapce;">git[la|hu]b.com/hrbrmstr/</span>