Why have we created package to improve Shiny apps user interface?

Why?

It’s always a challenge, when developing Shiny apps to create a user interface that is not only acceptable, but rather an exceptionally good looking one. Although Shiny is amazing framework it lacks a set of tools to improve both user experience and interface, like customized and modular components. Just imagine getting customized menu for your app or a really good looking search component.

At the same time projects we build using Shiny are created 10x faster than traditional webapps, and we don’t want to rewrite everything from scratch.

What was our decision?

We’ve seen many teams rewriting their R projects into webapps using API endpoints or even rewriting analytical models to Ruby or C#. Some people were even trying to convince us that learning Angular is a good idea for a data scientist.

We definietly encourage learning new skills, but it doesn’t make sense for everyone to be good at everything. Especially if you already deliver results 10x faster.

Instead of rewriting everything from scratch we’ve decided to solve it once and for all by creating a package wrapping one of the best web libraries there is on the market and start using it from now on onwards in our internal and external R projects.

Thankfully Shiny is easily extandable. To make it easier for us we have integrated Semantic UI into Shiny framework as a package. This way it is extremely easy to start developing apps that are reactive, easy to use and look beautiful. The effect of combining Shiny with Semantic UI is our shiny.semantic package which you can find here. It’s on MIT license so it’s really up to you how you are going to use it.

You can find some examples of our dashboards below:

Live demo

Just to give you a taste what results you can achive let me show two examples:

library(shiny)
library(shiny.semantic)
library(magrittr)

uirender(
  div(class = "ui olive basic button", 
    uiicon("user"), 
    "Color icon button")
)

< !--html_preserve--> < !--/html_preserve-->

uirender(
  div(class = "ui icon input", tags$input(placeholder = "Search..."), 
    uiicon("circular link search"))
)

< !--html_preserve--> < !--/html_preserve-->

uirender(div(class = "ui raised segment",
  div(class = "ui relaxed divided list", 
    c("Apples", "Pears", "Oranges") %>% 
      purrr::map(
        ~ div(class = "item", 
            uiicon("large github middle aligned"), 
            div(class = "content", 
              a(class = "header", .), 
              div(class = "description", .)))))),
  height = "170px",
  width = "100%")

< !--html_preserve--> < !--/html_preserve-->

Next steps

Make sure to check our github repository at github and demo page with examples of components created directly in R demos.

There is still a lot of work to make it easier for us to create better interfaces faster. Contributors are kindly welcome!