<ol><li><a href="#anchor-1" target="_blank" rel="noopener noreferrer">Why Is A Good UI Important</a></li><li><a href="#anchor-2" target="_blank" rel="noopener noreferrer">What Is shiny.fluent and shiny.react</a></li><li><a href="#anchor-3" target="_blank" rel="noopener noreferrer">useR! 2021 Presentation: Build Beautiful Shiny Apps Using Microsoft’s Fluent UI</a></li><li><a href="#anchor-4" target="_blank" rel="noopener noreferrer">Q&amp;A From Marek’s Presentation at UseR! 2021</a></li><li><a href="#anchor-5" target="_blank" rel="noopener noreferrer">useR! 2021 Follow Up</a></li></ol> <h2 id="anchor-1">Why Is a Good UI Important</h2> User Interface (UI) consists of features a user interacts with on your app. Without an intuitive, good-looking UI, the User Experience (UX) falls flat, potentially failing in <strong>widespread adoption</strong> or limited <strong>user interaction</strong>. When designing the UI, consider what your users are familiar with. You can create a more <strong>comfortable UX</strong> and <strong>ease of use</strong> within the app by using common UI elements. If designing a dashboard for a company that uses Microsoft products, Microsoft's Fluent UI should be at the top of the list for consideration. <h2 id="anchor-2">What is shiny.fluent and shiny.react</h2> <a href="https://github.com/Appsilon/shiny.fluent" target="_blank" rel="noopener noreferrer">shiny.fluent</a> and <a href="https://github.com/Appsilon/shiny.react" target="_blank" rel="noopener noreferrer">shiny.react</a> are open-source R packages from Appsilon that were released in June 2021. shiny.react allows the porting of React libraries in Shiny and shiny.fluent brings MS Fluent to Shiny. You can read more in the release announcement <a href="https://appsilon.com/shiny-fluent-intro/" target="_blank" rel="noopener noreferrer">here</a>. <a href="https://github.com/Appsilon/shiny.react" target="_blank" rel="noopener noreferrer"><img class="aligncenter wp-image-7431" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0204f99f2296f27b6e00f_shiny-react.webp" alt="shiny.react R package hex" width="235" height="270" /></a> The<strong> shiny.react</strong> package enables using React in Shiny apps and is used by the shiny.fluent package. It contains R and JS code which is independent of the React library (e.g. Fluent UI) that is being wrapped. <strong>shiny.react</strong> lets you easily use <strong>React libraries in Shiny</strong> and opens a wealth of other libraries designed by huge teams of UX designers and developers. <a href="https://github.com/Appsilon/shiny.fluent" target="_blank" rel="noopener noreferrer"><img class="aligncenter wp-image-7428" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0204f3558cfc06df18480_shiny-fluent.webp" alt="shiny.fluent R package hex" width="235" height="270" /></a> The<strong> shiny.fluent</strong> package enables the use of <strong>Microsoft's Fluent UI in Shiny</strong>. This allows your apps to have a beautiful and professional look and a rich set of easy-to-use components in Shiny, all while retaining the fast speed of development that Shiny is famous for. <blockquote>Interested in learning how to implement MS Fluent UI in your Shiny app? Check out our video tutorial on how to <a href="https://youtu.be/KKWAeeZM4Rc" target="_blank" rel="noopener noreferrer">Build Beautiful Shiny Apps with shiny.fluent</a></blockquote> <h2 id="anchor-3">useR! 2021 Presentation: Build Beautiful Shiny Apps Using Microsoft's Fluent UI</h2> by <a href="https://appsilon.com/author/marek/" target="_blank" rel="noopener noreferrer">Marek Rogala</a> Abstract: In this talk we will 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 retaining the speed of development that Shiny is famous for. Fluent UI is based on the Javascript library React, so it’s a challenging task to make it work with Shiny. We have put the parts responsible for making this possible in a separate package called shiny.react, which enables you to port other React-based components and UI libraries so that they work in Shiny.  During the talk, we will demonstrate how to use shiny.fluent to build your own Shiny apps and explain how we solved the main challenges in integrating React and Shiny. <iframe title="YouTube video player" src="https://www.youtube.com/embed/s79s4UJpXrs" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <h2 id="anchor-4">Q&A From Marek’s shiny.fluent and shiny.react Presentation</h2> <h4>Q: React is a powerful and fast library mainly due to the virtual DOM. Are the benefits of Virtual DOM carried to shiny.react as well? Or just the React components that are accessible through shiny.react?</h4> A: Yes and no. If you use our specialized reactOutput/renderReact functions (which are more powerful but not mandatory replacement for uiOutput/renderUI), changes to components will render in place and only parts that changed will get replaced in DOM thanks to virtual DOM. The same works if you use updateInput functions. If you use regular uiOutput, you don't get the full benefits of virtual DOM, because Shiny removes the components from DOM. It's true that one of React's strengths is virtual DOM, the same goes for shiny.fluent/react. But huge strengths are also found in its overall design based on functional programming principles and the richness of the ecosystem. This abundance of libraries is, from our perspective, the key strength when using it in Shiny. In practice, we don't yet see huge performance speedups over regular Shiny, but we see great apps achieved in a shorter development time. <h4>Q: What do you think are the advantages of developing Shiny apps?</h4> A: In our experience, one of the biggest strengths of Shiny is the speed of development - more than once we've rolled out an MVP of an application in 1 or 2 days. This means you can iterate super fast and gather feedback from users and incorporate it into the app in super short cycles. You can build a functional prototype much faster than you could do in typical web development technologies. And then you can decide whether to migrate or stay in R. Another nice strength is the R language and packages which make it super convenient to work with data. It's also very helpful to stay in R when you have a team of data scientists working in R already, to save your "engineering tokens". <h4>Q: After the MVP is up and running, what are some factors to consider when deciding to stick with Shiny or move to more typical web development technologies?</h4> A: Factors to consider: <ul><li style="font-weight: 400;" aria-level="1">Product roadmap - features that we can predict will be needed (some features are a perfect fit for Shiny, while some take more time to implement than in other technologies)</li><li style="font-weight: 400;" aria-level="1">How resource heavy is the app</li><li style="font-weight: 400;" aria-level="1">Predicted number of users</li><li style="font-weight: 400;" aria-level="1">Desired complexity of the UI (for highly advanced UI it may not make sense to make Shiny work together with React, instead go, for example, wholly with React)</li><li style="font-weight: 400;" aria-level="1">Special client requirements</li></ul> In short, we default to Shiny because usually, it’s a great fit for the types of applications we work on. And we look if any of the points like the ones above, give us red flags that this is a use case where Shiny may be a bigger cost, long-term.  <h4>Q: Is this dependent on Windows?</h4> A: No. Personally, I was using this on MacOS and Linux, and it runs for example on shinyapps.io <h4>Q: Is there a plan to bring this to CRAN?</h4> A: Yes, we plan to bring shiny.fluent to CRAN -  the submission for shiny.react is already in progress. <h2 id="anchor-5">useR! 2021 Follow Up</h2> Thank you to the 1800+ members who joined the Appsilon channel and to those who participated in Marek’s presentation channel. This year's conference was filled with informative talks and impressive keynote speakers. Appsilon is proud of our team members that gave non-sponsored talks and we are honored to help support the global R community as a platinum sponsor of useR! 2021. We are excited to see what innovations grow from the R community’s experience at useR!.  &nbsp; <h2>We Need Your Help!</h2> At Appsilon our Tech Team Members regularly contribute to open-source packages as part of our commitment to positively impacting the world through technology. If you find our packages useful, please consider dropping a star on your favorite <a href="https://shiny.tools/" target="_blank" rel="noopener noreferrer">shiny packages</a> at our <a href="https://github.com/Appsilon" target="_blank" rel="noopener noreferrer">Github</a>. It helps let us know we’re on the right track. And if you have any comments or questions swing by our feedback threads like the ongoing <a href="https://github.com/Appsilon/shiny.fluent/discussions/24" target="_blank" rel="noopener noreferrer">discussion</a> at our new <a href="https://github.com/Appsilon/shiny.fluent" target="_blank" rel="noopener noreferrer">shiny.fluent package</a>, we love to hear from the community. If you spot an issue or room for improvement please feel free to send a pull request. <h2>We're Hiring!</h2> Interested in working with the leading experts in Shiny? Appsilon is looking for creative thinkers around the globe. We're a remote-first company, with team members in 7+ countries. Our team members are leaders in the R dev community and we take our core purpose seriously. <blockquote>Advance technology to preserve and improve human life #purpose</blockquote> We promote an inclusive work environment and strive to create a friendly team with a diverse set of skills.<a href="https://appsilon.com/company/" target="_blank" rel="noopener noreferrer"> Contact us</a> and see what it's like to work on groundbreaking projects with Fortune 500 companies, NGOs, and non-profit organizations. <img class="aligncenter size-full wp-image-7024" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b020493e47f6a35730bb22_Be-a-part-of-our-team.webp" alt="Be a part of our team" width="1200" height="628" /> <p style="text-align: center;"><b>Appsilon is hiring for remote roles! See our </b><a href="https://appsilon.com/careers/" target="_blank" rel="noopener noreferrer"><b>Careers</b></a><b> page for all open positions, including a </b><a href="https://appsilon.com/careers/job-offer/?job=senior-react-developer-freelancer" target="_blank" rel="noopener noreferrer"><b>React Developer</b></a><b> and </b><a href="https://appsilon.com/careers/job-offer/?job=r-shiny-developer" target="_blank" rel="noopener noreferrer"><b>R Shiny Developers</b></a>.<b> Join Appsilon and work on groundbreaking projects with the world’s most influential Fortune 500 companies.</b></p>