Shiny UI Breakthrough: Develop Professional Shiny Apps with shiny.fluent
<p style="text-align: center;"><em>Watch an <a href="https://youtu.be/MYVojGHeKAc?t=7870" target="_blank" rel="noopener noreferrer">introduction to shiny.fluent</a> by Appsilon CTO <a href="https://appsilon.com/author/marek/" target="_blank" rel="noopener noreferrer">Marek Rogala</a>. The shiny.fluent portion begins at 2:11:10. This presentation was a part of Appsilon's Shiny Masterclass at rstudio::global in collaboration with RStudio.</em></p>
Today, Appsilon is officially announcing two new R packages: shiny.fluent and shiny.react. The shiny.fluent package brings Microsoft’s Fluent UI to Shiny, and shiny.react integrates the React JavaScript library, allowing for developers to port React libraries. shiny.react makes shiny.fluent possible, but we’ll mostly be covering MS Fluent in Shiny in this article.
<ul><li><a href="#revolution">shiny.fluent: A Revolution in Shiny UI</a></li><li><a href="#shiny-react">shiny.react: Bringing React.js to Shiny</a></li><li><a href="#demo">shiny.fluent: Demo Dashboard</a></li><li><a href="#benefit">Who Can Benefit from shiny.fluent?</a></li><li><a href="#getting-started">Getting Started</a></li><li><a href="#feedback">Giving Feedback</a></li><li><a href="#hiring">Appsilon is Hiring</a></li></ul>
<h2 id="revolution">shiny.fluent: A Major Breakthrough in Shiny UI</h2>
We believe that a great UI plays a huge role in the success of application projects. However, many Shiny developers do not have a background in design and struggle with creating professional-looking dashboards. We created the shiny.fluent package as a simple way to make Microsoft’s Fluent UI accessible to Shiny developers. shiny.fluent allows you to build cohesive, professional-looking Shiny apps that have an enterprise aesthetic without stressing over every little design detail.
We gave early access to shiny.fluent to multiple testers at Global 2000 companies, and they were all able to quickly create Shiny dashboards with an enterprise aesthetic without the typically large time and resource investment that it takes to create such apps. Now that shiny.fluent is has been publicly released, you can join them!
<blockquote>“shiny.fluent is a game-changer for companies already using Microsoft tools on a daily basis, because everyone is already comfortable with the Microsoft UI. shiny.fluent adds instant credibility to Shiny apps.” –shiny.fluent user at a Fortune 500 Company</blockquote>
shiny.fluent gives your apps:
<ul><li style="font-weight: 400;" aria-level="1">A beautiful, professional look consistent with enterprise applications</li><li style="font-weight: 400;" aria-level="1">A rich set of components easily usable in Shiny</li><li style="font-weight: 400;" aria-level="1">The fast speed of development that Shiny is famous for</li></ul>
shiny.fluent provides components from Microsoft’s Fluent UI natively in Shiny. It includes simple components like text inputs and sliders as well as advanced components like calendar or people picker. It also includes extended features like components for guiding users through your application for the first time. With shiny.fluent, Shiny developers can now take advantage of a well-designed components system built with a strong emphasis on User Experience. It’s much simpler and faster to draw on the Fluent UI component system for a cohesive UI than to struggle through creating an attractive interface from scratch.
<h2 id="shiny-react">shiny.react: Bringing React.js to Shiny</h2>
shiny.fluent is built with our new shiny.react package. Shiny.react will not be the main focus in this article, but it is the machinery that makes all of this shiny.fluent magic possible. As Fluent UI is built in React, React needed to be specifically integrated with Shiny. shiny.react provides that possibility for shiny.fluent, and shiny.react can also be used to make other libraries from the vast React ecosystem available in Shiny. shiny.react is an exciting breakthrough in Shiny development, and we have expended significant resources to create this package and make it available to Shiny developers. You can learn more about shiny.react here.
<h2 id="demo">React in R: Demo Dashboard</h2>
Let’s see an example of a complete dashboard built with shiny.fluent that showcases components like Nav for navigation, DetailsList for a table, as well as DatePicker, PeoplePicker, Toggle, and Slider.
<img class="alignnone size-full" src="https://appsilon.github.io/shiny.fluent/articles/images/tutorial-part2-final.gif" width="1600" height="901" />
You can explore all components live here: <a href="https://demo.appsilon.com/apps/fluentui">https://demo.appsilon.com/apps/fluentui</a>
<h2 id="benefit">Who Can Benefit from Integrating Fluent in Shiny?</h2>
Creating Shiny apps that look professional and modern while providing excellent UX was so far available only to teams with talented web developers on board. With shiny.fluent, Appsilon is bringing the enterprise application feel to independent Shiny developers and smaller teams in a much faster, easier way.
The package is built with ease of use in mind. Our goal was to make it consistent with how things are done in Shiny. You get inputs and buttons that work just like standard inputs in Shiny. You can browse components documentation through the standard R help system. We have <a href="https://github.com/Appsilon/shiny.fluent/tree/master/inst/examples">a rich set of examples</a> in place to help you get started.
Shiny.fluent is meant to be used by developers with at least intermediate knowledge of Shiny. That said, Fluent UI is more flexible and more low-level than Bootstrap, and there is additional complexity coming from using React in Shiny. You should expect using shiny.fluent to be somewhat more complex than vanilla Shiny or shiny.semantic. At some point you will likely want to browse the original Fluent UI documentation. With the slight amount of additional work over vanilla Shiny, you get more power, more flexibility, and much better UI in return.
<h2 id="getting-started">Getting Started</h2>
The best place to start is the official shiny.fluent package website. We have a number of tutorials, from <a href="https://appsilon.github.io/shiny.fluent/articles/shiny-fluent.html">“Getting started”</a> to <a href="https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html">Full dashboard UI in Shiny and Fluent</a>.
These replicable examples are especially useful given shiny.fluent‘s relatively low-level API. You can discover many optional parameters and custom styling that is possible. shiny.fluent provides all components from Microsoft’s Fluent UI library. Browse the <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web">official docs</a> for Fluent UI or start typing shiny.fluent:: in RStudio to see all available controls.
All components are documented, so if you run ?shiny.fluent::MyComponentName, you’ll see documentation for this component in RStudio, along with examples. When in doubt, open the Fluent UI docs for details.
A good way to learn more is to look at other examples of shiny.fluent apps. Once you install the library, you can run them with <a href="https://appsilon.github.io/shiny.fluent/reference/runExample.html">shiny.fluent::runExample("example_name")</a>. We recommend the following for starters:
<ul><li style="font-weight: 400;" aria-level="1">demo: a demo app for analyzing sales reps performance (run this in RStudio)</li><li style="font-weight: 400;" aria-level="1"><a href="https://demo.appsilon.com/apps/fluentui">dashboard</a>: a showcase of all available components along with documentation.</li></ul>
There are also usage examples for individual components. Use <a href="https://appsilon.github.io/shiny.fluent/reference/runExample.html">shiny.fluent::runExample()</a> to list all available examples.
Here’s the simplest possible example of an app:
<pre><code class="language-r">shinyApp(
ui = div(
<a href="https://appsilon.github.io/shiny.fluent/reference/Checkbox.html"> Checkbox.shinyInput</a>("checkbox", value = TRUE),
textOutput("checkboxValue")
),
<br> server = function(input, output) {
output$checkboxValue <- renderText({
<a href="https://rdrr.io/r/base/sprintf.html"> sprintf</a>("Value: %s", input$checkbox)
})
}
)</code></pre>
<h2></h2>
<h2 id="feedback">We’d Love to Hear Your Feedback</h2>
We encourage you to try out shiny.fluent and tell us what you think. We have <a href="https://github.com/Appsilon/shiny.fluent/discussions/24">a feedback thread on our Github Discussions</a> - please feel free to post there with comments and questions. If you enjoy the package and would like Appsilon to keep developing open-source packages for Shiny developers, please throw us a star on this package and our other Shiny packages on <a href="https://github.com/Appsilon">GitHub</a>. Subscribe to our Newsletter for updates about shiny.fluent, shiny.react, and future open-source packages.
<h2 id="hiring">Appsilon is Hiring</h2>
Appsilon is a global, remote-first company driven by a mission to improve society and protect the environment. We have team members in 6+ countries across many time zones. We’re always looking for kind, talented people to join our team! See all open roles on our <a href="https://appsilon.com/careers/">Careers Page</a> if you’re interested in opportunities with us. We're currently in search of a Senior React Developer (Freelance) and Senior Shiny Developers. Referral bonuses are available if you recommend the right person.
Contact us!
.png)
