Which is better? AppSmith or Retool - a walk through from UX perspective

By Haonan Chen

Appsmith and Retool, both renowned no-code platforms/tools, assert that they empower users with limited programming skills to develop applications and automate workflows. Typical applications that users can construct on these no-code platforms encompass:

• App development, create common mobile/desktop/web applications
• Workflow automation, automate repetive tasks and processes
• Data integration, connect data sources to extr
  act or visualize wanted information
• ...

In this blog, I will guide you through the CRUD tasks using the aforementioned two no-code platforms, illustrating the creation of a management tool for a blog website. This tool allows managers to perform Create, Retrieve, Update, and Delete (CRUD) operations on relevant data records. I will specifically focus on the data retrieval process as CRUD tasks share similarities in their implementation across these two platforms. I'll compare the functionalities that are crucial for non-technical users and highlight which platform offers a better user experience (UX) perspective.

Before delving into the development of CRUD applications on both platforms, consider watching the following video to gain a brief understanding of the capabilities of each platform if you're interested.

AppSmith in 100 seconds

How to Retool: A Getting Started Guide

Enviroment and Data

For both no-code platforms, I'm accessing their demo applications on the cloud. You can easily find and use their cloud applications by registering on their respective sites: Retool's at https://retool.com/ and AppSmith's at https://www.appsmith.com/.

To implement a management tool, it's essential to have our data prepared, which can be in the form of Excel sheets. In this case, I'm using structured data, as it more closely resembles what we might encounter in a real environment. If you're not well-versed in databases, Excel sheets can also serve as data sources. For both no-code platforms, there is no distinction in using Excel sheets or databases, except for importing the data.

For a blog website, common data entities include users, posts, comments, and likes. As a result, I've designed and populated four data tables with either random data or authentic data generated by the Large Language Model (LLM) - llama2-7b. If you're interested, you can find the codes here: https://github.com/bianyuanop/CSI5122-A2.

Below are the declarations of the data tables and their fields. The term "fields" here corresponds to the column headers in Excel, and "records" are akin to the rows in Excel.

Data tables

No-code App Development

Our objective is to establish a connection between our application and the current data source, followed by performing CRUD operations on it. This goal is divided into two sections: the first subsection involves development with Retool, while the second part entails development with AppSmith. The workflow is as follows:

1. Connect data source
2. Conduct CRUD tasks

Retool

Let's log into Retool and look around to see what we can do. 

Observing the layout, there are widgets and other tools panels on the left, with detailed functionalities/properties panels on the right. The main application is situated in the middle. The issue at hand is that upon opening the window, which takes up half of my screen, the interfaces appear too small for comfortable visibility on a 4K screen.

Connect data source 

Let's connect our data source. 

Confusingly, there aren't any other places in the project window that provide us with entries to add a data source except for adding from the "Code" panel.

Navigate through menu -> resources 

Furthermore, in comparison to the entry shown in the preceding image, it is evident that the data source configuration panel in the first .gif is not as comprehensive as the second one.

Configure & test data source but password field is missing

Therefore, when users attempt to add data sources that require a password for access, it proves ineffective and results in a connection error. Consequently, users must invest time searching for alternative entries that permit them to input the password for the database, leading to a wasteful exploration of the system.

Query and Displaying blogs

Instinctively, we would select the "Code" icon to initiate the data query, given that we previously used this panel in the preceding step to establish a connection with the data source. In the subsequent three images, I will demonstrate the process of adding a query and incorporating a "Table" widget to showcase the retrieved data using the GUI mode.

No select "Action type" is shown

Left "Action type" to be blank

Inserting a table to use content from "query1"

Nevertheless, we are unable to present the data. An error is reported, indicating that our query response is empty, even though we have left the "Action type" blank and received values after clicking the "Preview" button.

Manually writing SQL

Therefore, what I did was manually write SQL codes to accurately query the data, a task that is typically challenging for non-technical users.

Confiscated attributes panel

Refresh attributes

Upon completing the "query," our next step is to showcase the retrieved data using a "Table" widget. As we modify the data source of the table in the right panel, it becomes apparent that selecting the query doesn't automatically update the columns in the table. To address this, users must either manually edit each column using the provided panel or refresh the attributes by clicking the "refresh" icon. This could potentially lead to confusion, as users might associate the "refresh" icon with updating the response from the data source rather than refreshing the column names.

AppSmith

Let's sign in AppSmith and create a project. 

Clicking "New" to create an application

As observed, the interfaces are slightly larger compared to those in Retool, providing users with a clearer and more user-friendly experience.

Connect data source 

Including data sources in AppSmith has become simpler, as they've created a separate panel specifically for this purpose, as opposed to Retool, which combines "Query" and "Datasources."

Adding a new data source

Moreover, the pop-out panel includes all fields we need, including the password, along with the capability for testing configuration as Retool. 

The same panel after testing and configuring

Conduct CRUD tasks

Creating a CRUD application in AppSmith is an uncomplicated task, facilitated by its varied methods. Users can construct widgets directly from the widgets panel, akin to Retool, or utilize the Datasources panel, providing flexibility. Notably, AppSmith distinguishes itself with the powerful ability to swiftly produce complete sites using the "Pages -> generate from data" feature. With these approaches, users can have their applications and widgets ready in a matter of seconds.

Adding widget from data source

Generating CRUD template from data source

Problems 

The most of the problems I met happened on Retool, including 

• Small interfaces on large screen, e.g. needing zooming in on 4k devices.
• Mixing functionality of adding data sources with functionality of composing queries. 
• No selecting function is found when composing a SQL query on GUI mode.
• Widgets won't refresh themselves when data sources are changing.
• Complicate widget interfaces 

While on AppSmith, seems all things are right and clear compared to Retool

Conclusion

In conclusion, the comparison between Retool and AppSmith reveals distinct advantages and challenges within the realm of no-code platforms. Retool, while powerful and versatile, presents certain drawbacks that might impede the user experience. Issues such as small interfaces on large screens, the mixing of data source addition and query composition functionalities, the absence of a selecting function in GUI mode for SQL queries, and complications with widget interfaces can be notable pain points for users.

On the other hand, AppSmith emerges as a more user-friendly alternative, offering a seamless and clear experience in comparison to Retool. Users may appreciate the absence of the issues encountered in Retool, finding a more intuitive and straightforward approach to building applications.

Ultimately, the choice between Retool and AppSmith depends on individual preferences, project requirements, and the specific challenges users are willing to navigate. However, it's recommended for a non-technical user to use AppSmith since it's simple and straight forward that serves as a really no-code platform.