How to Build Internal Tools 10x Faster on Retool

All right. So ReTool is a fast way to build applications, but it's really meant for developers. And the core idea behind ReTool is that it eliminates the need to write custom front-end code. So we allow developers to quickly build these tools and hand them off to various stakeholders.

And so just at a glance of ReTool, we help unite existing back-end systems, databases and APIs, so you all can pull in data from those different data sources and visualize them in one place. And we provide a visual UI builder that is drag-and-drop, and we actually maintain all of those React components, so you don't need to maintain React boilerplate and the JavaScript libraries that come with that. And we're enterprise-grade, so we are able to connect to existing data sources. We're not a system of record, we are just that front-end layer on top of your data sources. We provide built-in access controls, audit logs, and even allow our customers to deploy on-prem.

So the benefits of retool. Things that used to take six to 18 months now take only two to eight weeks. Requirements now can be completely visual. You don't need a designer, PM, engineering manager to scope out weeks of work. You can just have an engineer and a stakeholder in the same room. It reduces the total cost of ownership without having to maintain, obviously, all of those React libraries and legacy front-ends, and it also enables teams to work faster. So instead of engineering being the bottleneck, you could have engineers, analysts, IT generalists, anyone that really has a knowledge of web frameworks and how API requests and JSON works, anyone with relative technical knowledge can go ahead and spin up some quick apps. And so what that really does is it takes your engineers and allows them to focus on the hardest problems of your business.

So a lot of these logos that you see here, they actually deploy retool on-premise. What that means is it's just a Docker image that you pull on into your VPC and run in your own environment. And so for a lot of our enterprise customers, these are some of our features that make retool especially appealing out of the box. We actually handle already a lot of the security aspects. We integrate with SAM and SSO providers, even provide get syncing to manage collaborations on retail applications, and as well as, robust kind of on prem deployment options as well.

So I'll hand it off to Austin for a quick demo. Awesome. Thanks, Anthony. Great. So Anthony just gave us a great 30,000 foot view of retool, but I'm going to show you what it looks like to actually build a fully functional CRUD app and retool in just a few minutes. So you can kind of think of retool as drag and drop react. There's a component library on the right, as well as an inspector for props of a component. And at the bottom is a query builder, where you can actually write a little bit of code to pull data from your data sources wherever it lives, whether it's custom GS, GraphQL, REST, or any of our other third party integrations.

So a classic use case for retools, maybe a customer support tool, maybe you want to be able to search for a given customer, select their profile, and then activate or deactivate their account. It's a pretty simple app, so we can build it in just a few minutes. So we already have a table component, I can grab a text component, so we know what we're looking at. Everything in here just renders as markdown. I can also grab a text input so we can search for a given user. And then what we're going to do next is actually pull in data from our data sources to populate this table. So if I go to the bottom, I can hit this Postgres database, I can see in this list of tables, we have a user's table. So I'll just write a simple select query to pull data from that table. So I'll just say select all from users, order by ID. And when I save and run this query, all of these tables and components and retool are actually just JavaScript variables. So now that the data property of query one has the results of that query. So if I select this table, you can see in this data property, it's currently just a hard coded list of JavaScript objects. But in Retool, you can write JavaScript anywhere in Retool too, by using these double curly brace notation. So within these curly braces, I'll just say, query one dot data. And you can see now I've pulled in the results of that query. And maybe I just want to hide a couple of these columns here. Cool.

So we can add search pretty quickly as well, you can see this text input is called text input one. And if I open the left panel, you can see the entire state of your Retool app as JSON. So this text input has a value property, which you can see dynamically updates as I type a value into the search bar.

So I can add a simple where clause to account for that text input. So I can just say, for first name is like text input one dot value. And since everything in Retool and these double curly braces is just JavaScript, I can add a couple wildcards to the beginning and end to give us a better search experience. So I can save that. I can see if I change it to be I also return Roberto, Elizabeth, etc. Cool.

And the final step, let's say we want to write back to our database, right to activate one of these counts. So I can drag a button, title that activate. And in this on click fan handler, I'll just have to write another query. So I can hit new query. Whenever you want to write back to your database, you expose a nice gooey style interface. So I can say the user's table. I want to update and existing record. I want to filter by the ID, which I can see that table one has a selected row property that I can pull into here. So I can say table1.selectedrow.data.id. I'll mark active as true. And I just want to refresh the data in the table when that query succeeds. So I'll wire this button up to query two. And then I can go into the end user mode to see what this app would look like for the engineers who aren't actually building the tool themselves. And they can interact with the app as you would expect. So you can see here, maybe I want to search for Ben. Click on this user and then hit activate. You can see we've just written back to our database there.