Nick Strayer | A new way to build your Shiny app's UI | RStudio (2022)
Shiny helps data scientists create web applications without requiring web development experience. However, there's still a steep learning curve for writing the Ui portion of an app. Unlike an app's server code, which typically only uses a few different Shiny-specific functions, the app's UI code is almost entirely made up of functions with strange syntaxes and often surprising interactions with each other. This paradigm requires a very different mindset than your typical R Script. This talk introduces a new tool to help both new and experienced Shiny developers spend less time writing their app's UI and more time doing data science. Session: Pour some glitter on it: Polishing the design of your shiny apps
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
I am going to start off this presentation with every software engineer's favorite thing to see, which is an open GitHub issue. So the issue that is on the screen right now is from the Flex Dashboard GitHub page, and Flex Dashboard is widely regarded as one of the easiest ways to get a Shiny app dashboard up and running.
Here the GitHub user is asking how to make a pretty straightforward app with a dashboard layout that appears to be tackling the seriously troubling issue of cookie theft. The layout is simple. There are two rows, with the top row having a tab set on the left, and a terribly troubling plot with an upward trajectory on the right. The bottom is a large panel that spans the entire width, and it's surely going to be filled with some very depressing data.
But there are a few interesting things about this screenshot that I want to draw your attention to. So one of the first things I want to draw your attention to is that this issue was opened in May of 2016, also known as the before times. So imagine the devastation on cookie supplies that have been wrought in the six years that this GitHub user has been waiting to build this dashboard.
So next is below, which is the thumbs up emoji responses, and there are 18 of them, which is by far the most up-thumbed issue on this repo. So clearly other users have been equally troubled by burglary of a confectionary nature.
So why is this issue still open? If we scroll down, you can actually see this is JJ's response, which is you can't actually create this right now.
So at this point, you might be wondering why I would dedicate kind of the first section of my talk to pointing out the shortcomings of software written by the CEO of the company that I work for. And really, I think it's worth it, because I think it perfectly encapsulates and motivates the work that I'm about to show.
Shiny's superpower and the UI problem
So if you went to Joe's keynote, he mentioned this in a similar way, but I really view Shiny's superpower as being this force multiplier, as Joe puts it, for data scientists to share their work to a broader audience. But really, there's one kind of hiccup in that, one kind of hurdle that we've placed in front of data scientists in using Shiny.
And to understand what that is, I kind of want to start with a question, which is what is not crucial to doing great data science? There's a lot of correct answers to this question, but the one I'm going for is understanding the tangled, terrible web of getting the browser to show what you want and where you want it. So Shiny does a pretty decent job of this already. We have helper functions, but it could be better. Like why did this GitHub issue have to be posted? Why did this user have trouble building an app that they could so clearly draw out? Shouldn't that be enough to create your app?
So more concretely, I want to ask the question of how can we make constructing the UI of your Shiny app take less time and just generally be more enjoyable? So we want you, the data scientists, to be freed up to do data science and not fiddle with your UI code. And this has really been a big focus of the Shiny team for a while now. And I've been personally working on it for more than a year and have come up with two fairly complementary paths to try to address this question.
The first one is how do we make declaring your app layout more straightforward and intuitive? And the other one is how do we provide a new way of writing the UI code for your app?
Grid layout
So I'm going to start with the first question, which is how do we make declaring the layout of your app a little bit more intuitive and straightforward? The answer that we're proposing here is called grid layout.
So what is grid layout? First and foremost, grid layout is an R packet, and it provides a simple interface for laying out complex data dashboards. And also it's built on a thing called CSS grid, which is a spec, CSS built right into your browser. So there's no external libraries or JavaScript that needs to be run to work. And also because it's built into your browser, it's not going to be abandoned. And the project isn't going to be left and not work late.
So how do we actually go about using grid layout? I'm going to give you a quick example in code. And so we start by using a grid layout aware container. In this case, we're using grid page, we have other containers for doing like nesting grids, or putting them in more traditional apps. But here we're doing grid page, which lays out your entire app page with grid layout.
So after that, we define the layout. And here, this is the layout defined, it's a table. But the table is represented as a character vector, where there's two elements, and each element represent the row of your layout. And then each column of your layout is represented as basically one or more spaces. And this one or more spaces rule allows you to line things up like you see here. So on the top, we have two columns that say tabs, next to that we have cookies, and then on the bottom, we just have bottom all the way across.
So then to place items in this grid, you just use grid card, the familiar syntax, kind of like tab set panel. So here, like at the top, we use grid card, and we place it in the tabs area of the layout that we've just defined, using area equals tab, we just have to match each one of those areas to grid card or friends such as grid card plot.
And this is the output of that exact code that you just saw. And it looks pretty similar to something we've already seen, which is the layout that the Flex Dashboard GitHub issue is requesting. And so this kind of feels pretty simple. But really, it covers most of what grid layout does. And really, grid layout's whole goal is to be this very simple way, I can think of an I can draw it in a text table, I can make my
Shiny UI Editor
Okay, so that's the first way that we've tackled this. How do we make constructing the UI Shiny app more enjoyable? So let's look at the next way. And the next way is how can we provide a new way of writing the UI code for your app? And the solution that we're proposing here is called Shiny UI Editor.
So the name may give some of it away, and also Joe's keynote yesterday may have given some of it away. But let's quickly clarify what the Shiny UI Editor is. So the Shiny UI Editor is a drag and drop visual editor for your Shiny app UI. So this GIF that you're seeing kind of demonstrates that in pretty concise form, you can drag elements around, you can move them, you can resize them, and it builds your UI doing that.
And don't worry, we're going to show a little bit more about that in a few minutes. The Shiny UI Editor is also an R package. It's not a very interesting R package, there's really one function that you're going to be using, which is launch editor. But that's how you get it. You go just like any other R package and install it that way that you get the Shiny UI Editor.
So more philosophically, the Shiny UI Editor is an attempt to help you focus on kind of the fun stuff. And if you've ever spent a bunch of time doing things like tweaking a plot size or making a column slightly bigger by incrementing a pixel value up and testing it, you kind of know what I mean. And the UI Editor is really an attempt to take that away, let you just visually drag it where you want it to be, and then let the UI Editor write the code for you.
And the UI Editor is really an attempt to take that away, let you just visually drag it where you want it to be, and then let the UI Editor write the code for you.
So now that we've established kind of what the UI Editor is, let's talk about, I think just as importantly, what the UI Editor is not. The UI Editor is not a new UI framework. It provides like a visual way of declaring the UI for your app, but it writes that in whatever framework you want. However, we hope that you really like GridLayout right now, because that's the only supported layout.
And this is actually kind of a little historical quirk that when we started this whole journey, we started with GridLayout, and then I made a little visual editor for editing those tables. And then it was quickly realized that there's more here, let's expand this. But right now, you use the UI Editor, you're also using GridLayout, but that's going to change in the future.
So kind of on the same vein, it's not going to lock you into using it. So by virtue of it just writing code for you, if you don't want to use it, you just stop using it, and you just start editing your code like you would edit any other shiny app. Maybe your app is too complex for the visual editor. And maybe you just are using too many things that are not supported in it right now. That's fine. You're not going to have to go back to the beginning and rewrite your app from scratch. And we really put a fair amount of effort into making sure that the code the editor produces is human readable. So this is something that has been really important to us.
And so kind of in a similar vein, Shiny UI Editor is not ready for production. But it writes code for you. And so in theory, if that code works and does what you want, go for it. But it's still very early. It's in this alpha stage. We just haven't had that many hands on it. And so we really are looking forward to having everybody get their hands on it, file issues, find areas that you find nice about it and what you wish it could do. But don't trust that you're going to go home after this and immediately start using it for your production app.
So Shiny UI Editor is also not available for Python. So you may have noticed that RStudio slash NowPosit and the Shiny team have been making inroads in the Python community. But the UI editor has not. So this is just for Shiny for R right now. That being said, as both the UI editor and Shiny for Python mature, the goal is to bring it to Shiny for Python as well.
Workflow and demo
Okay, so now that we've kind of established what it is and what it isn't, let's talk about the workflow of using the UI editor. So we start by launching the editor with that function that we mentioned before launch editor. You point it at your app location. And this application can exist or it might not exist. And if it doesn't exist, we'll ask you a few questions. And you can start with template app that UI editor friendly. Once you've done that, the UI editor spins up a browser window. You can use the visual interface to edit your app code. And then you close your browser window and you enjoy the app.
Optionally, you can rinse and repeat. And I think that this is really important. We're not setting this UI editor up to be a way that you start your app and then you go on to never using it again. It can ingest app that it wrote, ingest app that theory didn't write. And then so you can have it kind of carry you through your whole Shiny app development process. Maybe later on, you need to add a new plot. You can do that with the UI editor, not just the way of setting up.
Okay, so that's all good and interesting to hear a bunch of tech snippets and me read about what the UI editor is. This is the visual tool. I think it's probably valuable to actually see what it looks like. I was going to do a live demo, but I was told...
So we're going to start here. So we have a fresh RStudio project open. There's nothing in it. You can see in the files pane. It's pretty small. I apologize for that. But there's nothing sitting in there. And so we've run this launch editor function and pointed it to the current app directory. And it says, we can't find an app. So we fill out some template. So it says, yeah, we want to create a new app from a template. And so we say, yes, we do. And then it asks us what template we want. So we have a couple templates right now.
A couple templates. So there's geyser templates. And then there's this chickweight template. And I don't know about you guys, but my very first job was actually as a chicken farmer before I had this cushy software developer job. And so I was not a park ranger at Yellowstone, so I'm not going to use the geyser app. I'm going to do chickweights. We've seen enough geysers, I think. So we choose that chickweight. It spins up the UI editor, and this is what we have.
And so this is in a browser tab. And so looking at what we have here, we start. We have this element panel on the left. You can drag and drop elements from that into your app. And then in the middle, there's this kind of app pane. It's a skeleton. It's not exactly your app even. We have a faux plot there. And on the right, we have a properties panel. This properties panel tells you things like where the element is within your UI tree. And then you also have an app preview. That app main window that you saw isn't perfect. So if you really need to see what your app looks like, you can use the preview.
And so we have two plots on top of each other here. And maybe we want to put those plots next to each other. So we can do that just by reaching up and adding a new column. We can drag one of the plots over and drag one of the plots up. Now we have this whole empty row on the bottom. We can just delete that. And so we can check to make sure that that works. And our app is updated kind of instantly to build that new layout.
And so from there, we might say, you know, maybe let's shrink this column on the left and emphasize the line plot on the right. Do that, and it automatically updates. And so one of the things we might want to do also is right now, the number of lines that are shown in that plot is given via a numeric input. But maybe we want to use a slider. So we can delete that element. We can drag a slider input in, go to the input ID, change it to numChick, which is what that reactive input is set as. And then we can go and change the value. So we're going to say min 1, 20. And we're going to use a step size of 1. And then we can change the label to say number of chick. And then we can go back to the app preview to see if that works. And we can drag it. See, yep, the app is actively updated, and it is working.
So this kind of workflow of going back and forth between the preview and the editor is what we envision people doing. The next we might want to change the title. So it says ChickWaste right now. Let's change it to RStudioCon 2022, and we'll left-align it. So we can see in the little tiny preview on the bottom that it updated. But I want to emphasize another point, which is the fact that you can edit the code as well. So we go into the app code that the UI editor generated for us. Obviously, there was nothing there. And what we can see, we can find this RStudioCon 2022. And let's change that right in the code.
So let's make it positive. And 2022, but make sure it's an integer, so we'll add an L. Then we save that, and we go back, and the UI editor is automatically updated. And so this is really emphasizing that we have this workflow of, you know, some things might be easier to do in the UI editor, and some things might be easier to do in code, and we don't want to hold you back. We want the UI editor to just sit there. Maybe you just want to use it to resize columns or, you know, add a new plot, but you want to type your contents or whatever by hand. You can go back and forth between the code and the UI editor, leave it up, and just edit your app as you go.
And so we can just check now to make sure that that works. We can open up the app that it generated. That's the app that it generated. And so it worked, which is good. Given that I prerecorded this demo, that would be pretty bad if it didn't work.
Philosophy of the UI editor
Okay, so quickly, I just want to talk about the philosophy of the UI editor. So one thing that you might be asking at this point is, how do we avoid some of the common pitfalls of no-code solutions? Because the UI editor is, in a way, a no-code solution. And this is something that we were very careful about when we started.
And I think the simplest answer to that is that it's not a no-code editor. Fundamentally, we're writing code. The UI editor is a visual interface, but everything goes immediately back to code and vice versa. And so really, I don't think of it as no-code. I really think of it as a fancy auto-complete. You know, you might be able to tab-complete something, and it does what you want. This is essentially doing that for your UI.
I really think of it as a fancy auto-complete. You know, you might be able to tab-complete something, and it does what you want. This is essentially doing that for your UI.
And so we also really tried to keep it as simple as we possibly could, because one of the things that happens with no-code editors is that code is an extremely wonderful medium for expressing yourself. RStudio is really a proponent of the power of code. And so the problem with that extreme flexibility is that there's a lot of solution space that you need to make available if you really want to fully explore that. And so visually mapping to that space can be really intense. So we really carefully pulled everything back to make sure that we just let you edit your UI code. You can move things. You can set some settings. We're really not trying to go crazy and let you do everything, because we found that in a lot of tools that do that, you actually might as well just learn how to code instead of some, you know, esoteric visual editor, because at least then you know how to code. You don't have some skill that's not going to work anywhere else.
And so I think the last and most important part about it is that this is the shiny UI editor. And that's an important fact, is the UI editor is not the shiny app editor. We're not trying to write your server code. We want you to write that. We think that you're the best person to do that. We want you as a data scientist to write your cool plots and your good models and all that stuff. We're just going to make it a little bit easier for you to build the UI for you. We don't want you to have to be an expert web developer to create nice-looking layouts for your app.
So the UI editor is the UI editor, not the server editor. It's not a full no-code solution. That being said, there are solutions out there that are full no-code that write the server code for you. And there's actually a talk coming up after this that I'm pretty excited to see does just that.
So that's all of the slides I have. This is links, so if you scan this QR code, it'll take you to a Quarto site that has links for the website and the GitHub for both grid layout and the shiny UI editor, some info on these slides, and some of my links. I just pushed them all live just before this, so they don't work. I'm sorry, but they should work. And that is all I have for you. Thank you so much.
