Running list of ideas for things to expand/include for Shiny workshop winter 2023

[samanthacsik]

January 20 & 27 from 9:00am - 3:00pm

Day 1 (work only with palmerpenguins, lterdatasampler data; will have one single-file shiny app and one two-file shiny app by end of day)

• [x] What is shiny
• [x] File structure
• [x] Structure of a shiny app
• [x] What is reactivity (steps for creating reactive outputs)
• [x] Layouts (create a second app in a new subdirectory when demonstrating this)
• [x] global.R (what is it, where does it live, what should we put here)
• [x] {shinyWidgets}
• [x] includeMarkdown() for larger bodies of text
• [x] publish to shinyapps.io & other app hosting considerations
• [x] validate()
• [x] {shinycssloaders} (find other, easy-to-implement packages)v
• [x] Debugging with {reactlog}
• [x] testing with {shinytest} (may have to move to day 2)

Day 2 (import data tbd; should have one(?) shinydashboard by the end of the day, and possibly added themes to shiny apps from day 1)

• [x] importing data
• [x] /www folder
• [x] {shinydashboards}
• [x] Overview of best practices for streamlining/organizing code
• [x] UI Functions (for reducing duplication)
• [x] Server Functions (for isolation and testing)
• [x] Modules
• [x] theme customization using {bslib} (only works with shiny) and {fresh} (works with shiny and shinydashboard)
• [x] theme customization using CSS
• [x] alternatives to shiny apps (Quarto with embedded reactive output, flexdashboard)
• [x] mention Shiny UI editor (here's a video from Posit Conference 2022: https://www.youtube.com/watch?v=gYPnLiudtGU)
• [x] UX design
• [x] accessibility of apps

[samanthacsik]

DON'T INCLUDE

Not all fontawesome icons are available for use with shiny -- here's list of icons to use as of now https://fontawesome.com/v4/icons/

[samanthacsik]

Debugging options: https://shiny.rstudio.com/articles/debugging.html

[samanthacsik]

ADDED TO RESOURCES SLIDE

General shiny resources: https://debruine.github.io/shinyintro/index.html Shiny UI editor: https://rstudio.github.io/shinyuieditor/

[samanthacsik]

ADDED TO RESOURCES SLIDE

Using fontawesome icons requires a fontawesome kit -- see here: https://www.r-bloggers.com/2022/09/r-shiny-fontawesome-icons-how-to-use-them-in-your-dashboards/ (must be type tag$head)

[jamiecmontgomery]

Have not watched this but may be helpful Beyond DataViz: How to Improve the UI/UX of Your Shiny Apps: https://www.crowdcast.io/e/shiny-apps-UX-UI-design/register

[samanthacsik]

ADDED TO RESOURCES SLIDE

increasing app efficiency: https://www.r-bloggers.com/2021/06/speeding-up-r-shiny-the-definitive-guide/

[samanthacsik]

ADDED TO THEMING SECTION

Styling with CSS & Sass: https://www.rstudio.com/resources/rstudioglobal-2021/styling-shiny-with-css-and-sass-and-speeding-up-shiny-apps/

• start with short description of css (and point folks to Quarto customization workshop for more background)
• every web page uses CSS in some way (including Shiny -- by default, it uses the bootstrap library for most of it's styling) -- we can also add our own on top of it

3 ways to add CSS styling:

1. add styling directly to tags (don't use lots of these! easy to lose track of in large projects, can't resuse the same rules easily in other elements, hard to keep consistent, hard to implement large changes)

   # can add a `style` attribute to any html `tags` used in app -- let's you add CSS elements that affect that specific statement
   fluidPage(
   tags$h1("My application", 
                 style = "font-weight: 500; color: #4d3a7e"))
   )

2. add css to your header (a little bitter; allows code to be reused by using selectors; styles cannot be cached (i.e. saving them for future usage when you reopen the app later) since we're still declaring styles in the code)

   ui <- fluidPage(
   tags$head(
     tags$style(HTML("
      @import ulr('my-font.url'),
       h1 {
          font-weight: 500;
          color: #4d3a7e;
    }
   ") # END style
   ) # END head
   ) # END fluidPage

3. add style sheets inside the www directory (ideal; can be cached, all styling in one spot, multiple files can be included and allow some structure, stylesheet can be applied to multiple applications, CSS can get very complicated in large projects)

   ui <- fluidPage(
   tags$head(
     tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
   ) # END head
   ) # END fluidPage

Improving with Sass

• a CSS pre-processor (built on top of CSS)
• object oriented (whereas CSS is statement oriented)
• allows nesting (none in CSS) and variables (limited in CSS)

There is a {sass} package! The sass() function takes a sass string or file and returns a string of compiled CSS. (though I'm not sure I'll get into using the package since MEDS students have already been primed with CSS/Sass). A comparison:

Using the R package

library(sass)
sass(input = "
  $size: 50%;
  foo { margin: $size * .33; }
")

Writing sass

foo {
  margin: 16.5%;
}

[samanthacsik]

ADDED TO UX/UI SECTION

From https://engineering-shiny.org/ux-matters.html

• simplicity is gold: if possible, the main usage of the application does not require reading the manual; interfaces should be as self-explanatory as possible
• adapt a defensive programming mindset; you should always fail gracefully and informatively (e.g. provide users with a helpful error message)
• Rule of Least Surprise: in interface design, always do the least surprising thing
• make sure that if an input is necessary, it is made clear inside the app that it is (see {shinyFeedback} and also use validate()
• avoid feature-creep: the process of adding features ot the app that complicates the usage and the maintenance of the product, to the point that extreme feature-creep can lead to the product being entirely unusable and completely impossible to maintain
• too much reactivity
• too much interactivity (e.g. plotly) -- can add visual noise; do not make things interactive if there is no value in adding interactivity
• accessibility

[samanthacsik]

ADDED TO FINAL SECTION

Words of Wisdom (include somewhere in slide deck):

• oftentimes, the most time consuming part of building a shiny app is just deciding on how to present the data visually. In other words, make you data viz first (outside of shiny), refine, decide which variables you think are important to make reactive, etc. THEN, add them to shiny app
• get data in most wrangled form possible before loading it into your app
• code expands quickly. STAY ORGANIZED
• parentheses can be a pain -- use rainbow parentheses, add extra space between sections of code, ADD COMMENTS TO DENOTE START/END OF PARENTHESES
• see tips for UX/UI design above
• decide if you really need shiny at all

[samanthacsik]

Note for self on how to compile Sass to CSS -- deleting this file since I just learned you can do this more succinctly in global.R, but wanted to keep for reference:

library(sass)

sass(
  input = sass_file("R/my_sass_styles.scss"),
  #cache_options = sass_cache_options(FALSE),
  options = sass_options(
    output_style = "compressed",
    source_map_embed = TRUE),
  output = "two-file-app/www/my_sass_styles.css"
)

[samanthacsik]

Things to clean up:

• [x] figure out why rds files aren't working in example app repo
• [x] rerun all code on slides to make sure it works/makes sense
• [x] decide where to add breaks (not enough built-in yet)
• [x] add alt text where missing
• [x] session - can be used to access information and functionality relating to the session
• [x] add READMEs to each app directory
• [x] create TOC for slides
• [x] check/fix links throughout
• [x] spell check