anatomy.Rmd

---
title: "Shiny Anatomy"
description: |
  The guts and connective tissue
output: 
  distill::distill_article:
    toc: true
    toc_float: true
    toc_depth: 4
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE, eval = FALSE)
```
Start with file: `intro-shiny/babynames/00-anatomy/app-baby-00.R`

A Shiny app generally consists of three parts: 

1. the **user interface** (UI):  what the user sees in the browser and interacts with (input)
2. the **server**: processes the user's input to create and send back for display (output)
3. and a place for **global** variables: things that both the UI and server have access to

# Global

In a single file app, packages and global variables can be loaded at the top of the script.

```{r}
library(shiny)
library(tidyverse)
library(here)

df <- data.table::fread(here('data', 'babynames.csv')) %>% as_tibble()
```

# UI & Server

The UI is comprised of R functions that will ultimately generate HTML--a markup language that structures and presents content for the web.   

```{r}
ui <- fluidPage(
  
  # static elements in the UI
  titlePanel("U.S. Baby Names"),
  p("Source:", 
    tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
           "Social Security Administration"))
)
```

Store elements of your UI inside `fluidPage()` separated by commas. You can use any of the following methods to build the UI:  
  
  - Shiny UI functions (e.g. `titlePanel()`)
  - Reference HTML tags using `tag$` as a prefix (e.g `tag$img()`). 
    - For a list of HTML tags: `names(tags)`
    - The most common tags are functions themselves and don't require the prefix (e.g. `p()`, `h1()`, etc.)
  - raw HTML within the wrapper `html()`
  
## Outputs & Render

Functions ending in `*Output()`, creates space(s) in the UI for R outputs, such as tables and plots. However, the UI can't process and display R output by itself. It requires help from the server.  

```{r}
ui <- fluidPage(
  
  titlePanel("U.S. Baby Names"),
  p("Source:", 
    tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
           "Social Security Administration")),
  
  # a place to display our data frame as a table. Its ID is 'main_table'
  tableOutput("main_table")
  
)

```

For every `*Output()` there must be a compatible `render*()` in the server. They work as pairs, connected by the unique name of the output, to add R output to the UI.

```{r}
server <- function(input, output) {
  
  # render the r object `df` to the space called, 'main_table'.
  output$main_table <- renderTable({
    df %>% slice(1:20)
    })
}
```

The server is one large function that passes in `input`s and `output`s (and depending on what you're doing, a `session` argument). `output` is inherent in Shiny--it is a list-like object referencing the outputs in the UI and additional code required to update each output object[^1].

[^1]: [https://shiny.rstudio.com/tutorial/written-tutorial/lesson4/](https://shiny.rstudio.com/tutorial/written-tutorial/lesson4/)

## Inputs

What makes Shiny interactive are inputs. Input widgets such as text boxes, checkboxes, dropdown menus, buttons, and [many others](https://shiny.rstudio.com/gallery/widget-gallery.html), collect values from the user.

Similar to `*Output()`, inputs also require a unique name. The unique `inputID` is what connects the front-end to the back-end. 

```{r}
ui <- fluidPage(
  
    titlePanel("U.S. Baby Names"),
    p("Source:", 
      tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
             "Social Security Administration")),
    
    # A text box to enter a name. Its ID is 'name'.
    textInput("name", 
              label = "Enter name",
              placeholder = "Jane"),
    
    tableOutput("main_table")
  
)
```

In this example, we collect the user's input value from `textInput()` and display it in the output area called `name_entered`. 

```{r}
ui <- fluidPage(
  
    titlePanel("U.S. Baby Names"),
    p("Source:", 
      tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
             "Social Security Administration")),
    
    textInput("name", 
              label = "Enter name",
              placeholder = "Jane"),
    
    # Display the name that was entered in textInput
    textOutput("name_entered"),
    
    tableOutput("main_table")
  
)
```

Server-side, reference the input value with `input$` as a prefix and the unique name of the input widget. `input` like `output` is inherent to Shiny. It is a list-like object containing all inputIDs from the UI.

```{r}
server <- function(input, output) {
  
  # render the textInput to the designated output
  output$name_entered <- renderText({
    c("You entered:", input$name)
  })
  
  output$main_table <- renderTable({
    df %>% slice(1:20)
    })
  
   
}
```