Welcome

This book is still under active development and intended for a 2021 Q2 release in the R Series by Chapman & Hall.

Disclaimer

This book is not an HTML/Javascript/CSS course and won’t make you become a web developer! Instead, it provides a survival kit to customize Shiny. I am sure however that readers will want to explore more about these topics.

Is this book for me?

Before going further, the reader must:

  • Be comfortable with basic R structures and concepts, functional and object oriented programming (R6)
  • Have solid knowledge of Shiny

Basic knowledge in HTML and JavaScript is a plus but not mandatory.

If you fulfill the above prerequisites, you should read this book if you answer yes to the following questions:

  • Do you want to know how to develop shiny apps with a more professional look and feel?
  • Have you ever wondered how to design new input widgets to unleash interactivity?
  • Are you simply curious about what happens under the hood?

Learning objectives

This book will help you to:

  • Manipulate Shiny tags from R to create custom layouts
  • Harness the power of CSS and JavaScript to quickly design apps standing out from the pack
  • Discover the steps to import and convert existing web frameworks like Bootstrap 4, framework7
  • Learn how Shiny internally deals with inputs
  • Learn more about less documented Shiny mechanisms (websockets, sessions, …)

Book structure

This book is organized into six parts.

  • Part 1 demonstrates the link between Shiny and the classic web languages like HTML, CSS and JavaScript. We finish by exploring the dependencies behind Shiny (Bootstrap, jQuery, …)
  • In part 2, we dive into the {htmltools} (Cheng et al. 2020) package, providing functions to create and manipulate HTML tags from R as well as manage web dependencies
  • Part 3 contains chapters dedicated to the Shiny input system where we highlight some partially hidden features like websockets. This part starts with a JavaScript introduction that might be skipped if necessary!
  • Part 4 focuses on the development of a new template for Shiny by demonstrating examples from the {tablerDash} (Granjon 2020d) package, being a serious refreshment to {shinydashboard} (Chang and Borges Ribeiro 2018). These, and more may be explored further as part of the RinteRface project.
  • Part 5 focuses on CSS and SASS, showcasing examples from the R community like {fresh} (Perrier and Meyer 2020b), to beautify apps with only few lines of code
  • Part 6 dives into mobile web development through a practical study involving the {shinyMobile} package (Granjon, Perrier, and Rudolf 2020)

Code structure

This book has a side package containing all the necessary material to run the code without having to reload each previous snippet.

remotes::install_github("DivadNojnarg/outstanding-shiny-ui-code
")

It covers Chapters 8, 9 and the whole Practice section.

There is another good reason for this package: provide a robust method to bundle JavaScript/CSS code along side any shiny app. Indeed, it is quite tempting to proceed as below:

ui <- fluidPage(
  tags$script(
    "$(function() {
      Shiny.addCustomMessageHandler('hello', function(message) {     alert(message); 
      });
    });
    "
  ),
  actionButton("go", "Send")
)

server <- function(input, output, session) {
  observeEvent(input$go, {
    session$sendCustomMessage("hello", message = "plop")
  })
}

shinyApp(ui, server)

It is fine if the app purpose is a simple demonstration. In our case, since we aim at providing reusable template elements, we need a better approach, that will be described later.

Preliminary exercices

Before starting with technical details, we propose to play a little game. Among all the images shown, what are the ones corresponding to shiny apps?

Extra material

This book may serve as material for workshops. See below a list of recent events.

e-Rum 2020

Novartis associates Mustapha Larbaoui and David Granjon gave a workshop entitled “Advanced User Interfaces for Shiny Developers” at the latest 2020 virtual e-Rum conference whose detailed agenda is available here. This two hours workshop takes a lot of inspiration on this book. An RStudio Cloud dedicated project is deployed here and slides are located here.

R/Pharma 2020

This books served as resource for the 2020 R/Pharma Unleash Shiny workshop held by John Coene, Colin Fay and David Granjon. Slides are available here and exercises accessible from here. This workshop expects an higher level than the e-Rum one.

About RinteRface

The RinteRface project is an initiative aiming to provide one of the most famous HTML templates to Shiny. Everything started by the collaboration of John Coene and David Granjon early 2018 on {shinybulma} (Coene 2020) to officially release RinteRface November 2018 with {shinydashboardPlus} (Granjon 2020c), {bs4Dash} (Granjon 2020a) as line-up packages.

Official release of RinteRface, November 28 2018

FIGURE 0.1: Official release of RinteRface, November 28 2018

The biggest RinteRface accomplishment is probably the work in progress {shinyMobile} package, which was initially called {shinyF7}, in collaboration with the dreamRs team.

Since 2019, RinteRface has been involved in various R related events like local R meetups or conferences (Zurich R User Group, baselR, useR2019, satRdayNeuchatel2020, e-Rum2020, RPharma2020).

RinteRface is a contributor in the Shiny Developers Series, hosted by Eric Nantz, also known as the theRcast.

RinteRface work has been awarded several times at the 2 latest shiny contests (2019 and 2020), through contributions like:

  • A virtual lab for teaching physiology (2019), the Apps.Physiol plateform, fuelled by {bs4Dash} and hosted in {CaPO4Sim} (Granjon 2020b)
The virtual patient simulator of {CaPO4Sim}

FIGURE 0.2: The virtual patient simulator of {CaPO4Sim}

  • {deminR} (Devaux and Granjon 2020), a minesweeper for R (2020), powered by {shinyMobile}
{deminR}, a minesweeper for R

FIGURE 0.3: {deminR}, a minesweeper for R

RinteRface is very grateful to the R community and this book is a sort of acknowledgment!

Acknowledgements

  • I am very grateful to Douglas Robinson for proof reading the book and fixing many typos it contained
  • A special thanks to my friends John and Victor for contributing to RinteRface
  • Thanks to the eRum organizers for inviting me to the virtual e-Rum2020 conference
  • RinteRface and this book won’t exist without the amazing R community. Thanks for their valuable feedback

Packages

library(shiny)
## Warning: package 'shiny' was built under R version 3.6.2
library(shinydashboard)
## 
## Attaching package: 'shinydashboard'
## The following object is masked from 'package:graphics':
## 
##     box
library(cascadess)
## 
## Attaching package: 'cascadess'
## The following object is masked from 'package:graphics':
## 
##     text
library(htmltools)
## Warning: package 'htmltools' was built under R version 3.6.2
library(purrr)
## Warning: package 'purrr' was built under R version 3.6.2
library(magrittr)
## 
## Attaching package: 'magrittr'
## The following object is masked from 'package:purrr':
## 
##     set_names
library(ggplot2)
## Warning: package 'ggplot2' was built under R version 3.6.2
## 
## Attaching package: 'ggplot2'
## The following object is masked from 'package:cascadess':
## 
##     margin
library(thematic)
library(fresh)
library(testthat)
## 
## Attaching package: 'testthat'
## The following objects are masked from 'package:magrittr':
## 
##     equals, is_less_than, not
## The following object is masked from 'package:purrr':
## 
##     is_null
library(jstools)
library(scales)
## Warning: package 'scales' was built under R version 3.6.2
## 
## Attaching package: 'scales'
## The following object is masked from 'package:purrr':
## 
##     discard
library(dplyr)
## Warning: package 'dplyr' was built under R version 3.6.2
## 
## Attaching package: 'dplyr'
## The following object is masked from 'package:testthat':
## 
##     matches
## The following objects are masked from 'package:stats':
## 
##     filter, lag
## The following objects are masked from 'package:base':
## 
##     intersect, setdiff, setequal, union
library(apexcharter)
## Warning: package 'apexcharter' was built under R version 3.6.2
library(shinyWidgets)
## Warning: package 'shinyWidgets' was built under R version 3.6.2
library(charpente)
library(bs4Dash)
## 
## Attaching package: 'bs4Dash'
## The following objects are masked from 'package:shinydashboard':
## 
##     box, dashboardBody, dashboardHeader, dashboardPage,
##     dashboardSidebar, dropdownMenu, infoBox, infoBoxOutput, menuItem,
##     menuSubItem, renderInfoBox, renderValueBox, sidebarMenu,
##     sidebarUserPanel, tabBox, tabItem, tabItems, updateTabItems,
##     valueBox, valueBoxOutput
## The following objects are masked from 'package:shiny':
## 
##     column, tabPanel, tabsetPanel, updateTabsetPanel
## The following object is masked from 'package:graphics':
## 
##     box
library(shinyMobile)
library(shinybulma)
library(deminR)
## 
## Attaching package: 'deminR'
## The following objects are masked from 'package:shinyMobile':
## 
##     f7SubNavbar, updateF7Login
library(CaPO4Sim)
## Welcome to the Calcium Phosphate simulator, have Fun!
library(shinydashboardPlus)
## 
## Attaching package: 'shinydashboardPlus'
## The following objects are masked from 'package:bs4Dash':
## 
##     attachmentBlock, box, controlbarItem, controlbarMenu,
##     dashboardControlbar, dashboardFooter, dashboardHeader,
##     dashboardPage, dashboardSidebar, descriptionBlock, dropdownDivider,
##     updateControlbarMenu, userMessage, userMessages, userPost,
##     userPostMedia, userPostTagItem, userPostTagItems
## The following object is masked from 'package:shinyWidgets':
## 
##     progressBar
## The following objects are masked from 'package:shinydashboard':
## 
##     box, dashboardHeader, dashboardPage, dashboardSidebar, messageItem,
##     notificationItem, taskItem
## The following object is masked from 'package:graphics':
## 
##     box
library(golem)
library(tablerDash)
library(blogdown)
## Warning: package 'blogdown' was built under R version 3.6.2

References

Chang, Winston, and Barbara Borges Ribeiro. 2018. Shinydashboard: Create Dashboards with ’Shiny’. https://CRAN.R-project.org/package=shinydashboard.

Cheng, Joe, Carson Sievert, Winston Chang, Yihui Xie, and Jeff Allen. 2020. Htmltools: Tools for Html. https://CRAN.R-project.org/package=htmltools.

Coene, John. 2020. Shinybulma: Bulma for Shiny. https://github.com/JohnCoene/shinybulma.

Devaux, Gabrielle, and David Granjon. 2020. DeminR: DeminR.

Granjon, David. 2020a. Bs4Dash: A ’Bootstrap 4’ Version of ’Shinydashboard’.

Granjon, David. 2020b. CaPO4Sim: A Virtual Patient Simulator in the Context of Calcium and Phosphate Homeostasis.

Granjon, David. 2020c. ShinydashboardPlus: Add More ’Adminlte2’ Components to ’Shinydashboard’.

Granjon, David. 2020d. TablerDash: ’Tabler’ Api for ’Shiny’.

Granjon, David, Victor Perrier, and Isabelle Rudolf. 2020. ShinyMobile: Mobile Ready ’Shiny’ Apps with Standalone Capabilities.

Perrier, Victor, and Fanny Meyer. 2020b. Fresh: Create Custom ’Bootstrap’ Themes to Use in ’Shiny’. https://CRAN.R-project.org/package=fresh.