Next Generation Shiny Apps with bslib

R/Medicine 2024

Garrick Aden-Buie

Welcome!

Welcome!

👋 Hi, I’m Garrick!

🖥️ garrickadenbuie.com

🦬 grrrck@fosstodon.org

About our workshop

  • 3 hours long with two breaks

  • Break-out small groups for exercises

  • Video, voice or chat

  • Questions welcome! Use chat or raise your hand.

    • * at the start, I’ll read it out loud

Code of Conduct

https://rconsortium.github.io/RMedicine_website/Attend.html

All event participants, whether they are attending an in-person event or a virtual event, are expected to behave in accordance with professional standards, with both this Code of Conduct as well as their respective employer’s policies governing appropriate workplace behavior and applicable laws.

Report issues to me in private chat or during breakout sessions.

Breakout Sessions
Pair Programming

Pair Programming

  • Driver: share your screen, writes code

  • Navigator: review, guide, look up

  • Video on encouraged

  • We’ll shuffle breakout groups each hour

Hello, bslib!

Timeline: Bootstrap + Shiny

  • Created by Twitter, Bootstrap is released in 2011.

  • Joe Cheng unveils Shiny in 2012

  • Bootstrap releases v3 in August 2013, a complete re-write.

  • Shiny moves to Bootstrap 3 in October 2014.

  • Shiny still uses Bootstrap 3.

Shiny

numericInput(
  inputId = "academic_year",
  label = "Academic Year (start)",
  value = 2012, 
  min = 1996, 
  max = 2022, 
  step = 1
)

In the browser

Raw HTML

<div>
  <label id="academic_year-label" for="academic_year">Academic Year (start)</label>
  <input id="academic_year" type="number" value="2012" min="1996" max="2022" step="1"/>
</div>

looks like this

With Bootstrap

the same HTML

<div class="form-group shiny-input-container">
  <label class="control-label" id="academic_year-label" for="academic_year">Academic Year (start)</label>
  <input id="academic_year" type="number" class="shiny-input-number form-control" value="2012" min="1996" max="2022" step="1"/>
</div>

looks like this

Bootstrap Versions

Bootstrap 3

Bootstrap 5

How bslib started

  • New and improved Bootstrap 4 and 5

  • Easy theming in any web output from R

library(shiny)

fluidPage(
  theme = bslib::bs_theme(version = 5),
  # the rest of your app, unchanged
)

bslib::bs_theme()

theme = bslib::bs_theme(version = 5, preset = "bootstrap")

bslib::bs_theme()

theme = bslib::bs_theme(version = 5, preset = "darkly")

bslib::bs_theme(preset = “shiny”)

theme = bslib::bs_theme(version = 5, preset = "shiny")

Theming from start to advanced

fluidPage(
  theme = bslib::bs_theme(
    preset = "shiny",
    primary = "#0072B2",
    success = "#009E73",
    base_font = font_google("Inter"),
    code_font = font_google("JetBrains Mono")
  )
)

fluidPage()

library(shiny)

shiny::fluidPage(
  theme = bslib::bs_theme(version = 5),
  # the rest of your app, unchanged
)

fluidPage() → page_fluid()

library(shiny)
library(bslib)

page_fluid(
  # the rest of your app, unchanged
)

Your Turn

College Scorecard Data

https://collegescorecard.ed.gov/data/

College enrollment, student aid, costs, and student outcomes from 1996-97 through 2022-23.

Two tables:

  1. school: information about each college

  2. scorecard: historical data on cost, enrollment, outcomes.

https://github.com/gadenbuie/scorecard-db

Your Turn: exercises/01_app.R

Are we all set up?

  • Help each other make sure you’re set up

Take a Shiny app and make it bslib-ier

  • From {type}Page() to page_{type}()
  • What other page types are available?
  • Try out Bootsrap/Bootswatch themes
  • Extra points: try a Sass variable

Use the app to learn about the variables in school

Check-in

Any troubles getting set up?

Questions about bslib or the data set?

Bonus: Let’s update our Shiny snippet

snippet shinyapp
    library(shiny)
    library(bslib)

    ui <- page_${1:sidebar}(
      ${0}
    )

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

    }

    shinyApp(ui, server)

https://www.garrickadenbuie.com/blog/shiny-new-bslib-snippet/