Making Shiny Apps Awesome

Estimated time:
time
min

A week before Christmas our CTO, Marek Rogala gave a speech about ways to make Shiny apps do much more than usual during <a href="https://www.meetup.com/Spotkania-Entuzjastow-R-Warsaw-R-Users-Group-Meetup/events/234328394/" target="_blank" rel="noopener noreferrer">R enthusiasts meeting in Warsaw</a>. In case you have missed this event, we are brining you the gist. We often use R and Shiny to create interactive web apps for both internal and commercial projects. What makes those technologies so wonderful is the fact that they allow for easy prototyping of almost any data science problem. There are <a href="http://www.showmeshiny.com/" target="_blank" rel="noopener noreferrer">numerous examples</a> of how Shiny can be used to make an interactive web app, so it’s pretty easy to find inspiration on how to build one by yourself. However, in our day-to-day work we are constantly challenged to do more that is currently possible in Shiny by default. Fortunately, both R and Shiny are highly extendable and <strong>Marek</strong> spoke about specific problems we were facing in past projects and what R packages we had created to solve them. <iframe src="https://www.youtube.com/embed/6hISTA8fGiA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <blockquote>The first problem was… <strong>creating a smooth user experience and good looking interface</strong>.</blockquote> Although Shiny is a great web framework it does not look beautiful enough for today’s web standards. As our data science team has also extensive web development experience and loved to use <a href="http://semantic-ui.com/">Semantic UI</a> from the very beginning of its existence, we decided to combine it with Shiny. We have named this package <a href="https://appsilon.com/shiny-semantic-v-0-2-0-cran-release/" target="_blank" rel="noopener noreferrer"><strong>shiny.semantic</strong></a>. It allows us to create really good looking apps with interactive components, like rating bars or cards, which are missing in Shiny. In 2018 we went further, we created <a href="https://appsilon.com/create-outstanding-dashboards-with-the-new-semantic-dashboard-package/">semantic.dashboard</a> which is even more powerful. <img class="size-full wp-image-8032" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023818198190e67ad106d_Churn-prediction-sample-Shiny-dashboard.webp" alt="Sample Shiny dashboard for churn analysis." width="2575" height="1408" /> Sample Shiny dashboard for churn analysis, built with shiny.semantic. All that you get by built-in methods or by adding a few simple CSS classes. But there is more! For instance, you have a huge set of <a href="http://semantic-ui.com/elements/icon.html" target="_blank" rel="noopener noreferrer">Semantic UI icons</a> and animations too. You can learn more about this package in <a href="https://appsilon.com/why-have-we-created-package-to-improve-shiny-apps-user-interface/">our previous post</a>. <img class="size-full wp-image-8033" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b02383feb7b3e305d9af4d_Fraud-detection-sample-Shiny-dashboard.webp" alt="Sample Shiny dashboard for fraud detection." width="2876" height="1492" /> Sample Shiny dashboard for fraud detection, built with shiny.semantic. The second problem we had to face couple of times was … <strong>an in-app navigation and state keeping</strong>. In today’s world we are used to making page bookmarks and sharing links with other co-workers. We also expect that app will keep its state, when opening it from a bookmark or shared link and we often want to navigate back in our browser to see a previous state. Unfortunately Shiny has a very limited support for those. As our blog’s reader you might already know how to solve the issue we created <a href="https://appsilon.com/shiny-router-package/" target="_blank" rel="noopener noreferrer"><strong>shiny.router</strong></a> package. During the event Marek discussed details and history of package development. This simple library not only solves navigation issues mentioned above, but also encourages the user to write more structured and better code by writing UI modules. Last but not least, Marek presented our <strong>real-time collaboration solution</strong> for Shiny. Although Shiny does support this kind of reactivity, it is limited in many ways. In a regular Shiny app you may use global scope reactive values that are shared between multiple session and refreshed every time someone makes a change. There are some limitations though: <ul><li>state is not persisted, unless stored and initialized from database</li><li>this data cannot be used outside of Shiny apps, which makes it difficult to analyze the content in those reactive values</li><li>scalability - apps hosted on <strong>shinyapp.io</strong> can handle <a href="https://www.rstudio.com/products/shinyapps-io-performance-tuning/" target="_blank" rel="noopener noreferrer">a few hundred users</a> and Shiny Server Pro instance will support up to <a href="https://support.rstudio.com/hc/en-us/articles/220760228" target="_blank" rel="noopener noreferrer">200 users depending on a chosen license</a></li></ul> In order to solve some of those issues we have created a wrapper for Reactive real-time databases (eg. RethinkDB, Firebase). It allows us to easily recreate a state of an app (state can be easily stored per user) and all tables and reactive values are synced between multiple sessions. For example we can span multiple Shiny apps processes and connect it with one real-time synced reactive database. So to satisfy the requirement of 10 thousand concurrent users we just have to run 50 Shiny Server instances with a load balancer in the front. If you didn’t have a chance to hang out with Marek during R enthusiast event feel free to <a href="mailto:contact@wordpress.appsilon.com">get in touch with us</a> to talk more about any of these topics. :)

Contact us!
Damian's Avatar
Damian Rodziewicz
Head of Sales
r
open source
shiny dashboards