We Have Created a Package to Improve the UI of Shiny Dashboards
<h2 id="why">Why?</h2> 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 <a href="https://shiny.rstudio.com/" target="_blank" rel="noopener noreferrer">Shiny</a> are created 10x faster than traditional web apps, and we don’t want to rewrite everything from scratch. <h2 id="what-was-our-decision">What was our decision?</h2> We’ve seen many teams rewriting their R projects into web apps using API endpoints or even rewriting analytical models in Ruby or C#. Some people were even trying to convince us that learning Angular is a good idea for a data scientist. We definitely 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 extendable. To make it easier for us we have integrated <a href="http://semantic-ui.com/">Semantic UI</a> 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 <em>shiny.semantic</em> package which you can find <a href="http://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">here</a>. 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: <img class="size-full wp-image-2113" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0238450b6cc5df6a4aa87_before-after.webp" alt="Before and after using shiny.semantic for UI." width="848" height="297" /> Before and after applying shiny.semantic to a UI element. <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. <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. <img class="size-full wp-image-8036" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023892f5bcf28b1a89ad7_Sample-Shiny-dashboard-for-water-quality-.webp" alt="Sample Shiny dashboard for water quality." width="1378" height="747" /> Sample Shiny dashboard for water quality. <h2 id="next-steps">Next steps</h2> Make sure to check our <a href="https://github.com/Appsilon/shiny.semantic">github repository</a> and a <a href="https://demo.appsilon.com/">demo page</a> with examples of components created directly in R Shiny. There is still a lot of work to make it easier for us to create better interfaces faster. Contributors are kindly welcome!
Contact us!
.png)
