introduction_to_shiny_modules.html

<!DOCTYPE html>
<html lang="" xml:lang="">
  <head>
    <title>Structure your app</title>
    <meta charset="utf-8" />
    <meta name="author" content="Jonas Hagenberg" />
    <link rel="stylesheet" href="xaringan-themer.css" type="text/css" />
  </head>
  <body>
    <textarea id="source">
class: center, middle, inverse, title-slide

# Structure your app
## Introduction to Shiny modules
### Jonas Hagenberg
### useR!2021
### 07.07.2021

---


class: inverse, center, middle

# Better shiny code

???

- who doesn't know it? your app.R files gets longer and longer; you need to
write code repeatedly; you'd like to use this nifty functionality from the one
app you've written half a year ago in your current app...
- I'll show you how to use modules to solve these problems
- first: recap of reactive programming, then introduction to modules, pass
values to modules &amp; return values, dynamically generate modules
- please ask questions in between, you can use the feature "raise hand"

---

class: inverse, center
# Your shiny skills
&lt;br/&gt;&lt;br/&gt;
&lt;br/&gt;&lt;br/&gt;
&lt;br/&gt;&lt;br/&gt;
beginner --------------------------------------------------------------------------------------- expert

---

# Recap: reactive programming
- usual way in `R`: procedural


```r
n &lt;- 1
result &lt;- 1 + n
n &lt;- 2
result &lt;- 1 + n
```

`\(\rightarrow\)` tell what to do and when

--

- *reactive programming*: define how to do something

---

# `reactive`s
- define a rule how something is calculated


```r
result &lt;- reactive({
  1 + input$n
})
```

--

- one defines rules how code is executed
- updates itself when a reactive value is changed (lazy evaluation)
- can think of a homework assignment


```r
latest_homework &lt;- reactive({
  # do the homework on input$page
})
```

???

the teacher will tell the students on which page they have to do the
homework, the students don't have to check by themselves and won't do anything
until the teacher changes input$page

---

# `observe`/`observeEvent`
- monitor one/several reactive values
- reexecute the code when something changed
- can think of a student checking if the teacher is approaching


```r
observeEvent(input$lookout, {
  # all students back to their place
})
```

---

# Comparison
`reactive()`          | `observeEvent()`
--------------------- | ---------------------
Callable              | Not callable
Returns a value       | No return value
Lazy                  | Eager

- action with side effect: `observeEvent()`
- calculation with return value: `reactive()`

.footnote[
***
[1] introduction to reactivity: https://www.rstudio.com/resources/shiny-dev-con/reactivity-pt-1-joe-cheng/
]

???

taken from Joe Cheng's reactivity talk, still good introduction

---

# Ways to reduce code complexity

- use a style guide (e.g. tidyverse style guide)

--

- use meaningful names, e.g. `ns` &lt;  `new_students` &lt; `table_new_students`

--

- use meaningful comments (why did you do something this way?), e.g. when you
define in `renderDT` which columns are editable by its column number, specify
the column names in the comment

--

- code reuse -&gt; write functions

--

- document the functions -&gt; let you help you by `roxygen2`

--

- don't put too much functionality into one function/`reactive`/`render*` call

--

- use modules

---

# What are Shiny modules?

.center[![An image of a circuit board with some electronic components and a connector on the left, as well as buttons and a display on the right.](images/complete_circuitboard.svg)]

---

## Split your code up
.center[![A diagram; on the left: a purple rectangle that stands for the app.R which is separated into ui and server areas; in the middle: an orange rectangle that stands for the module code which is separated into ui and server areas; on the right a purple rectangle that denotes the app.R with ui and server areas, with the orange module ui in the app ui area and the orange module server in the app server area](images/app_to_module.svg)]

???

- split up the code into several parts with both ui and server parts and manage
the modules from the main app
- can think of it as a "mini shiny app" with a few additional nuts and bolts to
make it work

---

## General structure
main app:
.pull-left[

```r
# define the UI part
ui &lt;- fluidPage(
  # other UI elements
  # ...
  # module UI
* module_UI(id = "id_1")
)

# define the server part
server &lt;- function(input, output,
                   session) {
  # other logic
  # ...
  # module logic
* module_server(id = "id_1")
}

shinyApp(ui, server)
```
]

---

## General structure
main app:
.pull-left[

```r
# define the UI part
ui &lt;- fluidPage(
  # other UI elements
  # ...
  # module UI
  module_UI(id = "id_1")
* module_UI(id = "id_2")
)

# define the server part
server &lt;- function(input, output,
                   session) {
  # other logic
  # ...
  # module logic
  module_server(id = "id_1")
* module_server(id = "id_2")
}

shinyApp(ui, server)
```
]

.pull-right[
&lt;img src="images/several_modules.svg" width=70%&gt;
]

???

- here you see the UI and server part of the module being called.
The code within a module can be reused by calling it several times with different IDs
- the IDs define the namespace for the module; I will talk about this in a minute

---

## Module structure

```r
# define the UI part
module_UI &lt;- function(id) {
  ns &lt;- NS(id)
  
  tagList(
    # your UI elements here
  )
}

# define the server part
module_server &lt;- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      # your logic here
    }
  )
}
```

???

- this is what the scaffold of a module looks like
- a `tagList` creates a HTML tag object out of other R code/elements that
constitute a HTML tag object
- is needed so that several HTML tag objects are correctly translated in HTML
from the R code
- you could also use other high level UI defining elements, e.g. 

---

## Module structure

```r
# define the UI part
module_UI &lt;- function(id) {
* ns &lt;- NS(id)
  
  tagList(
    # your UI elements here
  )
}

# define the server part
module_server &lt;- function(id) {
* moduleServer(
    id,
    function(input, output, session) {
      # your logic here
    }
  )
}
```

???

here you see the setup for the namespacing

---

## Namespacing - 1

- all IDs in a shiny app need to be unique

--

- use namespaces to make ID names unique for every module instance

--

- known from packages, e.g. `dplyr::filter` vs. `stats::filter`

--

- `ns &lt;- NS(id)` generates a function that assigns a namespace for every module
instance based on its `id`

```r
ns &lt;- NS("my_id")
ns("selected_col")
# my_id-selected_col
```

???

- namespace: can basically think of it as a named room that makes it possible to
reuse names, e.g. room 1 Jonas and room 2 Jonas
- now this is needed for every instance (different id) of a module

---

## Namespacing - 2

- in the `ui` part all `inputId`s/`outputId`s need to be wrapped with `ns`


```r
module_UI &lt;- function(id) {
  ns &lt;- NS(id)
  
  tagList(
    actionButton(
*     inputId = ns("start_calculation"),
      label = "calculate"
    )
  )
}
```

--

- in the `server` part **no** extra work

---
class: inverse, center, middle

### Livecoding: my first Shiny app

???

- the `input` in the module is in the namespace of the module (but you don't)
have to write it
- it is different from the `input` you use in the main app


---

## Input values - 1

To input values into a module, just add arguments to the `ui` or `server` function


```r
*calculate_UI &lt;- function(id, button_label) {
 ns &lt;- NS(id)
  
  tagList(
    actionButton(
      inputId = ns("calculate"),
      label = paste0("calculate ", button_label)
    )
  )
}
```

---

## Input values - 2


```r
*table_server &lt;- function(id, data) {
  moduleServer(
    id,
    function(input, output, session) {
      output$table_1 &lt;- renderTable({
        data
      })
    }
  )
}
```

--

How to pass *reactive objects* and return values see more later

???

later I will go into more detail about how to communicate with modules

---

## When to use modules?

- you need **both** the `ui` and `server` part

--

- you want to test parts of your reactivity with `testServer`

--

- if you want to encapsulate code that only lives on the `ui` side or `server`
side, simple functions are fine

???

while for `server` code, it's easier to write functions that don't have `reactive`s
as inputs/outputs, otherwise it can get a bit complicated

---
class: inverse, center, middle

### Exercise 1: write your first module

???

best way is when one person can share their screen and the group does the
exercise together

---

# Module communication

- pass `reactive`s as inputs to modules
- return `reactive`s as output of modules

---

## `reactive` inputs - 1
What's wrong with this?

```r
module_server &lt;- function(id, result) {
  moduleServer(
    id,
    function(input, output, session) {
      output$text &lt;- renderText({result})
    }
  )
}

server &lt;- function(input, output, session) {
  test &lt;- reactiveVal(1)
  observeEvent(input$add, {
    test(test() + 1)
  })
  module_server(id = "my_id", result = test())
}
```

---

## `reactive` inputs - 1
What's wrong with this?

```r
module_server &lt;- function(id, result) {
  moduleServer(
    id,
    function(input, output, session) {
      output$text &lt;- renderText({result})
    }
  )
}

server &lt;- function(input, output, session) {
  test &lt;- reactiveVal(1)
  observeEvent(input$add, {
    test(test() + 1)
  })
* module_server(id = "my_id", result = test())
}
```

---

## `reactive` inputs - 2
.center[Always input **unevaluated** reactive values into modules!]

???

I can't stress this enough, if you only take one message with you from the
tutorial, then this!

---

## `reactive` inputs - 3


```r
server &lt;- function(input, output, session) {
  test &lt;- reactiveVal(1)
  morevals &lt;- reactiveValues(test = 1)
  
  module_server(id = "id_1", result = test)   # works
  module_server(id = "id_2", result = test()) # doesn't work
  
  module_server(id = "id_3", result = morevals)      # works
  module_server(id = "id_4", result = morevals$test) # doesn't work
  
  module_server(id = "id_5",
                result = reactive({input$test}))  # works
  module_server(id = "id_6", result = input$test) # doesn't work
  
}
```


???

- reactives are just functions, and when you evaluate them they determine their
current value (therefore you need the brackets)
- this means that just input the name of the reactive without the brackets
- `input$name` is a special case

---

## `reactive` inputs - 4
You need to correctly evaluate the reactive value in the module:


```r
# reactiveVal
module_server &lt;- function(id, result) {
  moduleServer(
    id,
    function(input, output, session) {
*     output$text &lt;- renderText({result()})
    }
  )
}

server &lt;- function(input, output, session) {
  test &lt;- reactiveVal(1)
  observeEvent(input$add, {
    test(test() + 1)
  })
* module_server(id = "my_id", result = test)
}
```

---

## `reactive` inputs - 5
You need to correctly evaluate the reactive value in the module:


```r
# reactiveValues
module_server &lt;- function(id, result) {
  moduleServer(
    id,
    function(input, output, session) {
*     output$text &lt;- renderText({result$test})
    }
  )
}

server &lt;- function(input, output, session) {
  morevals &lt;- reactiveValues(test = 1)
  observeEvent(input$add, {
    morevals$test &lt;- morevals$test + 1
  })
* module_server(id = "my_id", result = morevals)
}
```

---

## `reactive` inputs - 6
You need to correctly evaluate the reactive value in the module:


```r
# input
module_server &lt;- function(id, result) {
  moduleServer(
    id,
    function(input, output, session) {
*     output$text &lt;- renderText({result()})
    }
  )
}

server &lt;- function(input, output, session) {

* module_server(id = "my_id", result = reactive({input$test}))
}
```

---
class: inverse, center, middle

### Exercise 2: reactive inputs

---

## Output values from modules - 1

Use `return` in the module and assign the value in the calling environment:


```r
module_server &lt;- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      module_val &lt;- reactiveVal(10)
      # at the end of your module server code:
*     return(module_val)
    }
  )
}

server &lt;- function(input, output, session) {

* res_from_module &lt;- module_server(id = "my_id")
* output$text &lt;- renderText({res_from_module()})
}
```

Again: only return **unevaluated** `reactive`s

???

- the same as for inputs: reactives needs to be unevaluated
- put the `return` at the end of your module server code

---

## Output values from modules - 2

- for more return values use `list`
- elements from `input` need to be wrapped in `reactive`


```r
module_server &lt;- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      return(
        list(
*         a = reactive({input$a}),
*         b = reactive({input$b})
        ))
    }
  )
}
server &lt;- function(input, output, session) {
  
* res_from_module &lt;- module_server(id = "my_id")
  output$text &lt;- renderText({
*   res_from_module$a() + res_from_module$b()
  })
}
```

---
class: inverse, center, middle

### Exercise 3a/b/c: reactive outputs
Choose 3a and then 3b for an introduction, choose 3c if you already feel
confident about the concepts.

---
class: inverse, center, middle

# Break

---

# Dynamically add modules

- need to add both `server` and `ui` parts
- in `observeEvent`:
  - call module server function
  - add module ui with `insertUI`
- `insertUI` adds a `ui` part to a certain place on the page


```r
server &lt;- function(input, output, session) {
  observeEvent(input$add_module, {
*   module_server(id = paste0("id_", input$add_module))
    insertUI(
*     selector = "#add_here",
*     ui = module_UI(id = paste0("id_", input$add_module))
    )
  })
}
```


???

- `insertUI` needs a selector where the UI gets added -&gt; more on next slide 
- the easiest part is to place a `div` with an `id` in the main app `ui` (see exercise)

---

## `insertUI`/`removeUI`

- the `selector` tells where to add the UI
- shiny uses jQuery -&gt; jQuery selector syntax
- easiest: `#myid` where `myid` is the `id` of a HTML element, e.g. from `fluidPage`
or extra `div(id = "myid")` in the UI
- can make sense to wrap the complete module UI in a `div` instead of `tagList`:

```r
module_UI &lt;- function(id) {
  ns &lt;- NS(id)
  div(
    id = id,
    # your UI elements here
  )
}
```

- `where`: where to place the UI relative to the selector

???

- tell the functions where to add the UI
- for modules I find it the easiest to define a `div` in the main app where
the modules are added
- wrap module UI in `div` so that the complete UI can be accessed by the UI
(important for removal)
- important: `removeUI` does not remove any observers registered from the module
 code which can be a performance problem if too many modules were added
- would need more sophisticated methods for this, don't have time to address it

---
class: inverse, center, middle

### Exercise 4: dynamically add modules
### Exercise 5: dynamically remove modules

---

## Store outputs of generated modules

- return unevaluated reactives from module
- store them in a `reactiveValues` object (works like a list)
- evaluate every list entry


```r
server &lt;- function(input, output, session) {
* mod_results &lt;- reactiveValues()
  observeEvent(input$add_module, {
    current_id &lt;- paste0("id_", input$add_module)
*   mod_results[[current_id]] &lt;- module_server(id = current_id)
    insertUI(
      selector = "#add_here",
      ui = module_UI(id = current_id)
    )
  })
  
  test &lt;- reactive({
*   lapply(reactiveValuesToList(mod_results),
*          function(current_module_output) {
*            current_module_output()
           })
  })
}
```


???

- I think that this solution is not optimal, but haven't found anything else
that works so far
- I have an example of a complete app in the examples folder

---

# Nesting

- you can &amp; should nest modules
  - code reuse
  - modules that define bigger chunks of your app
- module UI calls within another module needs `ns`


```r
outer_module_UI &lt;- function(id) {
  ns &lt;- NS(id)
  tagList(
*   inner_module_UI(id = ns("my_id"))
  )
}
```


???

- nesting is good when you have some functionality you want to use in several
parts/modules
- create modules that include bigger chunks of your app (e.g. a tab/page), then
you can have other modules in this module
- SHOW example app

---

# Where does a module live?

- in `app.R` just above `ui`/`server`
- in an extra folder, `source` the scripts in the main app before calling the
main `ui`/`server` functions
- in a package

---

## API change - 1

Prior to `shiny` 1.5.0 there was a different way to write &amp; call the `server` part

--

- current:

```r
module_server &lt;- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      output$text &lt;- renderText({"This is a new module."})
    }
  )
}

server &lt;- function(input, output, session) {
* module_server(id = "my_new_module")
}
```

---

## API change - 2

- old:

```r
module_server &lt;- function(input, output, session) {
  output$text &lt;- renderText({"This is an old module."})
}

server &lt;- function(input, output, session) {
* callModule(module_server, id = "my_old_module")
}
```

---

## `renderUI`  within a module

- usually no namespaceing within the module `server` needed
- exemption: `renderUI`
- access the `ns` function from the `session` object


```r
module_server &lt;- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
*     ns &lt;- session$ns
      output$column_UI &lt;- renderUI({
        selectInput(
*         inputId = ns("column"),
          label = "show column",
          choices = colnames(mtcars)
        )
      })
    }
  )
}
```

---

# What should be a module?

--

- something you repeat often (and needs UI &amp; server)

--

- parts where the reactivity should be tested separately

--

- large self-contained parts of an app (e.g. a tab)

--

- don't wrap single UI elements in a module

---

# Summary

- don't forget `ns` in the UI

--

- always input/output **unevaluated** reactives (if something should react)

--

- to dynamically add modules: `insertUI`/`removeUI`

---
class: inverse, middle, center

# Questions?
    </textarea>
<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create({
"highlightStyle": "github",
"highlightLines": true,
"countIncrementalSlides": false
});
if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
  window.dispatchEvent(new Event('resize'));
});
(function(d) {
  var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
  if (!r) return;
  s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
  d.head.appendChild(s);
})(document);

(function(d) {
  var el = d.getElementsByClassName("remark-slides-area");
  if (!el) return;
  var slide, slides = slideshow.getSlides(), els = el[0].children;
  for (var i = 1; i < slides.length; i++) {
    slide = slides[i];
    if (slide.properties.continued === "true" || slide.properties.count === "false") {
      els[i - 1].className += ' has-continuation';
    }
  }
  var s = d.createElement("style");
  s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
  d.head.appendChild(s);
})(document);
// delete the temporary CSS (for displaying all slides initially) when the user
// starts to view slides
(function() {
  var deleted = false;
  slideshow.on('beforeShowSlide', function(slide) {
    if (deleted) return;
    var sheets = document.styleSheets, node;
    for (var i = 0; i < sheets.length; i++) {
      node = sheets[i].ownerNode;
      if (node.dataset["target"] !== "print-only") continue;
      node.parentNode.removeChild(node);
    }
    deleted = true;
  });
})();
(function() {
  "use strict"
  // Replace <script> tags in slides area to make them executable
  var scripts = document.querySelectorAll(
    '.remark-slides-area .remark-slide-container script'
  );
  if (!scripts.length) return;
  for (var i = 0; i < scripts.length; i++) {
    var s = document.createElement('script');
    var code = document.createTextNode(scripts[i].textContent);
    s.appendChild(code);
    var scriptAttrs = scripts[i].attributes;
    for (var j = 0; j < scriptAttrs.length; j++) {
      s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
    }
    scripts[i].parentElement.replaceChild(s, scripts[i]);
  }
})();
(function() {
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
      links[i].target = '_blank';
    }
  }
})();
// adds .remark-code-has-line-highlighted class to <pre> parent elements
// of code chunks containing highlighted lines with class .remark-code-line-highlighted
(function(d) {
  const hlines = d.querySelectorAll('.remark-code-line-highlighted');
  const preParents = [];
  const findPreParent = function(line, p = 0) {
    if (p > 1) return null; // traverse up no further than grandparent
    const el = line.parentElement;
    return el.tagName === "PRE" ? el : findPreParent(el, ++p);
  };

  for (let line of hlines) {
    let pre = findPreParent(line);
    if (pre && !preParents.includes(pre)) preParents.push(pre);
  }
  preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted"));
})(document);</script>

<script>
slideshow._releaseMath = function(el) {
  var i, text, code, codes = el.getElementsByTagName('code');
  for (i = 0; i < codes.length;) {
    code = codes[i];
    if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
      text = code.textContent;
      if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
          /^\$\$(.|\s)+\$\$$/.test(text) ||
          /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
        code.outerHTML = code.innerHTML;  // remove <code></code>
        continue;
      }
    }
    i++;
  }
};
slideshow._releaseMath(document);
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src  = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
  if (location.protocol !== 'file:' && /^https?:/.test(script.src))
    script.src  = script.src.replace(/^https?:/, '');
  document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
  </body>
</html>