---
title: "A Spoonful of JavaScript"
subtitle: Level Up with Shiny for R
author: <code>posit::conf(2024)</code>
date: 2024-08-12

format:
  utopia-slides-revealjs:
    html-math-method: plain
    revealjs-url: slides/assets/reveal.js-4.5.0
    slide-level: 2
    # chalkboard: true
    theme:
      - slides.scss
      - assets/code-blocked.scss
    css:
      - ../auto-dark-mode.css

revealjs-plugins:
  - utopia-slides

# filters:
#   - webr

webr:
  show-startup-message: false

editor:
  render-on-save: true
---

# The 🤖 in the Room {.middle}

## 

* 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?

  {{< partial ../partials/content-editable-code.html text="- situation" >}}

* When do LLMs perform poorly?

  {{< partial ../partials/content-editable-code.html text="- 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](https://mastering-shiny.org/action-bookmark.html)
is too involved, 
we just want the app to remember automatically.

## Your Turn {.slide-your-turn}

1. I had [a conversation with ChatGPT](../workshop-06-chat.qmd) 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 &harr; R

2. What made my prompt to ChatGPT **effective**?

{{< countdown 08:00 bottom="2rem" right="2rem" >}}

## Storing values in the browser

::: incremental
* How can you store values in the browser?

  {{< partial ../partials/content-editable-code.html text="..." >}}

* How can you retrieve values in the browser?

  {{< partial ../partials/content-editable-code.html text="..." >}}
:::

::: fragment
Try this in your own fancy JavaScript IDE: `<a href="about:blank" target="_blank">about:blank</a>`{=html}
:::

::: notes
```js
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

::: incremental
* What function sends data from the browser to R?

  {{< partial ../partials/content-editable-code.html text="..." >}}

* What function receives data from R in the browser?

  {{< partial ../partials/content-editable-code.html text="..." >}}

* And how do you send data from R to the browser?

  {{< partial ../partials/content-editable-code.html text="..." >}}
:::

::: notes
```js
Shiny.setInputValue(inputId, value)

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

```r
session$sendCustomMessage(messageName, data)
```
:::

## Strategies for Success with LLMs

{{< partial ../partials/content-editable-code.html text="- Idea 1\n- Idea 2" >}}

## Live Code Together

Use the chat to give our comparison app a memory.
