Shiny UI & UX With Short Live Coding Tutorial

By:
Appsilon Team
August 27, 2021

<h2>A Shiny UI</h2> 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.  <blockquote><strong>Is your R project looking bland? Learn <a href="https://appsilon.com/howto-css-and-shiny/" target="_blank" rel="noopener noreferrer">how to leverage CSS to style your Shiny App</a> </strong></blockquote> 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.  <iframe title="YouTube video player" src="https://www.youtube.com/embed/N6urtvHKSSI" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> Kamil Żyła, Full Stack Engineer at Appsilon <h2>Abstract</h2> 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. <blockquote><b>Need help launching your Shiny app with RStudio Connect? Appsilon is a proud</b><a href="https://appsilon.com/appsilon-data-science-is-now-an-rstudio-full-service-certified-partner/"> <b>RStudio Full Service Certified Partner</b></a><b>. </b></blockquote> <h2>Building A Shiny UI for An Enterprise App?</h2> 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. <h3>Make life simpler with Appsilon's Shiny UI packages</h3> 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 <a href="https://shiny.tools/" target="_blank" rel="noopener noreferrer">open-source shiny.tools</a> that improve the process of designing a successful app with a smoother Shiny UI/UX. <a href="https://github.com/Appsilon/shiny.react" target="_blank" rel="noopener noreferrer">shiny.react</a>, the package that allows the porting of libraries, like MS Fluent as <a href="https://github.com/Appsilon/shiny.fluent" target="_blank" rel="noopener noreferrer">shiny.fluent</a>, is opening the possibilities of creative solutions in R/Shiny by integrating the React Javascript ecosystem. <a href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">shiny.semantic</a> 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. <blockquote><strong>Is your dashboard ugly? Take a <a href="https://youtu.be/MQ7B4y1Y4ew" target="_blank" rel="noopener noreferrer">crash course in Shiny dashboard UI with CSS, JS, and shiny.semantic</a></strong></blockquote> If you want to test these packages and more, please browse the Appsilon <a href="https://github.com/Appsilon" target="_blank" rel="noopener noreferrer">GitHub</a>. Of course, should you need expert guidance you can reach out to the global leaders in R/Shiny development at <a href="https://appsilon.com/" target="_blank" rel="noopener noreferrer">Appsilon</a>. We provide innovative <strong>data analytics</strong>, <strong>machine learning</strong>, and <strong>managed services solutions</strong> for Fortune 500 companies, NGOs, and non-profit organizations. We have the unique ability to rapidly develop and scale the world's most advanced <a href="https://appsilon.com/shiny" target="_blank" rel="noopener noreferrer">R Shiny</a> 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. &nbsp;

Have questions or insights?

Engage with experts, share ideas and take your data journey to the next level!

Is Your Software GxP Compliant?

Download a checklist designed for clinical managers in data departments to make sure that software meets requirements for FDA and EMA submissions.
Explore Possibilities

Share Your Data Goals with Us

From advanced analytics to platform development and pharma consulting, we craft solutions tailored to your needs.

Talk to our Experts
shiny
shiny dashboards
open source
r
community
x-session