Chapter 1 Introduction

1.1 Why another Shiny related book?

There are various Shiny focused resources introducing basic as well as advanced topics such as modules and Javascript/R interactions, however, handling advanced user interfaces design was never an emphasis. Clients often desire custom templates, yet this generally exceeds core features of Shiny (not out of the box).

Generally, R App developers lack a significant background in web development and often find this requirement overwhelming. It was this sentiment that motivated writing this book, namely to provide readers the necessary knowledge to extend Shiny’s layout, input widgets and output elements. This project officially started at the end of 2018 but was stopped when Joe Cheng revealed the upcoming Mastering Shiny Book. Fortunately, the later, does not cover a lot about the customization of Shiny user interfaces. Besides, this book may constitute a good complement to the work in progress Engineering Production-Grade Shiny Apps by the ThinkR team, where the link between Shiny and CSS/JavaScript is covered. For a deep dive into JavaScript and R interactions, the upcoming book by John Coene covers topics like htmlWidgets, interactive documents and computations.

1.2 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 2020) 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)

1.3 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 9, 10 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.

1.4 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?