Chapter 1 Introduction

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.

This book is organized into five parts.

  • We first go through the basics of HTML, JavaScript and jQuery
  • Part 2 contains chapters dedicated to the partially hidden features of Shiny, yet so fun. We dedicate an entire chapter to describe how inputs work in detail and how to add new inputs to the system
  • In part 3, we dive into the {htmltools} package, providing functions to create and manipulate shiny tags as well as manage dependencies
  • Part 4 focuses on the development of a new template for Shiny by demonstrating examples from the {tablerDash}, {bs4Dash} and {shinyMobile} packages. These, and more may be explored further as part of the RinteRface project.
  • Part 5 present some tools of the R community, like {fresh}, to beautify apps with only few lines of code

1.1 About the code

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 5, 6 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.2 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? Images are numbered from A to F (left to right, top to bottom).