JavaScript for R

# JavaScript for R
## Enhance your data science products with JavaScript
### John Coene

---

Available for [pre-order](https://www.routledge.com/Javascript-for-R/Coene/p/book/9780367680633)

Out 19 July

[javascript-for-r.com](https://javascript-for-r.com/)
]

---

# Content

Broken down into 6 parts:
  
  1. Introduction
  2. Data Visualisation
  3. Web Development
  4. Computations
  5. Webpack & NPM
  6. Closing

Forthcoming CRC Press - R Series

Available for free: [javascript-for-r.com](https://javascript-for-r.com)
]

---
class: center, centerize

### This aims to

### Give you the <span class='yellow'>urge</span> to learn JavaScript

---

## Plan
  
  Focus on (a tiny part of the) __web development__ chapter.

1. 20 min introduction
  2. 10 min code along
  3. 30 min workshop~ish excercise

Using JavaScript in a Shiny application.

]

## Resources

- RStudio Cloud Project: [rstudio.cloud/project/2615039](https://rstudio.cloud/project/2615039)
  - Github: [github.com/JohnCoene/r-ladies-tunis](https://github.com/JohnCoene/r-ladies-tunis)
  - Slides: [john-coene.com/talks/r-ladies-tunis](https://john-coene.com/talks/r-ladies-tunis)
]

---
class: center, centerize

# Shiny <span class='yellow'>+</span> JavaScript

---
class: light

## You're already using it

You are probably already using JavaScript, but 
you may not be aware of it.

#### Some examples

.pull-left[
- htmlwidgets:
    - [plotly](https://plotly.com/r/)
    - [DT](https://rstudio.github.io/DT/)
    - [leaflet](https://rstudio.github.io/leaflet/)
- shiny extensions:
    - [waiter](http://waiter.john-coene.com/)
    - [shinyMobile](https://github.com/RinteRface/shinymobile)
    - [shinyWidgets](https://github.com/dreamRs/shinyWidgets)
- Rmarkdown:
    - [xaringan](https://github.com/yihui/xaringan)
    - [xaringanExtra](https://github.com/gadenbuie/xaringanExtra)
- plenty more
]

![](https://grapher.network/img/rstudio.png)

<small><i>Example of grapher package</i></small>

]

---
class: light

## Why JavaScript?

There are hundreds of great reasons but mainly:

1. It can do something no other language can: __run in the browser.__
2. It can easily __extend R.__

<small><i>DT & plotly with crosstalk</i></small>

---
class: center, centerize

<strong>Runs in the browser</strong>

JavaScript does things only it can do!

---
class: center, centerize

<strong>It <span class='yellow'>extends</span> R</strong>

You're <strong>NOT</strong> re-learning to do things you already know how to do in R.

<br/>

Use R for most things

Use JavaScript elsewhere

---
class: light

# Websocket

Shiny uses the _websocket_ that allow
  _bi-directionnal_ communication between
  clients (web browsers) and the server.

__Two scenarios:__

1. The server sends a message to the browser.
  2. The browser sends a message to the server.

We'll focus on __1__: server <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg> client
]

.pull-right[
<div id="htmlwidget-dba9dfd88c7a752707f2" style="width:504px;height:504px;" class="grViz html-widget"></div>
<script type="application/json" data-for="htmlwidget-dba9dfd88c7a752707f2">{"x":{"diagram":"\ndigraph{\n  node [shape=record fontsize=10];\n  w1 [label=Websocket];\n  w2 [label=Websocket];\n  w3 [label=Websocket];\n  w4 [label=Websocket];\n  b1 [label=\"Browser\" color=gold];\n  b2 [label=\"Browser\" color=gold];\n  b3 [label=\"Browser\" color=gold];\n  b4 [label=\"Browser\" color=gold];\n  s [label=\"R server\" color=royalBlue];\n  s -> w1 -> b1 [dir=both color=dimGray arrowsize=.3];\n  s -> w2 -> b2 [dir=both color=dimGray arrowsize=.3];\n  s -> w3 -> b3 [dir=both color=dimGray arrowsize=.3];\n  s -> w4 -> b4 [dir=both color=dimGray arrowsize=.3];\n}\n","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
]

---
class: center, centerize

### Sending a message

### from the <span class='underline'>server</span> to the <span class='underline'>browser</span>

---
class: light

# Server-side

From the server we send a message.

```r
server <- function(input, output, session) {
  session$sendCustomMessage(
    type = "say-hello", # to identify the message
    message = "hello!" # the message to send
  )
}
```

We use the `session` object to send message to the browser.

The message can be:

- A `character` string
- A `list`
- A `data.frame`
- (Almost) any R object

]

It's essentially an identifier.
]

---
class: light

# Browser-side

We create a handler for the message `type` sent from the server.

.pull-left[
### <span class='blue'>R</span> <span style='float:right;'><svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg></span>
```r
server <- function(input, output, session) {
  session$sendCustomMessage(
    type = "say-hello",
    message = "hello!"
  )
}
```
]

.pull-right[
### <span class='yellow'>JavaScript</span> 
```js
Shiny.addCustomMessageHandler(
  'say-hello', // type
  function(msg){
    // do something with msg
  }
);
```
]

The handler will run the `function` every time a 
message of the corresponding type is received.

---
class: center

# Code Along - Alert

Display an alert in Shiny.

__Useful links__

[rstudio.cloud/project/2615039](https://rstudio.cloud/project/2615039)

[github.com/JohnCoene/r-ladies-tunis](https://github.com/JohnCoene/r-ladies-tunis)

---
class: light

## List vs. JSON

```json
{
  boolean: true,
  string: "hello",
  vector: [1, 2, 3]
}
```

Access items

```js
json.vector
```

]

```r
list(
  boolean = TRUE,
  string = "hello",
  vector = c(1, 2, 3)
)
```

Access items

```r
list$vector
```

]

---
class: light

## Dependencies

No the luxury of calling a `library()`.

"Source" files in the `<head>` of the document.

#### HTML

```html
<head>
  
  <script src="path/to/file.js"></script>
  
  <link rel="stylesheet" href="path/to/file.css">
</head>
```

]

#### R
 
```r
tags$head(
  tags$script(src = "path/to/file.js"),
  tags$link(
    rel = "stylesheet",
    href = "path/to/file.css"
  )
)
```

]

---
class: light

# Code Along - Toast

Display a toast with [toastify.js](https://github.com/apvarun/toastify-js) (github.com/apvarun/toastify-js)

[rstudio.cloud/project/2615039](https://rstudio.cloud/project/2615039)

[github.com/JohnCoene/r-ladies-tunis](https://github.com/JohnCoene/r-ladies-tunis)

---

[john-coene.com](https://john-coene.com/)

Book: [javascript-for-r.com](https://javascript-for-r.com)

(Some) other packages: [waiter](https://waiter.john-coene.com/), [echarts4r](https://echarts4r.john-coene.com/), [cicerone](https://cicerone.john-coene.com/), [ambiorix](https://ambiorix.dev/)