Types of Shiny application

In the first edition of this book, which was based on Shiny 0.6, there were only two types of application described. First, a fairly simple Bootstrap-themed interface with input widgets down the left and output (a single page or a tabbed output window) on the right. The second type is custom-built web pages with their own HTML and CSS files. Shiny has developed quite a bit since then, and there are actually many types of Shiny application and ways of building them. They are as follows:

• Interactive markdown documents with Shiny widgets embedded
• Shiny applications (default CSS, written entirely in R)
• Web pages (for example, custom CSS, HTML, JavaScript, and jQuery)

In this chapter, we will be considering the first two: interactive documents first and then full applications. Chapter 3, Building Your Own Web Pages with Shiny, will cover the building of your own web pages with Shiny applications on them.

Interactive Shiny documents in RMarkdown

Interactive documents can be made, as we saw in the previous chapter, very easily using RMarkdown in RStudio. Even if you are not using RStudio, it is a simple matter of writing an RMarkdown file with Shiny code in it. If you do not use RStudio, you will need an up-to-date version of Pandoc (the version in many Linux distributions is not recent enough). For more on installing Pandoc on Linux, Windows, or Mac, go to pandoc.org/installing.html.

RMarkdown is based on Markdown, which is a markup language designed to be easily converted into HTML but looks much more like a natural document in its raw format, as opposed to HTML or other markup languages (such as LaTeX), which have more prominent and strange-looking tags. For example, markdown syntax for a bulleted list is as follows:

* First bullet
* Second bullet
* Third bullet

The HTML equivalent is as follows:

<ul>
  <li>First bullet</li>
  <li>Second bullet</li>
  <li>Third bullet</li>
</ul>

Tagging markup in LaTeX is even more verbose. RMarkdown uses markdown conventions, but allows code chunks of R to be run within the document and text and graphical output to be generated from those chunks. Coupled with Pandoc (the Swiss Army knife of document rendering), markdown and RMarkdown can be rendered into many formats, including XHTML, HTML, epub, LaTeX, .pdf, .doc, .docx, and .odt.

RMarkdown with Shiny goes one step further and allows users to interact with the document on a web page.

Let's build a minimal example. If you are using RStudio, you will be given a boilerplate Shiny markdown document to work from, which makes things a bit easier, but here we'll ignore that and build it from scratch. The code is available at goo.gl/N7Qkv8.

Let's go through each part of the document. Navigate to File | New | R Markdown | New document and enter the following code:

# Example RMarkdown document
This is an interactive document written in *markdown*. As you can see it is easy to include:
1. Ordered lists
2. *Italics*
3. **Bold type**
4. Links to [Documentation](http://example.com/)
## This is heading two
Perhaps this introduces the visualisation below.

This is the document part of the Shiny document, written in markdown. The following conventions can be noted:

• The # character is used for headings at level 1, and ## for headings at level 2
• Numbered (ordered) lists are designated with 1, 2, and so on.
• Italics are given with *single asterisks* and bold with **double asterisks**
• Links are represented like(http://example.com/)

Next follows a code chunk, beginning with ```{r} and ending with ```. The argument echo=FALSE is added to the chunk to prevent printing of the R code. You will usually want to do this, but not on every occasion, for example, when producing a teaching resource:

```{r, echo=FALSE}
sliderInput("sampleSize", label = "Size of sample",
  min = 10, max = 100, value = 50, step = 1)
renderPlot({
  hist(runif(input$sampleSize))
})
```

Straight away, we can see some of the design principles in Shiny applications. We can see the separation of input code, sliderInput(), and output code, renderPlot(). The sliderInput() function, as the name suggests, defines an input widget that allows the user to select from a range of numeric values, in this case, between 10 and 100, with a starting value of 50 and a step increase of 1. The renderPlot() function produces a reactive plot using whatever functions it finds within itself (in this case, the graphical function hist(), which draws a histogram).

As we already covered in Chapter 1, Getting Started with R and Shiny!, reactive outputs change when their inputs change. The runif(n) function produces n random numbers between 0 and 1 (with default arguments). As we can see in this case, n is given by input$sampleSize. Inputs are accessed very simply in Shiny in this format; you can see that we named the input sampleSize within the sliderInput() function, which places the selected value from the widget in input$sampleSize (naming it myInput places the value in input$myInput).

Therefore, runif() generates random numbers in the quantity of input$sampleSize, hist() plots them with a histogram, and renderPlot({}) tells Shiny that the output within is reactive and should be updated whenever its inputs (in this case, just input$sampleSize) change.

The final result will look like the following screenshot:

That's it! You made your first Shiny application. It's that easy. Now, let's consider building fully fledged applications, starting with a minimal example and building up from there.