Less is More: How Reusability in Appsmith Helps You Build More with Less Code

Effective developers reuse as much of their code as possible: the most experienced developers tend to, ironically, write less code than their junior colleagues. In addition to often being in more strategic roles, a large part of this is because they understand the value of reusability and design and implement their code to leverage as much existing work as possible.

This article is a summary of some of the key points I discussed at Appsmith’s recent BUILD! Event. It explores reusability on the Appsmith platform and shows how you can streamline your development process by leveraging these reusability features for your own projects.

Experienced developers leverage reusability to build more in less time (data based on estimates by Sage McEnery at Modern Stack).

To compete with larger teams, small teams and individual developers must avoid duplication of work when building apps. They will also look to build on the work of others in the development community by using libraries, templates, and community-provided tutorials and tips to extend their own abilities.

Larger enterprises also seek to avoid duplication of work not just within a single team but across their entire organization, while at the same time striking the right balance between governance and innovation across a large team.

Appsmith provides solutions to both of these scenarios. We provide all of the features that smaller teams care about in our Community version, while providing additional features that are important to large enterprises in our commercial plans. Let’s examine the Appsmith features that can help you drive reusability in your internal app development teams.

App-level reusability helps you move quickly and start a full-fledged application from scratch right out of the gate by reusing an entire application. Here are the Appsmith features that enable app-level reusability for your organization:

Appsmith stores all of the information that makes up an app — including datasources, queries, JS, and widgets — as JSON-formatted data that can be exported and imported to any other Appsmith installation, completely duplicating an application.

Appsmith supports Git, the industry standard for tracking and managing code updates. You can view your history of changes and, if something goes wrong, roll back your Appsmith apps to a previous state to recover. You can also fork your applications and import them to another Appsmith deployment, allowing you to efficiently deploy code changes to multiple running applications.

All of the features that you’re accustomed to, like committing code, branching, forking, and merging, are available right in Appsmith’s IDE so you don’t have to worry about any external tools for source control.

If you’re building an application to solve a problem, it’s likely that others in the community have come across a similar problem. In these cases, it’s wise to reuse what is already out there rather than reinvent the wheel.

Appsmith’s built-in template library and community template library provide full app templates, built by fellow Appsmiths who are constantly sharing their code and ideas with the community. Before you start a project, it's worth checking our template libraries to see if someone's given you a head start.

Templates are also a great way to learn how to build out certain features in Appsmith. You can see how developers solve problems using Appsmith's features, including datasources, queries, and widgets.

The benefits of community members sharing their code with the wider community are clear, but what if you only want to share your application only with users who have access to your app? To address this, you can make your Appsmith applications privately forkable. This is just like providing a template for your colleagues to work on, but it remains private to your organization.

Being able to reuse an entire application is important, but what about when you want to reuse work from only part of an application? Page and subpage-level reusability features allow you to copy work with more granularity so that you can reuse only the parts of applications that you want.

With page-level templates, you can fork only the pages you need in every application, then add new pages as necessary to customize for your own use case. This is especially useful for commonly reused pages like login forms and dashboards.

You don’t have to stop at the granularity of an entire page. You can break down the individual elements of the pages in your application (including queries, JS Objects, and widgets) with partial import/export. This is one of the best-kept secrets right now at Appsmith that not many developers know about.

Partial import/export is also the foundation of a new Community feature that we’re working on called Building Blocks. Building blocks are collections of widgets, queries and JS Objects that can be bundled together to add specific functionality to your app – like editing data or performing a table lookup. You can then share your own building blocks or reuse ones from others to spin up your applications far more quickly.

Now that we’ve looked at how to reuse entire applications and parts of applications, let’s look at some ways to reduce duplication of work specifically when using Appsmith UI widgets.

As you would expect in any drag-and-drop app studio, Appsmith’s UI builder allows you to quickly copy and paste widgets elsewhere within the same app or across apps to spin up a UI even faster. But what you may not know is that you can copy and paste nested widgets.

This means that if you have a container widget surrounding other widgets, you can quickly replicate the entire block of widgets rather than copying and pasting them individually. This can be a huge time saver, especially when you want to create a similar dashboard with different data across multiple tabs. You can just copy the container to a new tab then go in and adjust the queries.

Manually dragging and dropping multiple widgets into a container can be tedious. Instead, you can quickly highlight and group them inside of a container widget. You can then copy/paste the single container widget or select the container widget on the partial import/export menu.

In addition to being able to readily re-use Appsmith UI elements, you can also re-use code stored in Appsmith queries and JS Objects.

To move or duplicate a JS Object or datasource query for reuse on a different page within the same Appsmith application, you can click the ”three dots” menu next to it.

If you want to reuse JavaScript code across different applications, the best option is to host your own custom JS library in a common repository that you can clone as needed across all of your projects.

We like to use JSDelivr because it’s a popular, free CDN to host open-source projects. It integrates well with npm and GitHub, allowing developers to import any .js file in a Git repository into a JavaScript project. And if you update the code in the library, JSDelivr will automatically update it across all apps.

We use the Appsmith Foundry Custom Library to host our own JS libraries for the Appsmith community. It’s also easier than it sounds to set up a repository like this for yourself. Check out our Custom JS library tutorial to set up your own.

But wait, there's more! These reusability features are just the tip of the iceberg and are available in every version of Appsmith, including our community and self-hosted versions. In addition to these, we’re rolling out enhanced packages and modules functionality for commercial users.

Packages and modules are a private library of reusable queries, JS Objects, and widgets that are centrally managed to help with governance and standardization across your self-hosted instances. They help you build your own private libraries that can be updated, versioned, and managed in one spot and propagated across your entire organization.

If you want to join the packages and modules beta and get access to other upcoming features, upgrade to the Business or Enterprise edition of Appsmith!