Shiny

• {Shiny} is about 10 years old 😲😲😲.
• Today, many tools can make your apps shining.
• Let's review some of them ...

What I will share today

From the simplest app ... 👶

Is this a Shiny app ❓

What's the difference ❓

• 111 lines of CSS.

• 29 lines of JavaScript code.

• 2 png images (dj gear + rotating wheel).

• 36 lines of R code ({wavesurfer} htmlWidget).

• Few custom HTML tags.

What you'll learn today

What is CSS?

CSS stands for Cascading Style Sheets,

selector {
  property: value;
}Copy Code

tags$style(
  "p {
    color: red;
   }
  "
)Copy Code

But CSS becomes messy 🗑

• Easy to repeat yourself.
• Difficult to read and maintain: 🍝 spaghetti 🍝.
• It's just a mess ...

Tidy your CSS with Sass 🧹

• Sass = Syntactically Awesome Style Sheets.
• Programmable: variables, functions, loops, operators, modules, ...
• Modern web development workflow.
• DRY programming.
• Will motivate you to learn more CSS.

install.packages("sass")Copy Code

{sass} in action

library(sass)
rule1 <- ".class-1{ color: $color; }"
rule2 <- ".class-2{ background-color: $color; }"
sass(input = list(color = "purple", rule1, rule2))Copy Code

#> /* CSS */
#> .class-1 {
#>   color: purple;
#> }
#> 
#> .class-2 {
#>   background-color: purple;
#> }Copy Code

sass(
  list(
    a = 2,
    b = 4,
    "@function multiply($parm1, $parm2) {
      @debug 'parm1 is #{$parm1}';
      @debug 'parm2 is #{$parm2}';
      @return $parm1 * $parm2;
    }",
    ".my-class {
      width: multiply($a, $b) * 1px;
    }"
  )
)Copy Code

stdin:4 DEBUG: parm1 is 2
stdin:5 DEBUG: parm2 is 4
#> /* CSS */
#> .my-class {
#>   width: 8px;
#> }Copy Code

sass(input = list(
  colors = c("green", "red"),
  "@each $color in $colors {
    .alert-#{$color} {
      color: $color;
    }
  }"
))Copy Code

#> .alert-green {
#>   color: green;
#> }
#> 
#> .alert-red {
#>   color: red;
#> }Copy Code

# CSS to include in your app
css <- sass(
  sass_layer(
    defaults = list(
      turquoise = "#03a4ff",
      cyan = "#e705be",
      green = "#f3d6e9",
      yellow = "#fdaf2c",
      red = "#ff483e",
      "scheme-main" = "hsl(0, 0%, 10%)"
    ),
    rules = sass_file(
      input = system.file(
        "sass/bulma/bulma.sass",
        package = "OSUICode"
      )
    )
  )
)Copy Code

Isn't there something easier?

install.packages("fresh")Copy Code

install.packages("bslib")Copy Code

A dark theme with {fresh}

library(fresh)
dark_theme <- create_theme(
  bs4dash_vars(
    navbar_light_color = "#bec5cb",
    navbar_light_active_color = "#FFF",
    navbar_light_hover_color = "#FFF"
  ),
  bs4dash_yiq(
    contrasted_threshold = 10, 
    text_dark = "#FFF", 
    text_light = "#272c30"
  ),
  bs4dash_layout(main_bg = "#353c42"),
  bs4dash_sidebar_dark(
    bg = "#272c30", 
    color = "#bec5cb", 
    hover_color = "#FFF",
    submenu_bg = "#272c30", 
    submenu_color = "#FFF", 
    submenu_hover_color = "#FFF"
  ),
  bs4dash_status(dark = "#272c30"),
  bs4dash_color(gray_900 = "#FFF", white = "#272c30")
)Copy Code

A neon theme with {bslib}

library(bslib)
bslib_neon_theme <- bs_theme(
  version = 4, 
  bg = "#000000",
  fg = "#FFFFFF",
  primary = "#9600FF",
  secondary = "#1900A0",
  success = "#38FF12",
  info = "#00F5FB",
  warning = "#FFF100",
  danger = "#FF00E3",
  base_font = "Marker Felt",
  heading_font = "Marker Felt",
  code_font = "Chalkduster"
)
bs_theme_preview(bslib_neon_theme, with_themer = FALSE)Copy Code

Dynamic theming example

Static plot (base R, ggplot2, ...) theming requires {thematic}.

Dynamic theming with {bs4Dash}

Conditional rendering

Only 1 code base, 2 possible outputs 😎️

CSS does not solve all issues

What can JS do for me ❓

Unleash app interactivity: example

JS code can also become messy

• How do I include JS in my Shiny project ❓

• What are the best practices around JS code management ❓

• Let's try to bring some answers ...

Relevant R/JS projects

install.packages("packer")
remotes::install_github("JohnCoene/packer")Copy Code

golem::create_golem(...)
packer::scaffold_golem(framework7 = TRUE)
packer::bundle()Copy Code

Application to Framework7

Optimize: improve user experience

dummy_task <- reactive({
  Sys.sleep(5)
  12
})
output$custom_box <- renderUI({
  dummy_task()
  box(
    title = "Box",
    width = dummy_task(),
    "Box body",
    background = input$background
  )
})Copy Code

dummy_task <- reactive({
  Sys.sleep(5)
  12
})
observeEvent(dummy_task(), {
  updateBox2(
    "mybox",
    action = "update",
    options = list(
      width = dummy_task(),
      title = tagList(
        shinydashboardPlus::dashboardBadge(
          "New",
          color = "red"
        ),
        "New title"
      )
    )
  )
})Copy Code

Introducing {charpente}

remotes::install_github("RinteRface/charpente")Copy Code

library(charpente)
path <- file.path(tempdir(), "mypkg")
create_charpente(path, license = "mit")
# Once the package is created and opened
# Look for all bulma flavors
get_dependency_versions("bulma")
# Download bulma locally
create_dependency("bulma")
# Create JS handler
create_custom_handler("modal")
# Create input binding
create_input_binding("myinput")
# Compress JS for production
build_js()
devtools::load_all()Copy Code

Use existing templates:

Built on top of Framework7.

I want to go faster!

{truelle} is a {golem} GUI generator

remotes::install_github("RinteRface/truelle")
library(truelle)
run_app()Copy Code