R for Web Dev

class: title

<h1>Bringing it All Back Home</h1>
<h2>R for Web Dev</h2>
<div class="rstudio-conf-logo"></div>
<div class="talk-meta">
<p class="talk-author">Garrick Aden-Buie</p>
<p class="talk-date">rstudio::conf(2020, "JavaScript for Shiny Users")</p>
</div>

---
class: break white center middle
background-image: url('assets/img/bg/unsplash_VEOk8qUl9DU.jpg')
background-size: cover

## Other Conferences

---
class: break white middle right
background-image: url(assets/img/r-for-web/animal.gif)
background-size: cover

### rstudio::conf

---

## Serious Inspiration

.flex.w-100[
.w-33[
<a href="https://maya-gans.shinyapps.io/human_body_app/"><img src="https://github.com/volcanioo/Human-Body-Rendering-HTML/raw/master/README_image.png" width="100%" /></a>
]

.w-60.ml4[
Inspired by the [Human Body App](https://maya-gans.shinyapps.io/human_body_app/) by Maya Gans.

Also inspired by 
[this question by Eric Nantz](https://community.rstudio.com/t/passing-module-namespace-to-embedded-javascript-function/26988)<br>
on RStudio Community.

.w-80[
![](assets/img/r-for-web/rstudio-community-question.png)
]
]
]

---
layout: true

## Our App

.fl.w-33.mr3[
![](assets/img/r-for-web/drumkit-preview.png)

[gadenbuie.shinyapps.io/&#8203;js4shiny-drumkit/](https://gadenbuie.shinyapps.io/js4shiny-drumkit/)
]

---

.f5[
_Makes real sounds!_
]

.f5[
_Entertaining for at least 5 minutes!_
]

.f5[
_It's actually educational!_
]

.f5[
_It's a real .f-galada.fs-normal[Shiny] app!_
]

---
layout: false

## To Get Started

.f6[.b[Follow Along:] .code[bit.ly/js4shiny-drumkit]]

.f6[.b[Starter Zip:] .code[bit.ly/js4shiny-drumkit-project]]

```r
library(usethis)

zip <- "http://bit.ly/js4shiny-drumkit-project"

use_course(zip, destdir = "js4shiny")
```

Use your workshop folder for `destdir`

.absolute.w-20.h-50.bottom-0.right-2[
![](assets/img/r-for-web/drumkit-preview.png)
]

???

[Dev Script](http://bit.ly/js4shiny-drumkit)

---

# Let's Do This Together!

We're going to do all the steps of this project together.

Be kind to your neighbors and help them if they get stuck.

.mt3[
# Read with me...

<a class="f4" href="https://bit.ly/js4shiny-drumkit" target="_blank">bit.ly/js4shiny-drumkits</a>

The **dev journal** is to help if you get lost

Click on .blue[changelog links] to see changes at each step

.code[js4shiny::repl_example("drumkit-N")]
]