Javascript retool best practices

[Steven_W]

So I've read this post about best practices:

Extend your Retool Apps with JavaScript

Best Practices with JavaScript Purpose of this tutorial We’ll build additional complexity and logic on our Approval Dashboard use case by leveraging JavaScript transformers and queries. Our JavaScript examples showcase the differences between transformers and queries, and how you can leverage both to operationalize your applications with critical business logic. Who is this for? This tutorial is for builders who have started to create their first app on Retool and want to build additional comp…

1. I wonder. Is there any overhead for using many javascript queries in retool. Is it better to split them up or combine and is there no performance hit at all like normal modern javascript?
2. Does it matter if 1 transformer is nested in another vs two separate transformers?
3. is it better to use transform on the query vs a separate transformer? are there any benefits?
4. are there any benefits of using the success event handler on a js query vs using .then() on a query?

[TRF]

I like these questions actually. I find some of the answers seem to be maybes. The first question you have peaked my interest because I have used multiple different queries. Mostly because I was afraid of hitting performance issues when it came to thousands of lines of data because it definitely can hit performance problems like any website. I would split transformers based on use though.

When it comes to nesting transformers I find it best to just find ways for it to handle both separate though. But I think this is use case specific or just how you prefer your code organized per app. The same idea of use case specific goes for your third point. I’ve used the query transformer a lot and depending on the data load found that the transform results is actually great for injecting my own data.

On your fourth point I can recall one time I have ever used then() and I feel like if it works then why change it. Success is nice but I’ve used a lot of then() in my retool workflows and it seems to work similarly to success. Maybe there is less customization with then()?

I’ve only recently really gotten into using more JavaScript. I’ve found I heavily use SQL to handle data and find JavaScript in the end would shorten crazy queries. I’ll keep these questions in mind this week as I work because they definitely seem interesting and I’m trying to work more on my JavaScript.

[Darren]

Hey @Steven_W! I love that you're looking to gain a deeper understanding of these topics. That guide you linked is a good place to start - my only other general recommendations are to reduce the dependency tree of your app whenever possible and, when doubt, check the network tab of your browser's dev tools and try to minimize network requests.

To answer your specific questions:

1. It might be slightly more performant to combine JS queries when possible, but negligibly so because they are ultimately executed client-side. And there's an upper limit to that recommendation.
2. I don't really think so, but nesting transformers sounds like it opens the door to unnecessary dependencies. Generally speaking, you want to limit the number of inputs to any transformer.
3. After some research and testing, I don't think there's a difference! My initial thought was that the former is more closely integrated to the query and thus potentially processed differently, but it doesn't look like that's the case.
4. Calling query.trigger via a .then callback should be more or less equivalent to triggering it via the success even handler. The former just gives you a little more control!

I hope that helps! Let me know if you have any other questions.