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

(This article was first published on Appsilon Data Science - R language, and kindly contributed to R-bloggers)

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.

Before and after applying shiny.semantic

You can find some examples of our dashboards below:

Fraud detection dashboard
Churn prediction and avoidance
Agriculture performance insights

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")
)


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


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%")


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!

To leave a comment for the author, please follow the link and comment on their blog: Appsilon Data Science - R language.

R-bloggers.com offers daily e-mail updates about R news and tutorials on topics such as: Data science, Big Data, R jobs, visualization (ggplot2, Boxplots, maps, animation), programming (RStudio, Sweave, LaTeX, SQL, Eclipse, git, hadoop, Web Scraping) statistics (regression, PCA, time series, trading) and more...



If you got this far, why not subscribe for updates from the site? Choose your flavor: e-mail, twitter, RSS, or facebook...

Comments are closed.

Sponsors

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)