Filip Stachura & Marek Rogala | Empowering Data Scientists to Build Spectacular Shiny Apps | RStudio
From rstudio::global(2021) Shiny X-Sessions, sponsored by Appsilon: in this talk, Appsilon's CEO and CTO show their vision of challenges facing Shiny app authors and what is crucial to achieving success. They announce 3 key initiatives that Appsilon undertakes to empower data scientists to build spectacular Shiny Apps, including the {shiny.fluent} package. About Filip Stachura: Filip is a CEO and a Co-founder of Appsilon. He holds a double degree in Applied Mathematics and Computer Science from the University of Warsaw. He started his professional career at Microsoft in California. Passionate about data analysis, elegant visualisations and tackling hard algorithmic and analytical problems. About Marek Rogala: Marek Rogala is the CTO at Appsilon, where he drives innovation in R and Shiny as well as Machine Learning. He previously did software engineering at Google and at Domino Data Lab, where he worked on enabling data scientists to experiment and collaborate effectively.: Learn more about the rstudio::global(2021) X-Sessions: https://blog.rstudio.com/2021/01/11/x-sessions-at-rstudio-global/
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
In this talk we want to go a little high level and we want to describe how we envision the future of Shiny and what we do to fulfill that future. My name is Filip, I'm the CEO of Appsilon and together with me we have Marek, our CTO. So we want to share what Appsilon builds to empower everyone to create spectacular Shiny apps.
All right, so if you're still with us, I think we can guess that you love Shiny just as we do. I personally believe that Shiny is a unique piece of technology. It empowered thousands of scientists and data scientists worldwide to share, first to create and then to share their analysis and useful tools easily. Through the years we've seen some unique examples, some crazy ones, starting from native iPad iOS applications, through software as a service, Shiny apps, ending up with offline Shiny applications, on and on and on.
Just through pandemic we created three publicly available dashboards which were mentioned in the press and on the given days they received significant traffic. So I think that it is clear by now that Shiny is ready to be used in different environments, enterprise environment, internal environment, external environment. It is being used by governments, NGOs and business.
But if your app is not basic, if it's not simple, your success is at risk. And there are certain constraints that every person that works with Shiny needs to be aware of. There are technical and operational challenges waiting for you ahead. And we've seen some great apps fail.
If navigated correctly, these challenges can be resolved, risk can be avoided. And we think that here we've identified what makes Shiny app successful. So, if you want to make a successful app, you need to make sure that people are going to use it and to be happy to use it. And right now, people really don't want to use slow or not great-looking Shiny app or any app. People's expectations are very high regarding the friendliness. I'm not saying your application is ugly. I just say some applications are.
And the better it looks, the easier it is to use, the higher the chances of getting buy-in from the people who are going to use it at the end of the day. And we've seen some teams building apps for many months, struggling to have an impact, and apps being bigger and bigger, slower and slower, and apps getting harder to maintain every day. Of course, we've also seen teams which managed to create great apps. It is possible. But it's not always straightforward. And also, very often, it is not expertise of these certain people to work in such a way. So, either teams need to be either aware that they might lose speed of development because it's harder to maintain, or they need to gain expertise in other domains which are not their main domain.
On the other hand, our background is in – so, Appsilon was founded by people with a background in applied mathematics and software engineering. And we are attracted to R. We are attracted to Shiny as software engineers. And we think that this is something we bring to a diverse community of our world. And we want to embrace our background. We've built, through the years, many different Shiny apps. We solved many different problems, some of them taking months to getting resolved. And we think that we can share what we achieved.
We believe that our background in software engineering and our tools that we've created can help – can be our way to contribute to our community. And this way, we can empower scientists, researchers, data scientists worldwide to create spectacular apps themselves. We believe that this way, more apps can be created. They can be created faster. And also, together, we can encourage more people to try R and Shiny and kickstart their journey.
empower scientists, researchers, data scientists worldwide to create spectacular apps themselves.
This is one slide that I shared during my talk at a user conference in Toulouse. And at that time, I kind of embraced advantages of Shiny when compared to different technologies and alternatives. But I think the solution to building better Shiny applications also lies in these other technologies. And as much as we have some advantages, we also need to recognize that certain other technologies can teach us how we can do better.
So, with our mission statement being set, which is to empower data scientists to create spectacular Shiny apps, I will hand off now to Mark to show you some work that we've actually put into fulfilling on this mission and also to discuss our progress so far.
Introducing shiny.fluent and shiny.react
Thank you, Filip. So, I'm very excited to share with all of you these new developments that we will be releasing. And if you have any questions, please post them in the question section and we will be happy to answer. So, a great UI is something that takes your Shiny app to an entirely new level. And we have heard great talks today from Tom and Shannon, obviously, from Pedro about custom styling, from Dominik, who mentioned lots of Shiny extensions.
So, there are a lot of great options already. However, looking at what is available in other technologies, they have not only Bootstrap and Semantic, for example. Actually, there are tons of libraries for user interfaces and so on. And not all of them are yet easily available for us in Shiny. So, we are changing a part of that today with two new packages, which are Shiny Fluent and Shiny React. And the main thing I want to talk about today is Shiny Fluent.
So, Shiny Fluent lets you use Microsoft's Fluent UI in Shiny. But what is Fluent UI from Microsoft, first of all? So, Fluent is a UI library from Microsoft that is used a lot in their software. If you use Fluent UI in your app, it can basically look like Microsoft's Excel or Outlook and so on. So, this means that your app gets a nice professional look, which is a great fit, particularly if your users are in large companies, and especially so if your company is already using Office and, for example, Power BI a lot. So, we've seen Shiny compete with Power BI quite a lot. And almost always, one of the points in favor of Power BI was a better interface. So, today we want to bring this to Shiny.
Right. So, let me open another page. Right. So, everything you see here is a Shiny application. It's completely coming from Shiny. And this is built using Fluent UI. This is actually a part of our documentation. So, you can browse all the components that are available in Shiny Fluent, like various kinds of buttons, for example. It's very configurable. So, you can really have a lot of room in defining easily using parameters, the appearance and the behavior of those buttons. You have lots of cool stuff like contextual menu, nice looking lists. I really like some of the features that Fluent provides for guiding your users through the application, especially for the first time, like the coach mark that can appear and contain some explanation. Of course, there are nice dialogue windows and so on. It's just all of it looks nice and is so powerful and configurable.
Also, Shiny Fluent has a lot of components for which often in Shiny, we used to have to pull in other packages like custom packages to have some kind of nice input. So, a lot of this is already available within Fluent and via Shiny Fluent in Shiny. So, there's one problem though here, and it is that Fluent is based on React. So, to get all of this appearance, you need to render it via React. And that's why we built Shiny React, which brings React to Shiny.
And the story of Shiny React starts when you thought just about how cool it would be to have a reliable and efficient way of using all the richness of the React ecosystem in our Shiny apps. Just think of it. There are so much great stuff. There's so much great stuff available in React, like all the frameworks, material UI, Blueprint, Fluent, tons of components for charts, maps, and whatnot. And also, one thing that is super important is that Facebook's team has put a lot of effort into improving its performance. So, it's really fast. So, it can make also our Shiny apps faster. And JavaScript developers have all of this because they use React. So, we should have that too. So, in one sentence, Shiny React aims to let you easily use React libraries in Shiny.
And I'd like to thank authors of a package that was available earlier, which is React R, especially for some of the ideas that they have in their package, which helped us. And in our scenario and our goal, it just didn't work for us due to some of the limitations. And one example here is that React R seems to be focused more on making and porting individual components or just a few components and not necessarily entire UI libraries.
So, what's special about Shiny React? First of all, you can port entire UI libraries. And it's easy for Shiny app developers. The inputs that you get are really close, as close as possible to the Shiny API that we are used to. I think that was quite challenging to achieve is to give the ability to mix and nest Shiny in React and inside that have Shiny again, like outputs from Shiny and so on, so that we can still use all the Shiny components that we are used to. It also provides documentation for the components coming from the original packages, but inside the R documentation system, which is very useful. And basically, it solves a lot of practical challenges that you just don't have to think about. So, this is what made Shiny fluent possible. And I'm excited to see what other libraries can be made available this way.
Live demo
But let's go back to Shiny fluent. So, this is a most basic app. And what's special here is you just use the library. So, we load the package Shiny fluent. And then you just have to wrap your code with the React function call. And inside, you can use all the components that are taken from fluent. You can use all of their properties and so on. So, basically, this code gives you these two nice buttons. But so that you fully believe me, I'd like to do a quick live demo.
So, this is an application that we built just in a couple of hours using fluent UI. It's, again, all Shiny. So, a scenario that we picked is that let's say we want to analyze how our sales department performs and which sales reps, sales representatives perform best. So, you can see here all those nice inputs that I think are very, very just pleasant to use. It's always an issue with late peakers. So, I really like how they solve this in fluent. And really nice components like this people picker, which can show you a lot of details about the people that you pick.
A really nice list view. But what's also interesting is that what you can see here, this is a regular leaflet map, like inserted with a leaflet output. But this leaflet output is inside an entire structure, which was put here, not like we used to do, but by React. So, it's not obvious that this works, believe me. So, this is really cool that you can, this shows that you can embed what we already have in Shiny inside React. And then the same here with this Plotly plot. So, this is a truly live demo. Let's try to make a change to this app, add some functionality. Let's see if we succeed.
And so, let's say we want to filter this list of deals closed by the sales reps. We want to filter out the smallest deals, like have some minimum limit for the amount of the deal. So, we can use, well, let's find some component that we want to use. So, we can pick Slider, for example. And we can see that Slider is just, we just need to insert a Slider and give it an input ID, as usually in Shiny. So, let's do that. Let's go to RStudio.
So, we can go to where the filters are. This is our UI code. Right. So, we have the Slider. There's lots of configuration options. So, and you can just type, you know, type question mark Slider, and then you will get that in the documentation window, all the options available. But let's say we define a step of 100,000 and we give a label. We can configure how to format that. Right. So, this gives us already an input that we can use in our server part. So, now what we need to do is just to filter the items, filter the items based on the input value. And that should do it.
Let's refresh the app. Right. And we have the Slider here. So, I think it looks really nice. It's just a really beautiful Slider, if a Slider can be beautiful. I just really like how it smoothly moves. Anyway, it's very consistent with the entire look. Right. We could add some debunks here. Anyway, as you can see, we can filter the deals just to the biggest ones. So, going back to the presentation.
So, the good news is that all of this will be open source and we will be releasing this in the just in the coming weeks, starting with an early access group. So, if you're interested, please fill out the masterclass feedback form. The link will be at the end of this presentation. And make sure there's a checkbox which you can check to be in the early access group for Shiny Fluent. So, make sure to do that if you're interested in that. And you can already today open the app with a demo at this URL.
Developer tools and application framework
And so, the second area that I want to cover is developer tools. So, you may have seen August's great talk about best practices just a while before. And what she did was she shared a lot of best practices that we use in the community. And she did this in a non-opinionated way. So, no matter what technology, there were some examples, but no matter what technology choices you make, you can still use these best practices. There are a lot of options.
At the same time, at Appsilon, we are building patterns and development workflow tools that realize these best practices in a very opinionated way, which is, in our opinion, just works best in most projects. So, today, I'd like to share with you that we will be publishing kind of first of its kind Shiny application framework. So, a thing that runs on top of Shiny and lets you be more efficient for building production apps. So, there are a lot of areas that you can take care of to make your app work well in production. You don't necessarily have to take care of all of them. But if you do, it really, really increases your chances of success.
So, over the years, we've built tools for all of these areas. And in the coming months, we will be gradually sharing them as a unified framework. So, why does this matter? Basically, all of the points from the previous slide matter, because ultimately, for apps that work in production, the users, your users depend on them. We need to ensure that they're, first of all, reliable and easy to maintain. But also for our projects to be successful, we need to do that, achieve maintainability and reliability while keeping the development velocity high, which keep the velocity that Shiny is famous for.
So, just some examples of what you will get with the framework out of the box. Mature domain-driven application structure, end-to-end tests, like on this example of Cypress. Comprehensive, but easy to use dependencies management, like Olga mentioned. Data validation.
So, what's really new here compared to existing solutions? I think there are three main things. First of all, it's a complete framework, a complete ecosystem covering, giving you an option for all of the points that you need to think of. Then, it's just the fact that we bring best practices from other technologies in areas where as Shiny community, we can benefit most by learning from other technologies. And the third, you get all these best practices, not as knowledge, but as code. So, you can start your project from scratch with all the best practices included and you can learn what you, which parts you need, like you can learn each part that you need from the code that is already in your project and it's already working and you can learn from that.
And the third, you get all these best practices, not as knowledge, but as code.
Templates, layouts, and summary
Yes. So, our workflow and ShinyFluent and ShinyReact are going to be fully open-sourced. We are excited to share our frameworks and our way of work, but we think that sometimes frameworks are just not enough. They don't cut it on their own. And this is why we want to create another resource for our community. So, in other communities, if you want to create your WordPress page, if you want to create your e-commerce store, if you want to create your static bootstrap website, you can grow thousands, maybe hundreds, depending on the use case, pre-made quality templates and layouts. You can choose, pick the one you like. You can download or buy and customize with a fraction of work necessary to build everything from scratch. And this is why we decided to do the same thing for our Shiny community.
So, we decided to share some of our work. Our Shiny apps are often complimented for how they look, and we are quite proud about taking care of great design. We deeply care here about stuff being both easy to use and beautiful and useful. So, some of the layouts that were crafted by our engineers and designers are going to be available, some of them for free, some of them to buy on the platform that we are going to share with everyone.
So, what did we promise today? First, Shiny Fluent and Shiny React are going to be open source. You can create great enterprise-grade applications, especially for enterprise ecosystem with Shiny Fluent, and we should expect more React libraries being ported as R packages available to us. Second, we will open source a lot of our internal tools to empower the whole community to leverage what we've discovered in many of our projects, so that the whole community can move forward much faster. At least, we hope so. Third, we will help kick start hopefully more teams and more Shiny developers their own work with pre-made templates and layouts. All this we do because we want to empower data scientists and scientists and researchers worldwide to create more and better Shiny apps, so that, together, we can have more impact and help other people make wiser decisions for the data.
