shiny101-modular-app-blueprint.qmd

---
title: "Shiny 101: The Modular App Blueprint"
author: "Veerle van Leemput"
format:
  revealjs: 
    theme: [default, custom.scss]
    footer: "[github.com/hypebright/shinyconf2024-shiny101](https://github.com/hypebright/shinyconf2024-shiny101)"
    logo: images/logo.png
include-in-header: 
  text: |
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
highlight-style: "nord"
---

# Welcome 👋 

# Getting to know each other ✨ 

## Program

- **19:30 - 20:00** Introduction to Shiny
- **20:00 - 20:30** Hands-on: Building a Shiny App Together
- **20:30 - 20:40** Break ☕️
- **20:40 - 21:00** Introduction to Shiny modules
- **21:00 - 21:40** Hands-on: Implementing Shiny modules
- **21:40 - 21:55** Sharing, Feedback + Questions
- **21:55 - 22:00** Recap

## Learning objectives

After this workshop, you will know:

- the basics of a Shiny application
- how to make your app modular
- how to communicate between modules

You will leave this workshop with:

- a blueprint for a modular Shiny app in the form of templates

# Introduction to Shiny

## Shiny app basics

Two parts of a Shiny app:

- **UI**: User Interface
- **Server**: Server logic

They come together in a single script: `app.R`

## The app.R script

```{.r code-line-numbers="1"}
library(shiny)

ui <- fluidPage(
  "Hello, Shiny!"
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
```

## The app.R script

```{.r code-line-numbers="3-5"}
library(shiny)

ui <- fluidPage(
  "Hello, Shiny!"
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
```

## The app.R script

```{.r code-line-numbers="7-8"}
library(shiny)

ui <- fluidPage(
  "Hello, Shiny!"
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
```

## The app.R script

```{.r code-line-numbers="10"}
library(shiny)

ui <- fluidPage(
  "Hello, Shiny!"
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
```

## The ui part

```{.r code-line-numbers="3-5"}
library(shiny)

ui <- fluidPage(
  "Hello, Shiny!"
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
```

`fluidPage()` creates a Bootstrap page

## The ui part

- Bootstrap is a free front-end framework used in web development and it includes all the basic to build an app that will work in a web browser on any device. 
- It is built on **HTML**, **CSS** and **JavaScript**
- There are many version of Bootstrap, the latest being version 5, but Shiny uses version 3


## The ui part

Under the hood, every UI function is translated to HTML:

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

```{r}
#| echo: true
as.character(titlePanel("Hello, Shiny!"))
```

<br>

This HTML can have styles attached to it, either by the `style` attribute, or by a CSS class.

```{r}
#| echo: true
as.character(sidebarPanel())
```


## The ui part

To let users interact with your app, you can add **input controls**. A basic input control has:

- an `inputId`
- a `label`
- a `value`

## The ui part

For example:

```{.r}
numericInput(inputId = "number", 
             label = "Enter a number", 
             value = 0)
```
<br>
```{.r}
actionButton(inputId = "button", 
             label = "Click me")
```

## Updating the UI

When the app runs, every user gets served the same HTML from the ui.

When the user interacts with the UI, we want that HTML to **react** to the user.

The server logic uses **reactive programming**: when an input changes, all related outputs react and are updated automatically.

That is possible because these outputs are  **reactive outputs**.

## Updating the UI

Shiny has several functions that turn R objects into reactive outputs for your ui: the *Output family

Each function creates a specific type of output, for example:

| UI Function | Output type |
|----------|-------------|
| textOutput() | text |
| tableOutput() | table |
| plotOutput() | plot |
| uiOutput() | raw HTML |
: {.table .table-striped .table-hover}

## Updating the UI

Every output element needs a single argument: `outputId`- which is a simple string that needs to be **unique**.

```{.r}
textOutput(outputId = "text")
```

This `textOutput `tells Shiny where to display the object. It's a **placeholder** for what's to come.

<br>

Next step: tell Shiny how to build the object!

## The server part

The server function builds an object named **output** and this object will contain all the code needed to display the R objects in the ui

This output object is **list-like**

Each R object that you want to display has its own entry in this list, therefore the name of every output in your ui needs to match a definition in the server

```{.r}
output$text
```

## The server part

Each entry in the output list should contain a render* function. You must use render* functions that match the *Output functions:

| UI Function | Output type | Render function |
|----------|-------------|-----------------|
| textOutput() | text | renderText() |
| tableOutput() | table | renderTable() |
| plotOutput() | plot | renderPlot() |
| uiOutput() | raw HTML | renderUI() |
: {.table .table-striped .table-hover}

## The server part

```{.r code-line-numbers="3,7-8"}

ui <- fluidPage(
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  output$text <- renderText({
  })
}
```

## Using inputs

This works the same with inputs!

<br>

The server can access an object named `input` that will contain the value of all the input objects defined in the ui

<br>

This object is **list-like**, just like the output object. Each input value has its own entry in this list:

```{.r}
input$number
```

## Connecting the dots

If we combine the input and output objects, we can create a simple app that displays the square of a number 👏.

```{.r}
library(shiny)

ui <- fluidPage(
  numericInput(inputId = "number", 
               label = "Enter a number", 
               value = 0),
               
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  })
}

shinyApp(ui, server)
```

:::footer
[/templates/00_base](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/00_base.R)
:::

## Connecting the dots

An output is **eager**: it will update as soon as the input changes.

<br>

This **eagerness** is handy: you don't need to worry about updating the output when the input changes.

<br>

But what if you want to trigger the calculation only when you want?

## Connecting the dots

You could use an `actionButton` as an **event**:

```{.r code-line-numbers="8-9,15-17"}
library(shiny)

ui <- fluidPage(
  numericInput(inputId = "number", 
               label = "Enter a number", 
               value = 0),
               
  actionButton(inputId = "button", 
               label = "Click me"),
               
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
}

shinyApp(ui, server)

```

:::footer
[/templates/01_start](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/01_start.R)
:::

## Observers

So far, we used render* function to take care of our output. It’s all happening inside the app.

<br>

But sometimes, we want to reach **outside the app**: call an API, send data to a database, send debugging messages. We want to call a function for its side-effects.

<br>

We need **observers** for that!


## Observers

Observers are functions that run when their dependencies change, just like outputs.

<br>

But where **outputs** update the HTML in the user's browser, observers are called for other **side-effects**.

<br>

For example 👉

## Observers

```{.r code-line-numbers="19-21"}
library(shiny)

ui <- fluidPage(
  numericInput(inputId = "number", 
               label = "Enter a number", 
               value = 0),
               
  actionButton(inputId = "button", 
               label = "Click me"),
               
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
  
  observe({
    print(input$number^2)
  })
}

shinyApp(ui, server)

```

## Observers

```{.r code-line-numbers="21"}
library(shiny)

ui <- fluidPage(
  numericInput(inputId = "number", 
               label = "Enter a number", 
               value = 0),
               
  actionButton(inputId = "button", 
               label = "Click me"),
               
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
  
  observe({
    print(input$number^2)
  }) |> bindEvent(input$button)
}

shinyApp(ui, server)

```

## What about reactives?

Outputs and observers **do** something: update the HTML, print something, call an API, you name it.

<br>

If we want to **create** something, we need **reactives**.

## What about reactives?

**Reactives** are functions that **return a value**. You can assign them to an object and you can refer to reactives elsewhere in your app. 

<br>

You can see them as a backpack 🎒: they carry a value around and you can open it whenever you want.

## What about reactives?

When you go hiking, you pick a backpack that fits your needs. There are **different types** of backpacks that are fit **to carry different things**.

<br>

That's similar with a reactive. They carry different things:

- **reactive()**: takes an expression
- **reactiveVal()**: takes a single value
- **reactiveValues()**: takes a list of values

## What about reactives?

You can see `reactive()` as a very fancy backpack 🎒🌟. 

<br>

It can take multiple inputs, manipulate them and return something simple (a value) or complex (a plot, a table). It can even take other reactives (other backpacks) as input!


## What about reactives?

```{.r code-line-numbers="15-17,20,24"}
library(shiny)

ui <- fluidPage(
  numericInput(inputId = "number", 
               label = "Enter a number", 
               value = 0),
               
  actionButton(inputId = "button", 
               label = "Click me"),
               
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  number_squared <- reactive({
    input$number^2
  }) |> bindEvent(input$button)
  
  output$text <- renderText({
    number_squared()
  })
  
  observe({
    print(number_squared())
  })
}

shinyApp(ui, server)
```

## What about reactives?

This fancy backpack is only opened when you ask for it. It is called **lazy**.

<br>

More technical: when the dependencies of a reactive change, it doesn't re-execute right away but rather waits until it gets called by someone else.

## And reactive values?

 **reactive values** are simpler backpacks. They carry one or more value(s) that you can unpack, but also update.

<br>

You make a reactive value with `reactiveVal()` and you can update it by calling it with a new value.

<br>

You can make reactive values with `reactiveValues()` and you can update them by assigning a new value to them.

## And reactive values?

```{.r code-line-numbers="15,17-19,22,26"}
library(shiny)

ui <- fluidPage(
  numericInput(inputId = "number", 
               label = "Enter a number", 
               value = 0),
               
  actionButton(inputId = "button", 
               label = "Click me"),
               
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  number_squared <- reactiveVal(0)
  
  observe({
    number_squared(input$number^2)
  }) |> bindEvent(input$button)
  
  output$text <- renderText({
    number_squared()
  })
  
  observe({
    print(number_squared())
  })
}

shinyApp(ui, server)
```

## And reactive values?

```{.r code-line-numbers="15,17-19,22,26"}
library(shiny)

ui <- fluidPage(
  numericInput(inputId = "number", 
               label = "Enter a number", 
               value = 0),
               
  actionButton(inputId = "button", 
               label = "Click me"),
               
  textOutput(outputId = "text")
)

server <- function(input, output, session) {
  r <- reactiveValues(number_squared = 0) 
  
  observe({
    r$number_squared <- input$number^2
  }) |> bindEvent(input$button)
  
  output$text <- renderText({
    r$number_squared
  })
  
  observe({
    print(r$number_squared)
  })
}

shinyApp(ui, server)

```

## And reactive values?

You can see `reactiveValues()` as some kind of reactive mini-database. You can use it to store multiple values, retrieve them in different places, and update them. 

<br>

And since it's reactive, you can use it to **trigger other parts of your app** when one of its values changes.

<br>

Remember the `reactiveValues()` as we're going to use that later.

# And that covers the basic building blocks of your Shiny app 😮‍💨


## The hard part about Shiny

Note that the server part doesn't run line-by-line. It's a reactive environment that will run the code when input changes.

<br>

Code only reacts when it needs to, which is why it's called **reactive programming**.

<br>

This makes it hard to test your code. And it's hard to understand what's going on when you're new to Shiny!

## The hard part about Shiny

My personal top ways ways to get more insight into what's going on:

1. Use `print()` statements to see when something is happening
2. Use `browser()` to stop the code and inspect the environment (just as you can do within functions, because that is literally what `server` is!)

We're going to see these in action a little bit later.


# All about the looks 💅

## Quickly leveling up your UI

- There are many ways to make your app look instantly better
- One of them is using `bslib` which is a package that provides a modern UI toolkit for Shiny and R Markdown based on Bootstrap
- The cool thing: you can get around Shiny's default usage of Bootstrap version 3!

## Working with {bslib}

```{.r code-line-numbers="2,4-7"}
library(shiny)
library(bslib)

ui <- page_navbar(
  theme = bs_theme(version = 5),
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numericInput(inputId = "number",
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = "button",
                 label = "Click me"),
    textOutput(outputId = "text")
  )
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
}

shinyApp(ui, server)
```

:::footer
[/templates/02_bslib](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/02_bslib.R)
:::

## Working with {bslib}

```{.r code-line-numbers="4-14,17"}
library(shiny)
library(bslib)

custom_theme <- bs_theme(
  version = 5,
  bg = "#F9F9F9",
  fg = "#003f5c",
  primary = "#bc5090",
  secondary = "#58508d",
  warning = "#ffa600",
  danger = "#ff6361",
  info = "#0091d5",
  base_font = font_google("PT Sans")
)

ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numericInput(inputId = "number",
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = "button",
                 label = "Click me",
                 width = "100px"),
    textOutput(outputId = "text")
  )
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
}

shinyApp(ui, server)
```

:::footer
[/templates/02_bslib](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/02_bslib.R)
:::

## Shiny app recap

We covered:

- the ui & server part
- how to connect the two
- observers, reactives, reactive values, events

What's next?

- how to use some real data
- building your first Shiny app! 🚀 

# Hands-on: building a Shiny app together 💻

## Steps

1. Head over to [github.com/hypebright/shinyconf2024-shiny101](https://github.com/hypebright/shinyconf2024-shiny101)
2. Fork the repository to your computer
3. Open **/templates/02_bslib.R**
4. Follow along!

<br>

Need help? David and me are here to help you out! 🚀

# Break ☕️

See you in [10 minutes](https://www.bigtimer.net/?minutes=10&repeat=false)

# Shiny modules ⚙️

## What are modules?

You could call modules **special functions**.

<br>

Using functions in a Shiny app is common:

- You use functions in your UI (e.g. `value_box()`)
- You use functions in your server

<br>

That works well for code that is **completely on the ui or server side**.

## What are modules?

For code that spans both the ui and the server, you need a new technique: **modules**

<br>

A module consists of some **UI code** that works together with some **server code**

<br>

Modules are special because they create their own **namespace**: things like input and output ids are isolated from the rest of the app

## Why use modules?

There are two main reasons to work with modules:

<br>

1. Because a module creates its own **namespace**, you can write and run code in isolation. You don’t need to worry about what’s going on outside the module. And remember, ids needed to be unique!

2. Because a module is basically a **function**, it comes with all the benefits that functions have.

## What does a module look like?

A module has two parts, and is basically a mini-app:

<br>

1. **The module UI**, which generates the HTML and runs code inside the `ui()` function

2. **The module server**, which runs code inside the `server()` function

## What does a module look like?

```{.r code-line-numbers="3-13"}
library(shiny)

numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Click me"),
    textOutput(outputId = ns("text"))
  )
}

numberModServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)
  })
}

ui <- fluidPage(
  numberModUI("numbers")
)

server <- function(input, output, session) {
  numberModServer("numbers")
}

shinyApp(ui, server)

```

:::footer
[/templates/03_modules](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/03_modules.R)
:::

## What does a module look like?

```{.r code-line-numbers="3,4,6,9,11"}
library(shiny)

numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Click me"),
    textOutput(outputId = ns("text"))
  )
}

numberModServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)
  })
}

ui <- fluidPage(
  numberModUI("numbers")
)

server <- function(input, output, session) {
  numberModServer("numbers")
}

shinyApp(ui, server)

```

:::footer
[/templates/03_modules](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/03_modules.R)
:::

## What does a module look like?

```{.r code-line-numbers="15-21"}
library(shiny)

numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Click me"),
    textOutput(outputId = ns("text"))
  )
}

numberModServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)
  })
}

ui <- fluidPage(
  numberModUI("numbers")
)

server <- function(input, output, session) {
  numberModServer("numbers")
}

shinyApp(ui, server)

```

:::footer
[/templates/03_modules](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/03_modules.R)
:::

## What does a module look like?

```{.r code-line-numbers="23-29"}
library(shiny)

numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Click me"),
    textOutput(outputId = ns("text"))
  )
}

numberModServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)
  })
}

ui <- fluidPage(
  numberModUI("numbers")
)

server <- function(input, output, session) {
  numberModServer("numbers")
}

shinyApp(ui, server)

```

:::footer
[/templates/03_modules](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/03_modules.R)
:::

## Where do you put modules?

You can simple put the module functions in the `app.R` file (you call this **inline**).

<br>

Other options:

 - Put the module in a separate R script in the /R folder. **Shiny will automatically source it**.

- Put the module in a separate R script in any other folder, and source it using `source(“./my_modules/random.R”)`. 

## Nested modules

Modules are **composable**, and it may make sense to create a module that itself contains a module: this is called **nesting**

<br>

This sounds complicated, but isn’t any different compared to calling a function within another function

## Nested modules

```{.r code-line-numbers="38-53"}
library(shiny)
library(bslib)
library(DT)

custom_theme <- bs_theme(
  version = 5,
  # for themes see: https://bootswatch.com
  preset = "quartz",
  base_font = font_google("PT Sans")
)

# module 1 -------------------------------------------------------
numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Calculate"),
    textOutput(outputId = ns("text")),
    numberAnalysisModUI(ns("analysis"))
  )
}

numberModServer <- function(id) {
  moduleServer(id, function(input, output, session) {

    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)

    numberAnalysisServer("analysis")

  })
}

# module 2 -------------------------------------------------------
numberAnalysisModUI <- function(id) {
  ns <- NS(id)
  dataTableOutput(outputId = ns("table"))
}

numberAnalysisServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    # display table of squares and highlight the number
    output$table <- renderDataTable({
      squares <- 1:10
      squares <- data.frame(number = squares, square = squares^2)
      datatable(squares, rownames = FALSE)
    })
  })
}

# app ------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numberModUI("numbers")
  )
)

server <- function(input, output, session) {
  numberModServer("numbers")
}

shinyApp(ui, server)

```

:::footer
[/templates/04_nested_modules](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/04_nested_modules.R)
:::

## Nested modules

```{.r code-line-numbers="22,33"}
library(shiny)
library(bslib)
library(DT)

custom_theme <- bs_theme(
  version = 5,
  # for themes see: https://bootswatch.com
  preset = "quartz",
  base_font = font_google("PT Sans")
)

# module 1 -------------------------------------------------------
numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Calculate"),
    textOutput(outputId = ns("text")),
    numberAnalysisModUI(ns("analysis"))
  )
}

numberModServer <- function(id) {
  moduleServer(id, function(input, output, session) {

    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)

    numberAnalysisServer("analysis")

  })
}

# module 2 -------------------------------------------------------
numberAnalysisModUI <- function(id) {
  ns <- NS(id)
  dataTableOutput(outputId = ns("table"))
}

numberAnalysisServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    # display table of squares and highlight the number
    output$table <- renderDataTable({
      squares <- 1:10
      squares <- data.frame(number = squares, square = squares^2)
      datatable(squares, rownames = FALSE)
    })
  })
}

# app ------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numberModUI("numbers")
  )
)

server <- function(input, output, session) {
  numberModServer("numbers")
}

shinyApp(ui, server)

```

:::footer
[/templates/04_nested_modules](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/04_nested_modules.R)
:::

## Nested modules

```{.r code-line-numbers="61,66"}
library(shiny)
library(bslib)
library(DT)

custom_theme <- bs_theme(
  version = 5,
  # for themes see: https://bootswatch.com
  preset = "quartz",
  base_font = font_google("PT Sans")
)

# module 1 -------------------------------------------------------
numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Calculate"),
    textOutput(outputId = ns("text")),
    numberAnalysisModUI(ns("analysis"))
  )
}

numberModServer <- function(id) {
  moduleServer(id, function(input, output, session) {

    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)

    numberAnalysisServer("analysis")

  })
}

# module 2 -------------------------------------------------------
numberAnalysisModUI <- function(id) {
  ns <- NS(id)
  dataTableOutput(outputId = ns("table"))
}

numberAnalysisServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    # display table of squares and highlight the number
    output$table <- renderDataTable({
      squares <- 1:10
      squares <- data.frame(number = squares, square = squares^2)
      datatable(squares, rownames = FALSE)
    })
  })
}

# app ------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numberModUI("numbers")
  )
)

server <- function(input, output, session) {
  numberModServer("numbers")
}

shinyApp(ui, server)

```

:::footer
[/templates/04_nested_modules](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/04_nested_modules.R)
:::

## Nested modules

You can take this quite far. Let's say we build out our app to have **multiple pages**. A page on its own can be a module, and each page can have multiple components that are also modules!

<br>

A module inferno! 😉

## Dynamically calling modules

In our app, it would be cool if we could **dynamically call** the modules based on what team the user selects.

<br>

Every time the user selects a team, we want to display the corresponding team's page. Every team page basically looks the same, but with different content: **a perfect use case for modules**.

## Sharing data between modules

When working with modules, the question often arises: "how do I **share data** between modules?" 🤔 What if you do something in one module that affects another module or other part of your app?

<br>

There are a few ways to do this, and we'll be looking at one way to which you already got introduced: **reactive values**.

## Sharing data between modules

Remember that we talked about `reactiveValues` as a **mini-database** that can store values and can be accessed from anywhere in your app?

<br>

We can use this concept to store data that we want to share between modules. And we're calling this database `r`.

<br>

This is referred to as the **"stratégie du petit r"** 🤓

## Sharing data between modules

```{.r code-line-numbers="76-77"}
library(shiny)
library(bslib)
library(DT)

custom_theme <- bs_theme(
  version = 5,
  # for themes see: https://bootswatch.com
  preset = "quartz",
  base_font = font_google("PT Sans")
)

# module 1 -------------------------------------------------------
numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Calculate"),
    textOutput(outputId = ns("text")),
    numberAnalysisModUI(ns("analysis"))
  )
}

numberModServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {

    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)

    observe({
      r$number <- input$number
      r$button <- input$button
    })

    numberAnalysisServer("analysis", r = r)

  })
}

# module 2 -------------------------------------------------------
numberAnalysisModUI <- function(id) {
  ns <- NS(id)
  dataTableOutput(outputId = ns("table"))
}

numberAnalysisServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {
    # display table of squares and highlight the number
    output$table <- renderDataTable({
      req(r$number > 0)
      squares <- 1:(r$number + 5)
      squares <- data.frame(number = squares, square = squares^2)
      datatable(squares, rownames = FALSE, selection = "none") |>
        formatStyle(columns = "number",
                    target = "row",
                    border = styleEqual(r$number, "3px"))
    }) |> bindEvent(r$button)
  })
}

# app ------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numberModUI("numbers")
  )
)

server <- function(input, output, session) {

  r <- reactiveValues(number = NULL,
                      button = NULL)

  numberModServer("numbers", r = r)
}

shinyApp(ui, server)

```

:::footer
[/templates/05_sharing_data](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/05_sharing_data.R)
:::

## Sharing data between modules

```{.r code-line-numbers="79"}
library(shiny)
library(bslib)
library(DT)

custom_theme <- bs_theme(
  version = 5,
  # for themes see: https://bootswatch.com
  preset = "quartz",
  base_font = font_google("PT Sans")
)

# module 1 -------------------------------------------------------
numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Calculate"),
    textOutput(outputId = ns("text")),
    numberAnalysisModUI(ns("analysis"))
  )
}

numberModServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {

    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)

    observe({
      r$number <- input$number
      r$button <- input$button
    })

    numberAnalysisServer("analysis", r = r)

  })
}

# module 2 -------------------------------------------------------
numberAnalysisModUI <- function(id) {
  ns <- NS(id)
  dataTableOutput(outputId = ns("table"))
}

numberAnalysisServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {
    # display table of squares and highlight the number
    output$table <- renderDataTable({
      req(r$number > 0)
      squares <- 1:(r$number + 5)
      squares <- data.frame(number = squares, square = squares^2)
      datatable(squares, rownames = FALSE, selection = "none") |>
        formatStyle(columns = "number",
                    target = "row",
                    border = styleEqual(r$number, "3px"))
    }) |> bindEvent(r$button)
  })
}

# app ------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numberModUI("numbers")
  )
)

server <- function(input, output, session) {

    r <- reactiveValues(number = NULL,
                        button = NULL)

  numberModServer("numbers", r = r)
}

shinyApp(ui, server)

```

:::footer
[/templates/05_sharing_data](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/05_sharing_data.R)
:::

## Sharing data between modules

```{.r code-line-numbers="26,33-36,38"}
library(shiny)
library(bslib)
library(DT)

custom_theme <- bs_theme(
  version = 5,
  # for themes see: https://bootswatch.com
  preset = "quartz",
  base_font = font_google("PT Sans")
)

# module 1 -------------------------------------------------------
numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Calculate"),
    textOutput(outputId = ns("text")),
    numberAnalysisModUI(ns("analysis"))
  )
}

numberModServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {

    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)

    observe({
      r$number <- input$number
      r$button <- input$button
    })

    numberAnalysisServer("analysis", r = r)

  })
}

# module 2 -------------------------------------------------------
numberAnalysisModUI <- function(id) {
  ns <- NS(id)
  dataTableOutput(outputId = ns("table"))
}

numberAnalysisServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {
    # display table of squares and highlight the number
    output$table <- renderDataTable({
      req(r$number > 0)
      squares <- 1:(r$number + 5)
      squares <- data.frame(number = squares, square = squares^2)
      datatable(squares, rownames = FALSE, selection = "none") |>
        formatStyle(columns = "number",
                    target = "row",
                    border = styleEqual(r$number, "3px"))
    }) |> bindEvent(r$button)
  })
}

# app ------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numberModUI("numbers")
  )
)

server <- function(input, output, session) {

    r <- reactiveValues(number = NULL,
                        button = NULL)

  numberModServer("numbers", r = r)
}

shinyApp(ui, server)

```

:::footer
[/templates/05_sharing_data](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/05_sharing_data.R)
:::

## Sharing data between modules

```{.r code-line-numbers="49,53,54,57-60"}
library(shiny)
library(bslib)
library(DT)

custom_theme <- bs_theme(
  version = 5,
  # for themes see: https://bootswatch.com
  preset = "quartz",
  base_font = font_google("PT Sans")
)

# module 1 -------------------------------------------------------
numberModUI <- function(id) {
  ns <- NS(id)
  tagList(
    numericInput(inputId = ns("number"),
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = ns("button"),
                 label = "Calculate"),
    textOutput(outputId = ns("text")),
    numberAnalysisModUI(ns("analysis"))
  )
}

numberModServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {

    output$text <- renderText({
      input$number^2
    }) |> bindEvent(input$button)

    observe({
      r$number <- input$number
      r$button <- input$button
    })

    numberAnalysisServer("analysis", r = r)

  })
}

# module 2 -------------------------------------------------------
numberAnalysisModUI <- function(id) {
  ns <- NS(id)
  dataTableOutput(outputId = ns("table"))
}

numberAnalysisServer <- function(id, r) {
  moduleServer(id, function(input, output, session) {
    # display table of squares and highlight the number
    output$table <- renderDataTable({
      req(r$number > 0)
      squares <- 1:(r$number + 5)
      squares <- data.frame(number = squares, square = squares^2)
      datatable(squares, rownames = FALSE, selection = "none") |>
        formatStyle(columns = "number",
                    target = "row",
                    border = styleEqual(r$number, "3px"))
    }) |> bindEvent(r$button)
  })
}

# app ------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numberModUI("numbers")
  )
)

server <- function(input, output, session) {

  r <- reactiveValues(number = NULL,
                      button = NULL)

  numberModServer("numbers", r = r)
}

shinyApp(ui, server)

```

:::footer
[/templates/05_sharing_data](https://github.com/hypebright/shinyconf2024-shiny101/blob/main/templates/05_sharing_data.R)
:::

# Hands on: modules and sharing data 😎

## Your Shiny journey starts here

You've learned:

- how to create a **Shiny app**
- how to use **inputs, outputs, observers and reactives**
- how to use **data**
- how to use **modules**
- how to **share data** between modules

:::footer
[Follow me on LinkedIn 🙋🏼‍♀️](https://www.linkedin.com/in/veerlevanleemput/)
:::

## Your Shiny journey starts here

Now it's up to you to put this knowledge into practice. Remember to **have fun** and enjoy the process of learning Shiny! 🚀

<br>

Want to keep learning? Check out the [ProductioniZing Shiny Course](https://athlyticz.com/shiny-ii) with yours truly as course instructor! 🎉👉🏻 **https://athlyticz.com/shiny-ii**


:::footer
[Follow me on LinkedIn 🙋🏼‍♀️](https://www.linkedin.com/in/veerlevanleemput/)
:::

# Sharing + Questions 💪🏻

:::footer
[Follow me on LinkedIn 🙋🏼‍♀️](https://www.linkedin.com/in/veerlevanleemput/)
:::

# Thank you 👋

:::footer
[Follow me on LinkedIn 🙋🏼‍♀️](https://www.linkedin.com/in/veerlevanleemput/)
:::