1 Introduction

Shiny is a powerful R package which allows you to create interactive web applications using the R programming language. It is particularly useful for creating applications that run on data and include some sort of data analysis or visualization. In addition to leveraging the power of R and its thousands of packages, one of the big benefits of shiny is the ease of developing applications using R only. Although it is possible to incorporate more traditional web design languages such as custom CSS or Javascript into your shiny application, it is not required.

This online document was created to accompany workshops and webinars on how to build a Shiny application. This guide was created using the bookdown package and is still a work in progress. If you find any errors or typos you would like to correct, please feel free to submit a pull request on github.

1.1 Shiny Timeline

Shiny was first developed in 2012 and has since then gone through major upgrades with more features added to it. Below is a timeline highlighting some of the significant milestones:

1.2 Getting Started

To get started, make sure you have the shiny package installed on your system. You can download shiny from CRAN using the command install.packages("shiny"). The RStudio IDE contains a basic shiny application template you can use to create your first shiny application. To access this template, click on the new document icon in the top left corner of the IDE and select “Shiny Web App…”. This will create the R script file app.R which contains the basic components of a shiny application. You can use this simple shiny application as a starting point for building your own applications. It will look something like this:

#
# This is a Shiny web application. You can run the application by clicking
# the 'Run App' button in the RStudio IDE or running the command runApp("app.R").
#


library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Application title
    titlePanel("Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

# Run the application
shinyApp(ui = ui, server = server)

Don’t worry about how the application works exactly. We will go through each code chunk and explain what each one of them does in the next section. For now, try running the application on your computer by clicking the the “Run App” button in the RStudio IDE. This will start the application and open up your default web browser so you view it.

1.3 Components of a Shiny Application

In this section, we’ll take a closer look at the shiny application code you just ran. Shiny applications are made up of 2 important components: the user interface (UI) and the server section.

UI Section

The UI section of your shiny application is where you define what your application will look like. In a nutshell, this is where you write your shiny functions and R code, which shiny will then take care of translating into html and CSS code that today’s modern web browsers can read and render into a beautiful web application. For example, the function shiny::fluidPage is often used in the UI section to define the outer most layer of the UI. It creates a web page containing both rows and columns which is fluid, meaning it scales to fill all available browser width. fluidpage() is R code, but once you initiate the rendering process from the console with the runApp() function or by clicking the “Run App” button in the RStudio IDE, it will get converted into HTML and CSS code that defines the layout of your application.

Our example application used the default sidebarLayout function to create a webpage with a small sidebar on the left hand side, typically used for adding input controls, and a larger column on the right, usually reserved for displaying plots and other content. You can easily change this layout by replacing the sidebarLayout with other functions like fluidRow and tabsetPanel, for example. We’ll cover this in more detail later.

Shiny needs to know which section of your script is the UI vs. which section is the server, so make sure to save your UI code to the ui object. At the bottom of your script, you will need to pass both the ui and server objects you created to the function shiny::shinyApp().

Server Section

The server section of your shiny application is where the computation takes place. Any code you write for transforming data or creating visualizations will most likely be in this section.

1.4 Bootstrap

What exactly is Bootstrap, the web framework that Shiny is built on? Knowledge of Bootstrap, as well as how web frameworks work is not necessary to develop shiny applications, but it can interesting to learn about and can help you better understand how your Shiny applications work.

Bootstrap is a web framework, whose main purpose is so that web developers do not have to reinvent the wheel whenever they need to create a new website. Many popular programming language have frameworks, such as Django for Python, Ruby on Rails for Ruby, Angular JS or React for Javascript. Web frameworks are useful because they provide the developer with some basic tooling like URL routing, database manipulation, templates, and some level of basic security for their applications. The idea being frameworks is that they help you automate some of the most common activities performed in web development so you do not need to recreate everything from scratch.

Bootstrap, which Shiny leverages, is a front-end web framework which came out of a team at Twitter in August 2011. They were using internally developed libraries for building internal web applications and designed Bootstrap as a tool to “document and share common design patterns and assets within the company”1. The team graciously open sourced Bootstrap, making it available to the public.