ShinyUiEditor: From Alpha to Powerful Shiny App Development Tool - posit::conf(2023)
Presented by Nick Strayer Since its alpha debut at last year's conference, the ShinyUiEditor has experienced continuous development, evolving into a powerful tool for crafting Shiny app UIs. Some key enhancements include the integration of new bslib components and the editor's ability to create or navigate to existing server bindings for inputs and outputs. In addition to new features, the editor is now available as a VSCode extension enabling it to integrate smoothly into more developers' workflows. This talk will showcase how these new capabilities empower users to efficiently create visually appealing and production-ready applications with ease. Presented at Posit Conference, between Sept 19-20 2023, Learn more at posit.co/conference. -------------------------- Talk Track: Shiny user interfaces. Session Code: TALK-1126
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
What I'm here to show you. There are a lot of other really great talks going on right now, so in the interest of helping you make a fully informed decision about where you want to go, although it's kind of stuck here now, I want to start by telling you kind of what I aim to get across during this talk in the next, hopefully, less than 20 minutes.
And my goal is to show you that the Shiny UI Editor is ready to be used in the real world and not just toy scenarios. And I'm going to do this by walking you through building a Shiny app from scratch using the UI Editor.
Background and mission
So first I want to start with a little bit of context, which is around 10 years ago, I remember building my first Shiny app. And I remember I opened up RStudio and I clicked new app and there was a geyser and then I took my code and I shoved it in there and then I never touched the UI again because it was terrifying and I could barely get my code in there, I'm not going to mess with the UI.
And then even eight or so years later, after I'd done enough Shiny and web development to actually get a job on the Shiny team, I still found myself dreading that initial prototype period where you have a cool API you want to play with and you have to set up the UI, you have to make things go where you want and that was just kind of annoying and sometimes you just want to get that done really quickly. And so these two scenarios really motivated the development of the UI Editor.
And I think they can be summed up in kind of a general mission statement because all great things such as Posit have a mission statement. And in researching how to give good talks, one of the things that I always saw was you should read directly from the slides. So I'm going to do that here to read this mission statement. So the mission of the Shiny UI Editor is to help users turn their data analyses into interactive Shiny dashboards. We want to generate app code that can be later modified with or without the editor. And this is for both those new to Shiny and also experts who want to expedite their development process.
Okay, so now we have context, we can start. But just actually one more context slide, which is it's great to have a mission statement and talk about all that stuff, but really what is the UI Editor? So first and foremost, the UI Editor is a drag and drop visual editor for your Shiny's applications UIs. And it's focusing specifically on the UI. Or does it actually? We'll get into that in a little bit.
You can get the UI Editor via an R package or if you're one of those crazy people that likes to use VS Code to write R, we have a VS Code extension.
Demo: building a Shiny app from scratch
Okay, so now we can actually get started with the demo. So say you, just going to pick a random profession or a data scientist, and you've built an awesome Quarto document. So the Quarto document pulls some air quality data from the EPA. We have this little black box function called query data. You don't need to worry about that. But basically you can pull location and then various pollutants that go with that location. And in your Quarto doc, you have a plot, you have some statistics that you pull out of that data, and you have a table.
The problem is that this is static. Right now it's hard-coded for Chicago. Maybe you want to look at someplace else. So this seems like a good situation for an interactive Shiny app. But how do we actually get started with that?
You know, it's nice to say, like, use the UI editor, but how do you actually do that? And so assuming you have the package installed, I want to talk about one of the newer ways to do that, which is with an add-in that we have. So say you're here. You have RStudio open. It's a project. It's where your Quarto document is. You can just go now into the add-ins pane, and you find the one that says run Shiny UI editor. You click that, and it will pop up the UI editor to this little template chooser interface.
So from there, you can choose a template. So in this case, we're going to choose this grid geyser template. You select it, and then you scroll down, you click next, and it will now open up that template. It's written that to your local file system. It started running a preview, and everything looks pretty good.
Okay, but maybe you don't actually like that template. Maybe that's, you know, we only have one plot and one table, so maybe this one isn't what we want. You can use the back button or the undo button, go back, and say, you know what, I want this other template. And that's kind of to show that anywhere in the UI editor you make a mistake, you don't want to do something, you can go back.
Now we're in this new template that we've chosen. You can use the app preview, which is always there, to check to see if the app that you are working with looks right.
Updating the layout
Okay, so now that we have a template open, everything's good, we can move on to actually updating the app's layout. There's nothing, like, new here. This is what I talked about in last year's conference talk. And so in the interest of, I set out this goal of, like, I'm going to take you from beginning to end of a project. I'm not going to hide anything, which means that I'm going to go really fast through this. So if you get lost, there's lots of documentation online that you can use. But really the point is not to show you how to. Like, there's a lot better ways to learn how to do something. I just want to show that you can do something with the UI editor.
So now that we're in the app, we probably want to update the app title. And so we can do this just by clicking the title. Right now it says Chickweights. And then we go into the properties pane on the right. We can update the properties. In this case, we're going to call it Air Quality. Makes sense. And then we can left align it. And so that's basically how you just update, you know, any given node in the UI editor.
So one thing also you might notice is that this template that we've chosen has two plots. We only want one plot. And we can fix this just by selecting it and just picking this big red delete button, and it now ceases to exist. So any node you can edit, you can delete. But then now the app looks a little bit barren on the bottom, and we need a table. So we can do this by going to the left, which is the elements palette, finding a table output, and just dragging it onto our app. It'll ask us a couple questions about what we want to name where we put it. Call it table very creatively. And now we have a table in our app.
Well, the table is there. You know, there's still a big chasm there, and we want to put some statistics in. And so we're going to use some value boxes, like the ones that Carson showed. We want two of them. And so we can do that using the layout features of the UI editor by adding another row. We can make our table bigger to fit in there. And then we can just drag on some more value boxes, fill out information about them, check in the app preview, see things maybe need a little bit of tweaking. This is a common pattern of, you know, you go to the preview and then rearrange things to see what looks best.
So we've made the plot a little bit wider, the table a little bit wider. Things are starting to look pretty good. So now we also have the places for where all of our output sits, but we don't actually have any inputs. And what's the point of making a Shiny app if we don't have any dynamic inputs? So we can do that. Just delete the old inputs that came with the template, drag in an input to set the city. So that's going to be a radio button. We can go set, you know, the input ID and set the options. And then we can also drag in an input for the pollutants, which is going to be a checkbox.
And I don't know if you're like me, but I can never, ever remember the syntax for things like checkbox options. But the UI editor has nice features where, you know, you don't have to remember the syntax. You just have to fill in the input, which is pretty nice. Another one that it has for that is in value boxes, you have this nice little icon. It uses this BS icon package, but there's 1,800 icons in that. And I certainly don't remember all of those. And so we have a little input that allows you to search through all of those and see previews of what they look like, which makes your life a lot nicer. And that's something that, you know, even if you're an advanced Shiny user, having that feature can be nice. So there's just, you know, lots of little things with the UI editor that can make your life easier.
Hooking up server bindings
Okay. So the app now looks basically like what we want it to. But how do we make it behave like what we want it to? It's all great that we have plots and tables, but if they're not actually hooked up to anything, that's not great.
New stuff that's come to the UI editor recently, and I'm excited to show it off. So we have this plot output, right? And the plot output was in the template, so it has some output code associated with it. And if we want to go fill that in with our output code, we click on it, and there's a new button that pops up that says Show in Server. You click that, and we go back to RStudio, and we see that it's highlighted the output code for that plot. So now all we have to do is go back to our Quarto document where we made that plot originally, copy and paste that code into that output that it highlighted for us, save the app, and then we can go back to the UI editor, and then open up the preview, and we can see the plot has now updated to be what it was in the Quarto doc.
and then open up the preview, and we can see the plot has now updated to be what it was in the Quarto doc.
So from that, you know, we're kind of making that process of going back and forth a little bit smoother. But sometimes we don't have output code, so in the case of this table, we added that. And so there is no output code, so you don't know what you need to copy and paste. In this case, there's another button that shows up called Generate Server Code. Generate Server Code will put in, like, a basic template for you based on the output type, and then you can view that just like we did before. So now it's inserted a rendered GT function. It's just showing the Iris dataset right now, but we can do the same thing we did before now, copy and paste the code from the Quarto document. This is actually real speed. This is how fast I work on my computer.
And then once again, we're going to do this for the value boxes. There's a text output there. Just go nice and quick. So that's how we can kind of go from our outputs and get our server code hooked up. So now we can see our value box is producing a statistic that we had made in our Quarto document.
So, you know, it's all well and good that output bindings work, but there's another type of binding, which is an input binding. The editor knows a little bit about them as well. Not quite as much because there's not as much to do with them. But before I get into that, I want to do an interlude, which is not really a Shiny UI editor thing, but more of a just a Shiny development best practice, which is we're going to take this air quality data that we've been working and put it in a reactive variable. And I'm doing this, and I'm saying it's a best practice, but really I'm doing it so that when I do the input stuff, I only have to put it in one place.
So right now, the query data function gets called once in this reactive and we use that in our plot, in our table. So this is not necessary, but if you want to make performance Shiny apps, you should probably do this.
Okay, so we have those inputs. How do we actually hook them up? We can just copy the input ID that we have, go back to our server code, find that reactive variable. Right now we've hardcoded Chicago. We can replace that hardcoded city data with just input, then dollar sign if I could ever type. City, which is the input name. Then we can save that. Once again, this is a theme. Go back, open up the preview. We can toggle and see, yep, now that input is hooked up. So we can slowly start building up our app using the UI editor without actually closing it. So we're going to repeat that same thing for pollutants, once again at real speed. And we can see now everything is hooked up. So our inputs are now hooked up to the output. So the app is actually functioning like an interactive Shiny app.
So say you've done this and you're happy. One thing you might be wondering is, like, am I trapped in the UI editor forever? How do I stop? Luckily, you can just close the window, press the big X, and then that shuts down the UI editor. And because the UI editor is always saving your code every change you make, that doesn't matter. You can just shut it down whenever, and it's going to always look like what it does.
Okay, so quickly, this is what our app looks like now. After we've done all we've done, this is what the app looks like if you just run it. It's not going to win any design awards, but it does some stuff.
Adding prose and finishing up
But one of the things that we might notice is, like, we developed this Quarto document. We know all about this API. But if we give this to somebody, they're not going to know what to do with it. Like, what is city? What is pollutants? I don't know anything about that. So we should probably add some prose to explain what's going on so people can actually use our app other than us.
Okay, so now we need to go back into the UI editor to work on that. So how do we actually do that? Like I said before, it's actually fairly simple. All we need to do is, in the same thing where we were before, run the UI editor, add it again, and it pops up, and the UI editor is there. And that's because the code is the source of truth. So you can shut it down and restart it at any point, and it will look exactly like it did.
So now that the editor is actually running, we can add a new text input or text output, I guess, that we've built that I'm excited about, which is Markdown text. And so you can just drag it like you do any other input, and then it gives you this nice big text box on the right. And you can fill that text box in with whatever you want using Markdown syntax. You can make it italics. You can make it bold. If you made the Quarto document in the beginning, you know how to use Markdown. And so we're going to do that to write a description of what the city input is and what the pollutant input is.
And so now it looks good. People understand, but they're scrolling. That's not great. So one more quick tweak of the app. We're going to close it, rearrange stuff, and now the app is looking pretty good. Like I said, not going to win any design awards, but it's certainly functional and something that we can give users to work with, especially if you're trying to deliver quickly, rapidly prototype, this is a good way to do that. I did this in real time in about 15 minutes.
Where we are and where we're going
So that was just a whirlwind tour. Like I said, if you didn't follow all that, don't worry. That really wasn't meant to be a how-to. It's meant to be a what you can do.
But to recap kind of where we are with the UI editor, which is basically after a year of we've had this nice big scary alpha tag on the website saying like use at your own peril, your computer might explode. There were only like three or four computers that exploded though, so it wasn't too bad. We're pretty happy to say that we want to take it out of alpha. We want to say people should come and start using this and the water's fine, come on in. There will, I'm sure, there's still bugs. So if you find them, please report them or if you have features that you want, please put those on the GitHub page. There'll be links at the end.
And we're going to do kind of more of a formal announcement soon, like a blog post and some documentation updates. But you're the first to know that we've taken off an arbitrary label of don't use this and said now you can use it.
But you're the first to know that we've taken off an arbitrary label of don't use this and said now you can use it.
So that's where we are, but where are we going? And so there's a lot of ways that we can go from here, but one of the things that I'm really excited about that we're going to start pushing on is more intelligent server actions. You saw like now you can select server code that exists, but there's some things that we could do to make that process a little bit more elegant, more seamless. So we're really excited to work on that. Also a Python version for PyShiny. And if you're one of the crazy people that wants to use the VS Code extension, it actually does exist already. There is a Python version of the UI editor. It just doesn't do much. There's not that many elements. You're not going to be making a particularly interesting app. But if for some reason you want to try it, good luck. But that's going to certainly be iterated on a lot more in the future, because hopefully we can make it easy to make PyShiny apps the same way.
Okay. So I jammed a lot into a pretty short talk. So I encourage you to visit the website. It has links to the GitHub and all sorts of stuff. Tutorials on getting started and specific tasks. So these are my social handles. If you want to follow me, ask me questions there. Also GitHub's a great place to do it. So thank you so much.
Q&A
Thank you, Nick. So we have time for a question. You were so fast. There is time. And a question I'm going to ask is can you use this Shiny toy that is coming out of the toy face with apps not created with it?
Okay. So in theory, yes. Because the code is the source of truth. That being said, you would have had to have built your app in one of two ways. You could use the new bslib nav bar page or page nav bar. Or use the grid layout grid page. So that's a limited subset of apps. As we develop it more, we're going to add more and more base level things. And then hopefully the idea, the like we've made it phase of the UI editor would be basically any Shiny app. You can load it up and it will let you edit it. But right now, yes, with the asterisk of you better have written it in this very specific set of ways that we have programmed for. Okay. Thank you.
