24 lines of code to build a Shiny web application from scratch

Including comments 😉

Web applications have become very popular in the data industry to give access to self-service analytics tools. In a nutshell, these applications enable users to run data processing scripts without any technical knowledge.

A good-looking web application. Source: unsplash.com

Extremely flexible, these standalone tools may contain basic features (e.g. data visualization) as well as advanced functionalities (e.g. label training data for machine learning).

Having a background in web development is not required for data experts. High-level libraries were developed for the most commonly used programming languages in the industry: Shiny (R) and Bokeh (Python).

Below in this article, you will find a total of 24 explained lines of code to build a Shiny application from scratch: it can be used as a starting point for your projects.

Shiny was first released in 2012 and requires no specific knowledge in web development, but I assume you have some working knowledge of R. If not, check out my previous article which has a quick reminder on how to install R packages, and you are good to go!

Essential R packages for data science projects

You may find the script files used in this article on this GitHub repository.

Let’s dive in the technical details.

The application code is separated into two scripts: environment.R and app.R, the former having just a few lines to load packages and declare variables used later.

The environment required to run the app.

The shiny package contains all the required functions to build a web application, simply put, it is the package that makes everything possible. On top of that, shinydashboard provides high level functions to create an attractive user interface.

Separating this part of the code from the main script that builds and runs the Shiny app will help as the number of libraries and variables rapidly grows with the size of the web application.

The main script app.R contains the following operations, to create the web application:

1. Define the user interface, using shinydashboard functions
2. Define the server function, which contains the logic behind the user interface (e.g. code triggered after a button is hit)
3. Build and run the app

In this example, the server function is empty as this app as no functionalities yet. It just sets up everything required to create an app from scratch. A good-looking app that does nothing 🙃.

The code to build and run the app.

Before having a look at the result, let’s describe with more details each stage of the script:

1. The user interface

The user interface is made of a dashboard page, containing a header (at the top), a sidebar (on the left) and a body (on the right). The title defined when creating the header is displayed in the upper left-hand corner of the web page. Inside the sidebar was created a menu, which is empty for the moment but still has to have a unique string identifier: ID_UI_SIDEBAR. Following the same logic, inside the body was created an output which may basically contain any UI element. This output also has its unique string identifier: ID_UI_BODY.

Adding the version number to the title of the application may help future users to know which variant of the tool they are working with.

A few words about UI elements identifiers: they are essential for the server to be able to refer to each UI element, and that’s why they have to be unique. For example, when implementing a given action triggered when a button is hit, the button’s identifier is used as an input for the server to detect the hit and perform the relevant action.

Declaring the identifiers as variables in environment.R instead of directly using their string representation enables auto-completion, which is convenient when implementing the server code.

2. The server

As mentioned, the server is an empty function in this example, so there is not much to say here. This is where data experts writes their data processing code, with slight modifications so that it is connected to inputs from the user interface. This part of the application will be discussed in a different article, where the application actually does something 🙃.

The server function may also take session as a parameter, which contains non-input informations (e.g. metadata). More details can be found in this RStudio article.

3. Running the app

The web application is created and ran using shinyApp and runApp functions, or clicking Run App button in RStudio.

The additional parameter launch.browser is used to display the application in the RStudio Viewer pan: it avoids opening a new window for each run, which is the default setting when this parameter is not provided.

The Shiny web application runs in the Viewer pan of RStudio, by default in the lower right-hand corner

Okay… I maybe should have added at least one UI element, but still, this web application already looks nice, doesn’t it ?

Conclusion

24 lines of code are enough to start a Shiny web application project, thanks to fantastic packages shiny and shinydashboard.

Still, there is a lot more to cover but this is a first step into R Shiny development, which is a real opportunity for businesses to create valuable analytics tools.

Thanks for reading!