A Spoonful of JavaScript

Level Up with Shiny for R

posit::conf(2024)

2024-08-12

The 🤖 in the Room

Have you ever used a large language model like ChatGPT?
Have you used an LLM to help you write code?
Have you used an LLM to help you learn a programming language?
Have you used an LLM to write a Shiny app?
Have you used an LLM to write a workshop about Shiny?

What do LLMs do best?
```
- situation
```
When do LLMs perform poorly?
```
- situation
```

Our Task

We want to update our college comparison app to remember the colleges that the user was comparing.

We’ve decided that bookmarking is too involved, we just want the app to remember automatically.

Your Turn

I had a conversation with ChatGPT about this task.
What strategy does the 🤖 suggest? Find:
- the browser JavaScript API
- the Shiny JavaScript API
- where to put this JavaScript code in our app
- the server-side logic that connects JS ↔︎ R
What made my prompt to ChatGPT effective?

08:00

Storing values in the browser

How can you store values in the browser?
```
...
```
How can you retrieve values in the browser?
```
...
```

Try this in your own fancy JavaScript IDE: about:blank

localStorage.setItem(key, value)
// key is a string, value is a string
// value = JSON.stringify(obj)

value = localStorage.getItem(key)
JSON.parse(value)

Sending data from the browser to R

What function sends data from the browser to R?
```
...
```
What function receives data from R in the browser?
```
...
```
And how do you send data from R to the browser?
```
...
```

Shiny.setInputValue(inputId, value)

Shiny.addCustomMessageHandler(messageName, function(data) {
  // do something with data
})

session$sendCustomMessage(messageName, data)

Strategies for Success with LLMs

- Idea 1\n- Idea 2

Live Code Together

Use the chat to give our comparison app a memory.