Join the Shiny Community every month at Shiny Gatherings

Shiny UI & UX With Short Live Coding Tutorial


A Shiny UI

It’s often said that if you don’t remember the experience of using an app or website, that’s a good thing. When a good app presents an experience that is seamless, users breeze right through. But at Appsilon we want our users to be conscious of the Shiny UI and their experience – albeit for the right reason.

We want users to have an acutely positive experience that shifts an app from useful and usable to memorable and must-have. We want our apps to showcase a UI that is familiar, intuitive, and beautiful. 

Is your R project looking bland? Learn how to leverage CSS to style your Shiny App 

These are the design principles on which Appsilon views building Shiny apps, dashboards, and visualizations. Appsilon Full Stack Engineer, Kamil Żyła knows this better than most, which is why he helped develop an open source package at Appsilon that ports the Microsoft Fluent library: shiny.fluent. shiny.fluent opens access to the widely used, intuitive, and beautiful collections of Microsoft UX frameworks to R/Shiny developers. 

The importance of UI and UX to the success of any application cannot be understated. It ensures user adoption and efficiency across teams. Follow along with Kamil’s recent presentation at the RStudio Community X-Session, where he discusses the role of UI in Shiny projects and gives a brief live coding tutorial on building a Shiny app with shiny.fluent. 

Kamil Żyła, Full Stack Engineer at Appsilon

Abstract

In this talk, I present the functionality and ideas behind a new open-source package we have developed called shiny.fluent.

UI plays a huge role in the success of Shiny projects. shiny.fluent enables you to build Shiny apps in a novel way, using Microsoft’s Fluent UI as the UI foundation. It gives your app a beautiful, professional look and a rich set of components while keeping the speed of development that Shiny is famous for.

Fluent UI is based on the Javascript library React, so it’s challenging to make it work with Shiny. We have put the parts responsible for making this possible into a separate package called shiny.react. This package enables you to port other React-based components and UI libraries so that they work in Shiny. 

Learn how to use shiny.fluent to build your own Shiny apps. And discover how we solved the main challenges in integrating React and Shiny.

Need help launching your Shiny app with RStudio Connect? Appsilon is a proud RStudio Full Service Certified Partner

Building A Shiny UI for An Enterprise App?

When building a Shiny UI for your enterprise dashboard, you should always keep the user in mind. Ask yourself, who the audience is and in what environment will they be using it. In the age of remote work, quickly demonstrating how to use an app you’ve shared with colleagues is all but a dream. This is why taking a little bit of time in each step of the development process to remind yourself of the user is so important.

Make life simpler with Appsilon’s Shiny UI packages

To compete with existing apps on the market, you need to ensure your product looks and handles better to encourage the growth of user adoption. Appsilon developers and engineers have created several open-source shiny.tools that improve the process of designing a successful app with a smoother Shiny UI/UX. shiny.react, the package that allows the porting of libraries, like MS Fluent as shiny.fluent, is opening the possibilities of creative solutions in R/Shiny by integrating the React Javascript ecosystem. shiny.semantic a Fomantic (previously Semantic) UI wrapper for Shiny is one of our most popular packages. With only a few lines of code, you can revitalize your UI with a modern and interactive look.

Is your dashboard ugly? Take a crash course in Shiny dashboard UI with CSS, JS, and shiny.semantic

If you want to test these packages and more, please browse the Appsilon GitHub. Of course, should you need expert guidance you can reach out to the global leaders in R/Shiny development at Appsilon. We provide innovative data analytics, machine learning, and managed services solutions for Fortune 500 companies, NGOs, and non-profit organizations. We have the unique ability to rapidly develop and scale the world’s most advanced R Shiny applications.

Remember! Although we take pride in the back end of an application, users don’t know (or simply don’t care) what’s happening here. The UI is the user’s first introduction to the application and should be thoughtfully designed. Engage your user and make their Shiny experience a memorable one.