27
September
,
2022
Product

Debugging your apps in Appsmith with the Appsmith Debugger, part 2

Debugging your apps in Appsmith with the Appsmith Debugger, part 2
Ayush Pahwa
0
 minutes ↗
Meet the sidekicks, Logs and Inspect Entity

The first part of this teardown helped you see how the Error pane can save you hours in debugging and build better internal apps. In this one, let’s meet two seemingly innocuous features that can give you debugging super-powers when used right.

Logs

The Logs pane shows you everything logged by Appsmith and, like Errors, in lockstep with the sequence of code execution in your build. Borrowing from the experience of showing logs in general—in the browser console, from a shell, or on your favorite IDE—the Logs pane has four views for specific debugging use cases.

Post_5.jpg (1920×1080)

All Logs

This view shows you all logs timestamped by when we saw them in your Appsmith session. Updated a widget’s property? Wrote a new action to your GraphQL datasource? Ran a JS Object to concat two queries? It all gets logged, including the errors you see in the Errors pane, in a separate view called Error Logs. You will see how that can be useful in a GIF, pun intended.

The All Logs view can be a little overwhelming, though, and a bit of work when you have been at your build for a while. For easier tracking of relevant logs, use one of the three options below.

Post_6.gif (1440×810)

Errors Logs

Everything you learned about the Errors pane applies to this view, too, but there’s more to this view. Here's a likely scenario to show that.

State #1

You have a button to reload a table, presumably to refresh the data from your datasource.

Condition #1

You use the Button property, onClick, which runs the query to fetch the latest data into the table.

Scenario #1

Your query fails.

- On just the Error pane

  • You see just the error for the failing query. Although helpful, it doesn’t offer context for the before and after of the error.

- On the Error Logs pane under Logs

  1. You see logs for the Button click and the executed onClick event .
  2. Because the onClick property is binded to queries and JS Objects, you see the ones that are successfully executed and those that fail.
Error_Logs__Appsmith.gif (1440×810)

The triaging in our example above is especially useful when you have nested queries, several dependent bindings, and a more complex workflow overall.

Console Logs

console.log_in_the_Editor__Appsmith.jpg (1920×1080)

Just introduced in the Debugger, console methods in Appsmith help you see statements for just JS Objects and JavaScript bindings so much better than in the browser sub-window.

Set points in your code that you want to log statements at, view tabular data, or see groups for repeated errors.

System Logs

Post_7.jpg (1920×1080)

Automatically tracking all your interactions with Appsmith during build, System Logs show a helpful trail of activity by descending order of timestamp, especially useful when you want to go back in time or pivot from a point of failure to everything that led to it.

They show up for different situations and interactions for the type of entity you are working with.

With widgets, you see a log when you

  • Drag-and-drop a new widget on the canvas.
  • Update the widget’s properties
    Updating a property also updates all its dependent properties which then show up in System Logs.
Dependent_properties_updates_in_system_logs__Appsmith.gif (1280×720)
For example, when you update the tableData property, you also see its dependent properties like selectedRowIndex, filters, triggeredRowIndex, and so on.
  • Trigger events with an end-user action.
Trigger_events_with_an_end-user_action__Appsmith.gif (1280×720)
For example, when you are using an end-user action to store a value with storeValue or when you want a click-action to trigger an operation like an update or delete and are using onClick, you see them show up in System Logs.
  • Delete a widget from the canvas

With actions, you see them when you

  • Create a new datasource or a query
  • Update query properties like queryName, queryBody, queryConfiguration, and queryProperties.
  • Execute a query
Execute_a_query.gif (1440×810)
This can be either from query pane, running a plain REST API query, a JS Object, or via a widget’s bindings.
  • Delete a query

With JS Objects, you’ll see system logs when you

  • Create and update code inside JS Objects
  • Execute JS Objects
Execute_JS_Objects.gif (1440×810)

Just like errors, system logs are native to entities and have four parts to them.

Parts_of_a_system_log_line__Appsmith.jpg (1920×1080)

The timestamp

Logged as your entities are created, updated and deleted, these little breadcrumbs help you track back from when the error occurred to when it was last A-Okay.

Timestamped_logs_in_System_Logs.gif (1440×810)

The message

Useful during build, the message of the log answers two questions— what were you doing with an entity—creating it, updating it, deleting it—and what happened with your action—success or failure.

  • With widgets, outside of CRUD information, you also see event-specific info like onClick and showAlert linked to those widgets.
  • Queries and JS Objects are straightforward with start and end points that indicate if they were updated, ran, and failed.

The source

Like errors, a system log has two parts to its source—the entity’s name.the type of entity, e.g., SELECT1.TABLE1.WIDGET.

Redirect_from_an_Inspect_Entity_sub-window.gif (1440×810)
👌🏽 Appsmith Experience plug

Clicking the source from the logs takes you to the associated entity anywhere in Appsmith, be it a widget, a query, or a JS Object. Noice!

The response

This doesn’t always show, but when it does, it can be useful confirmation of a binding working, a query running successfully, or a JS Object executing completely.

  • For widgets, you see which properties are updated when you are configuring them and how.
    Say you’re updating the text widget’s background property and you don’t see it change on the canvas. Track the log to the response for a quick confirmation of that and troubleshoot the canvas next.
  • For queries, you’ll see two different logs—the start of a query run and the status of its execution.
    The first type of log will show you configuration details of the query—helpful to verify if the config matches the request.        

{
    "timeoutInMillisecond":10000
    "paginationType":"NONE"
    "encodeParamsToggle":true
    "body":"SELECT * FROM public."users" LIMIT 10;"
    "pluginSpecifiedTemplates":[
        0:{
            "value":true
        }
    ]
}

  • The second type will throw an error if the run fails. When the query runs successfully, it shows all the parameters that the query ran with and the time taken for the response.

{
	"response" : [...],
	"request" : {
		"actionId" "6321c1193668£71e£7caala2"
		"requestedAt" : 1663912830.640344
		"requestParams": {...}
}

  • With JS Objects, you see the response from the function as a JSON after an object is successfully run. This shows you how Appsmith handles the function while evaluating and running it and can be useful for spotting conflicts, undefined references, or troublesome variables.

Inspect Entity

Borrowing from a modern browser’s Inspect Element feature, Inspect Entity lets you see incoming and outgoing entities for any widget. These entities can be queries, JS Objects, or even other widgets.

Group_8480.png (1920×1080)
  • Incoming entities are those that fetch data from the datasource into the widget.
    For example, if the data on a table is populated by a Postgres query, you’ll see the query name under the Incoming entities column.
  • Outgoing entities are those that can specify the data that’s to be sent to the datasource in a typical CUD operation and then send it to your datasource.
    Say, a text widget is binded to a table's selectedRow property, you will see the text widget’s name under the Outgoing entities column.

The Inspect Entity pane lets you see dependencies for all your widgets on the canvas, especially useful if you have a medium-complex app with several widgets working off of each other. For example, when you have a parent widget or query that controls bindings on other dependent widgets---call them children widgets---, Inspect Entity can show you all those children when you click the parent and quickly take you to any one of them directly.

In combination with Errors, Logs and Inspect Entity round out the Debugger for several scenarios during build and save you hours in building an app end-users love. Try out the Debugger and let us know how you like it, what it's missing, and what we can improve. Our Discord is the best place for that feedback.

Debugging your app in Appsmith with the Appsmith Debugger, Part 1
20
September
2022
Product

Debugging your app in Appsmith with the Appsmith Debugger, Part 1

Debugging your app in Appsmith with the Appsmith Debugger, Part 1
Ayush Pahwa
0
 minutes ↗
#
product
#
errors
#
troubleshooting
#
debugger
Product

That title is a tongue twister, innit? Almost.

Here’s a meme that isn’t. It’s just the painful truth.

Debugging_is_like_being_lost_in_a_deser.jpg (749×500)

There is no perfect code, so you know debugging is inevitable, but it’s still a chore and is as crushing often times as the meme claims it is.

But, while debugging is inevitable, making it painful is optional, especially when you have the Appsmith Debugger. We have claimed we champion developer experience as many times as we could before without being brazen about it. We think. So, we thought some more and said, “Let’s prove the claim, too.”

“Wait, wait. What is the Appsmith Debugger?”

In 2021, we shipped the Appsmith Debugger, a set of Chrome DevelTools-like features that have helped you investigate and resolve errors in Appsmith.

We recorded a video for it in a series about the Debugger, talked about it in our docs, and referenced it enough times to make you groan about our obsession with errors. If this is the first you are hearing of it, get on our Discord so we can tell you some more about it.

Why we did this

Browser dev tools are as helpful as a magnet when looking for iron fillings in a pristine haystack. To the untrained eye, they can be downright criminal, too.

Browser_debugger.jpeg (960×506)
Source: Reddit

Sure, sure, they nest groups of errors and there are separate tabs for the console and the debugger, but meh! There’s a sea of error messages, system logs, console logs, and then there’s you swimming in it.

Before we shipped the debugger, you saw,

  • errors inside a widget's Property pane that floated on your canvas which probably already had several widgets
  • the Editor’s Response pane, which clubbed legit responses with errors

The Debugger solved several of those problems.

Post_8.jpg (1920×1080)

What’s the Debugger have

Available on app.appsmith.com and our self-hosted release images, it can be called by toggling the debug icon—the one that looks like a bug—on the bottom-right corner of your Appsmith screen or with CTRL/CMD +D.

Inside the Debugger, live three panes, Errors, Logs, and Inspect Entity, each with their own uses. In the first part of this two part post, we will break the Error pane down for you and see how it can save you hours over browser dev tools in debugging.

If you would much rather just learn about Logs and Inspect Entity, bookmark this post. We will link to Part 2 in five days. :-)

Errors

Borrowing from a browser’s dev tools sub-window but improving on it radically, the Error pane lists all errors that we see when you are building inside Appsmith. Familiar examples include syntax errors from JavaScript bindings, reference errors from queries, and datatype mismatch errors.

Errors in the pane are specific to an Appsmith entity. Translated from Appsmithlish, it means you see helpful error messages about a faulting widget, a rogue query, or a stubborn JS Object.

Untitled.gif (1440×810)
Example of a faulting widget and the error beaconing it
Untitled.gif (1440×810)
A JS Object error

  • These errors get logged to the pane in lockstep with the sequence of code execution in Appsmith.
  • The Error pane is the default view when working with widgets—most noticeable if you have the Debugger sub-window resized as in the pictures in purple—so you know what’s going wrong and where in real-time.
  • The Editor's Error Pane is smarter. It doesn’t automatically switch to the Error pane—Response is the default on this screen—when an error occurs. Instead, the Debug icon lights up in red with a numeric notification that’s like a running ticker for the number of errors the Debugger sees with your queries or JS Objects. Click it to open the Error pane.
  • Every error you see in the pane follows a template with a few helpful pieces of info to help you debug.
image_high.jpeg (1920×1080)
Numbers on this image correspond to bullets below. Images in sub-bullets below show what the sub-bullet talks about.

The timestamp

Logged as your code executes or a value evaluates with your widgets, these little breadcrumbs help you track back from when the error occurred to when last it was A-Okay.

The issue

Depending on the error type, you will see a couple different kinds of issues.

  1. With widgets, you’ll see the faulting widget property’s name. An example of this is the commonplace The value at tableData is invalid, occurring when the property tableData expects an Array<Object> datatype but you have an Array<List> instead.
  2. With queries, you see more specific errors, often specific to the datasource you are running your queries to, often indicated by status codes returned by your failing requests.
  3. With JS Objects, we straight-up level with you about the parseability of your functions. Parseability probably isn’t a word, but you know what we mean.

The source

This has two parts to it—the entity’s name.the type of entity the troublesome one is, e.g., SELECT1.WIDGET. As is obvious and has been to you, SELECT1 is the entity’s name and WIDGET is the entity type.

👌🏾 Appsmith Experience plug: Clicking the source takes you to the faulting entity anywhere in Appsmith, be it a widget, a query, or a JS Object. Noice!

The message

This is the most helpful part of the message, beginning with Error and ending with a helpful bit of text or a number.

  1. Because widgets bind to queries or JS Objects using JavaScript, quite a few errors you see are the same as familiar JavaScript errors like SyntaxError or TypeError. Some other errors show is not defined. This is when a variable, a query, or a JS Object isn’t defined, but you have specified it in the Property pane.
  2. In the Editor, these messages go a step further and call out the line number in the editor that has the faulting code. For example, Line 2: Unrecognized token '$'. This type of message has three parts to it.
Post_9.jpg (1920×1080)

1. The type: Error

2. The string: relation “public.user” does not exit

3. The line number: Position 15

😻 Appsmith Experience plug: Clicking the message will open our in-app docs finder and run a helpful search to show you top docs matching the error.

Response from queries or bindings

This doesn’t always show, but when it does, it can show you helpful responses with query params or evaluated values of data bindings.

Post_10.jpg (1920×1080)
  1. With widgets, you’ll see the evaluated value from the bindings.
  2. With queries, you’ll see the payload from the API you are querying.

“How does all of this help?”

Consider two situations we have painfully drawn for you.

State #1

You have several queries and widgets on your way to a complete build.

Condition #1

You have nested queries inside JS Objects. Meaning, these queries are binded to multiple widgets via JavaScript transformations and have dependent parameters with each other.

Scenario #1

A query fails and returns an error.

Without the Appsmith Debugger

You decide to sift through the browser dev tools sub-window, trying to locate the faulty query in something that looks like ↓.

The_browser_console.png (1920×1080)

When you find the first problem query, you’re hoping against hope this is your patient zero.

  1. If so, congratulations aren’t quite in order yet. You’re still going to have to surgery the query to see what went wrong where.
  2. With browser tools, may you be lucky and find a fix in the first hour.

Most times, though, Murphy’s Law applies.

  1. Meaning, you will need to find the last problem query.
  2. Repeat steps #1 and #2 with all the sub-steps in between

If you have a friend who’s on Appsmith, you hear them say, “Good morning. Do you have a ready app? No? Try the Debugger. 🙄”

With the Appsmith Debugger

You see all the errors from all the failed queries In the Error pane and nothing else to crowd your investigation.

  1. You quickly scan by the type of errors.
  2. Errors are listed in the sequence of query execution.
Post_11.jpg (1920×1080)
So you can simply scroll to the first failed query, and investigate further.

  1. The error message tells you what failed with the params in which line, neatly indented neatly for you.

Don’t remember the query’s name? Pfft! We got it. Click the error message, and go right to the error source.

Trouble troubleshooting? Click the error message and find super-relevant docs in Appsmith’s doc finder.

At the end of it, you save a whole night’s hair-pulls, wake up bright and fresh, sip your coffee, and wonder why some people still use browser dev tools. 🤔 Maybe you should refer them to us.

State #2

You have the data from a REST API and the table for your dashboard, but you have left the chart for the very end. You are sensible like that. Charts are tricky things in general.

Condition #2

You have to bind the chart widget from Fusion Charts or one of our defaults with a query that should output the format Array<{ x: string, y: number Required }> as input to the widget. This will need JavaScript transformations.

Scenario #2

You get a datatype mismatch error.

Without the Appsmith Debugger

You toggle around the floating EXPECTED STRUCTURE, EXPECTED STRUCTURE - EXAMPLE, and EVALUATED VALUE panes to understand the chart widget’s configuration.

You have a JS Object for the transformation, so you now switch back and forth between the canvas and the JS Editor for each possible fix in the JS code.

  1. By now, you have console.loged your way to the browser tools sub-window. Magnet, meet Iron Fillings In A Haystack.
  2. Forgot the change you made to the JS Object five tries ago? Yeah, well, no System Logs, so what can you do, right? Maybe note each change on Sublime or VS Code from this point on.

With the Appsmith Debugger

Post_12.jpg (1920×1080)

Right after you run the transformation, you see the floating-pane-that-we-don’t have-a-name-for-yet show you some red and the Error pane light up with all your errors, timestamped and sequenced by the order of code execution.

  1. You see the type of error and the evaluated value for the faulting entity. Stick to this without worrying about the unnamed floating pane.
  2. Your query has trouble getting a response from your datasource, so you see that error, but hey, you also see the binding failure of that same query with the widget.
  3. No hunting for the query or the widget you want to troubleshoot. One click from the Debugger and you are transported to the associated entity.
Debugger_with_click-actions__JS_Editor.jpg (1920×1080)

You see all the errors from the transformation in one pane with click-actions for each one of them.

Docs_finder_from_Response__Appsmith.gif (1440×810)

Error messages not enough? Click the error and choose, Browse code snippets, and voila! You now now search for the chart + the query right there and see some of our helpful docs.

Made it to here? Your life inside Appsmith is going to change.

Also, this is just part one of this two-part breakdown. What’s next?

https://media.giphy.com/media/3kIGmlW0lvpnmF3bGy/giphy.gif

Better than post-credits. A whole other movie featuring Logs and Inspect Entity. Meanwhile, here’s a few things you can do.

Until the next Debugger post, Appsmiths.

P.S.: We love you.

Why I Chose to ‘Build in Public’ for my 4th Startup
16
January
2022
Product

Why I Chose to ‘Build in Public’ for my 4th Startup

Why I Chose to ‘Build in Public’ for my 4th Startup
Arpit Mohan
0
 minutes ↗
No items found.
Product

It’s scary to have your work out there in the public eye. What if it’s not good enough? What if we’re not on the right track? What if we look foolish? All these insecurities are human, and CTOs are not immune from having them. But I can also tell you that they are the best reasons to build something (you’re incredibly passionate about) in public. Why? Because transparency and community involvement help us in both the short and long term.

This is my 4th startup and have seen many ups and down in my decade long journey. I saw quick explosive growth in my mobile gaming startup, an acquisition of my payment startup, failure of an AI based startup and numerous pivots in between. I’ve also seen investments from marquee investors like Sequoia, Accel and YC. And then worked for a few years to cool off. But the startup bug in me is too strong and I decided to startup again.

Along with my co-founders, I am now building Appsmith, a drag-and-drop framework to build functional and beautiful internal tools.

Why am I so obsessed with internal tools?

Well, I was the one building them and maintaining them in my previous companies. I know the drill all too well: There’s never enough time, specs are ever-evolving, and resources are always low. And they’re relevant at all stages of the organization. For a young startup, they’re critical as you find early scale and you need tools to automate the various tasks so that your engineering team has the time to focus on building our core product. And as a large company, you need a way to manage the hundreds of various internal tools that you have as well as use it as a way to empower multiple teams to take decisions without it burdening the engineering team.

It’s not just source code that’s public; everything we do, including our design strategy, is available for public view. (Our Figma files and Miro boards if you’re curious!)

Building in public is something I’ve begun to love, I’ll tell you why.

You Live, and You Learn

When you have a like-minded yet diverse community working together to create a product, the quality and value spec is incredibly high. The spirit of collaboration to solve problems drives open source projects. I can say this is true for Appsmith. For us, public road-mapping worked in a few different ways. It helped us get our priorities right and allocate the right resources for features. It also helped us engage with our community, gain valuable users’ input, and keep them hooked.

While we initially hoped to build a JS Editor quite early in our product lifecycle, it kept falling from our priority list. Having a highly engaged community repeatedly bring it up, helped us stay accountable to our plans. When we launched the JS Editor, everyone loved it!

Not just this, Git Sync is another community-led feature that we’re almost ready to launch, and it will enable developers to version control their apps. In fact, what we considered as some of Appsmith’s smaller features like the audio recorder widget, and document viewer were prioritized because people asked for it! One of our users contributed a custom chart widget which increased the availability of chart options to 100+!

Good things are great, but bad things take you to hell. There was a time when we introduced a change in how the row selections work in the Table widget (our most used widget). From a technical and UX point of view, it was an improvement to the Table widget. However, it inadvertently broke a lot of user applications. Feedback was unrelenting! We reverted the change within two days, and are now extremely cautious about versioning our changes so that existing user applications don’t break. It was a critical learning moment for us.

By trial and error, we have learned to think more deeply about product architecture before building on it.

Feedback is the Food of Champions

Everyone can openly see what we are working on, create new feature requests, influence product features before they are formally rolled out, and inspect the actual code base to understand why a particular bug exists. In some scenarios, they can also help us fix it! With all this openness comes honesty. And you don’t really have to ask twice for honest feedback from developers! While they can be brutal, they can also be loyal and supportive.

We often felt convinced about a feature internally, but immediate user feedback made us re-examine our decisions. Let me share a few examples here:

Floating Property Pane: We believed it was better to have the property pane as close to the widget as possible, assuming that it would make the property pane better. However, based on feedback from the community, we’ve now docked it to the right-hand side of the app, and of course, the response has been tremendous.

Entity Explorer: We modeled our entity explorer after VSCode to make all the relevant widgets, files, etc., more visible and accessible. We got feedback from users that it’s very cluttered and hard to navigate the explorer menu. We’re now simplifying and making it easier to read and grok for larger applications.

Deployments: Appsmith requires five Docker containers to run (Server, Client, MongoDB, Redis, and Auto update). Earlier, we shipped with a script that would configure all these containers as we believed that it would give developers flexibility in their installations. But we saw a lot of failures. We immediately changed course and now ship with a single container with everything included. Users installing Appsmith now see a 100% success rate on the first install. This is a massive difference in terms of experience.

We think of this feedback as a precious two-way communication, where we can evaluate our product thinking by involving our direct stakeholders (our users) in the conversation. It’s honest, it’s raw, and it’s a fantastic north star to have.

You Can’t Steal Communities

Transparency isn’t just great for us, it’s great for the entire ecosystem. Sure, features can be copied, but users’ love and investment in a product can never be copied or stolen.

At the heart of building in public is trust. Trust is a hard-earned, fragile value that no marketing spend can buy. We invest our time and energy into our product, and we see our incredible community of users do the same. What will help us go forward is to develop our user education initiatives to empower our users and make time to always listen to what our users have to say. Our learnings are as critical as our wins. I see them as essential milestones; they become moments of learning from the community.

As we’re pushing into 2022, I can’t help but think of the tremendous growth we’ve had here at Appsmith in the last 365 days. In quantitative terms, it has meant adding 28 new drag and drop UI elements to our widget library, increasing data source integrations to 16, fixing 3267 bugs. I could go on (alternatively, you can look at our exhaustive year-ender page)! Putting everything out there for public scrutiny has helped us take an authentic look at our production priorities, enabling us to focus on things that truly matter to our organization: Enabling developers to do their best!

A version of this blog was previously published on Product Coalition.

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go
6
October
2021
Product

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go
Abhishek Nayak
0
 minutes ↗
#
announcement
#
open-source
Product

Appsmith launched a year ago, and since then, we’ve seen tens of thousands of engineers make Appsmith a part of their internal tooling tech stack. We’ve seen a lot of community contributions that have made Appsmith better for everyone

Today, I’m thrilled to announce that we’ve raised $10.5mn across two rounds of funding from Accel, Canaan Partners, Bessemer, and others. 

We couldn’t have done this without the love from our users and support from the community. We aim to use this capital and make Appsmith the best choice for every internal software project.

Appsmith, as an idea and subsequently as a product, came out of a series of interlinked personal experiences. A few years ago, when I was building Mob Show, a mobile game, all I wanted was for our daily active players to increase. In two months, we went from zero to five thousand, and we were doing everything we could to double that number. We wanted growth. Sure enough, we went from 5000 to 120000 DAUs within a week! We should have been thrilled, but we felt overwhelmed and exhausted. Why? Because unprecedented growth comes with unprecedented challenges. Scaling at such a breakneck speed amplified the number of bugs and problems in the game. Customer support requirements grew by 30x, while our team size remained the same. This growth was hell. We found ourselves scrambling to build internal tools that would help us make sense of this growth. 

I’ve seen this before when I was running Gharpay, a hyperlocal e-commerce company, where we relied on at least ten complex internal tools. These included backend tools for delivery personnel to manage and track their orders, tools for the accounting team to manage reconciliation on a daily basis, and of course, customer support tools to ensure speedy resolution of service requests. In fact, Appsmith’s co-founder, Arpit (who was also Gharpay’s CTO) was responsible for building and maintaining these apps. 

My co-founder, Nikhil, has also experienced the side of growth that is not pretty. Things go wrong wherever they can. And things will go wrong. As the head of product at Eat.fit, Nikhil saw orders scale from 50 a day to 50,000 a day in a short period. Customers began to have negative experiences; orders would go missing, delivery partners couldn’t find addresses, and there were payment issues. If these experiences are anything to go by, it’s that internal tools are critical to the success of every business. Nikhil, Arpit, and I feel strongly about the state of internal tools and believe that they are the backbone of any company’s success - old or new. 

So if Nikhil, Arpit, and I were getting together to create something together, both logic and intuition have led us to the Appsmith journey. We started Appsmith with a simple goal: To help engineers build the best apps they can to help their teams while avoiding repetition and monotony. Frontend and backend development for simple applications have become incredibly complicated. It feels like we are building the same things repeatedly but just using different programming languages.

Appsmith is an open-source low code framework to help developers avoid repetitive work like modifying UI components, writing integrations, creating a login page, etc., and building beautiful internal apps.  We have worked hard to create a product that developers use at Swiggy, Dunzo, WazirX, and thousands of other beloved companies. This has also meant that developers, HR, Operations, Finance, Admin, Customer Success, and Management teams have saved thousands of hours and boosted their productivity with Appsmith! 

Over the past 12 months, we have kept a razor-sharp focus on helping companies develop custom software that talks to different data sources. And each new day has been spent refining the product, building community feature requests, preempting the needs of our users. 

Since our launch, we’ve shipped:
35 UI widgets • 15 data integrations • JS editor • Debugger • Real-time commenting • A 2 min docker container setup

We’re gunning for more; brace yourselves! The Appsmith team and their speed of shipping genuinely amaze me. 

What Will We Do Next 

We’ll be shipping much-awaited features like white-labeled apps, custom widgets, mobile responsive apps, collaborative real-time editing, integration with multiple SSO providers, custom authentication, audit logs, and server-side JS execution in the next few months.  We will also be improving front-end customization while ensuring snappy performance. So we will be building a lot of new widgets, adding more integrations, introducing dynamic height components, custom theming, and supporting custom CSS.

Overall, we will be focussing on five areas: 

  • Improving the quality and complexity of the frontend that can be built using Appsmith. 
  • Creating better coding and data integration experiences for our users. 
  • Putting more effort into integrating Appsmith in the software development cycles of engineering teams. 
  • Developing and shipping features specific to larger teams, such as SSO, audit logs, granular role-based access control, etc. 
  • Creating an excellent repository of learning resources and material like tutorials, guides, and templates so that users can learn how to use Appsmith faster. 

We are fully prepared to fulfill our promises, and I know that our stellar team has already started work! 

Welcoming our Investors 

We’re thrilled to have the best minds in the industry backing us. Accel led the seed round. Canaan Partners led the Series A round with Accel, Bessemer, OSS capital, and Prasanna Sankar, CTO of Rippling.

By the community, for the community 

Appsmith is a community product. Open source creates public goods that benefit a lot more people than proprietary products. I believe that low-code, combined with the power of open-source, is the way to empower businesses large and small. 

Before Appsmith, there was no open-source project that could build such custom internal tools and admin panels. There are many low code products, but we saw that no competitor was willing to reveal the source code, enabling engineers to contribute changes. I think buying proprietary software is like buying a car without an option to fix it. Open-source helps you make small improvements and changes to the software. We also saw that our competitors would only work with companies with large budgets and ignore the experiences of small teams or individual developers.

One of Appsmith’s users told me that volunteers use it in France to help new immigrants avail of government services and enable them to navigate their new life. Appsmith is a forever free open source project that has helped developers build for food banks, non-profits organizations, schools, universities, and government agencies. It’s immensely satisfying to support such users.

Before I end, I would like to take a moment to thank the entire team for building such a fantastic project in a very short time.

Without you, there is no Appsmith. 

Coming to this point was a lot of fun, and in many ways, it’s the first step towards a long road. We expect it to be rocky, but it will be fun as heck. 

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
1
June
2021
Product

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
Rishabh Kaul
0
 minutes ↗
#
open-source
#
github
#
community
#
general-advice
Product

It’s been only about 9 months since Appsmith became a GitHub project. Since then we’ve amassed about 4500 stars, which is a simple way for GitHub users to bookmark repositories that interest them. We’ve been very curious to learn more about these people. Who are they? What are they like? Are there things we could do to accelerate awareness and interest?

I recently came across this incredible post from Spencer Kimball (CEO, CockroachDB) based on the code that he wrote many year back and thought of running it over our Stargazers to learn more.

Why did we do this?

As a project which took an open source turn, we’ve been building in public. Most of our team members are going out and answering questions on Discord, Github, Reddit, Hacker News and Twitter. A lot of what we achieve is going to be determined by the community that we build. We like to think of stars as bookmarks and while we’re thrilled at our star growth, we also know that it’s often just one of the many indicators we’d like to consider when learning about how we’re being known in the wider technology ecosystem. The ultimate joy is going to be to see people build and use our product and there’s no replacement for that and the team is burning the midnight oil to gather feedback, observe usage and be there to help in any way we can.

That being said, given that Spencer did most of the heavy lifting, we were curious to learn more about our Stargazers and see if there’s something we could pick up from this analysis.

How did we get here?

As a project that hasn’t particularly invested in paid marketing, a lot of our outreach has been primarily through engaging with our community and writing content.

Content also has a compounding effect: we can repurpose it, we can start a thread on a new discussion board or link it back to twitter. By going through our cumulative growth in stars over the last 9 months and checking if that overlapped in any major releases or news items gave us a sense of what might have contributed to it.

Content & Community Matters, with a little help from luck.png

In our case, our first major content post which drove traffic was when Arpit (our CTO) wrote about Appsmith (on Hashnode & Dev.to).

Trending on Github gave us an initial bump, however the credit for this goes to the early community that was nurtured which allowed us to trend in the first place.

A big part of our steady growth honestly was just via our team being extremely active on public forums. This Reddit post got us a lot of traffic. As did our showcase on Hacker News . We were also featured in The Hindu (a major newspaper in India). And then sometime in April, something interesting happened, we got a couple of mentions from the community in China and Korea and that led to a lot of users from these places, which in turn led us getting mentioned in RunaCap’s list of most popular Github Projects in Q1 of 2021, as well as constantly trending on niche categories of Github.

In the meantime, we’re continuously coming up with a lot of listicles around low code platforms like this , this or this . None of these by themselves are needle moving, but together they all add up and it helps that this category is gaining traction.

Needless to say, we intend to continue to invest heavily in content, from tutorials to showcasing how our community is using Appsmith to other learnings around building software and teams.

Where are our Stargazers coming from?

In total, our Stargazers are from over a 100 countries. This data however isn’t complete since getting the exact location from a Github profile often becomes tricky. Why? For starters, only 60% of our Stargazers mentioned a location. Within these, folks have mentioned multiple locations, misspelled names or mentioned places like Mars ;)

However, from an indicative perspective, these are the top 25 countries.

Users who star_ We are one world.png

For our team at Appsmith, at the very least, it means having a global outlook towards our community, as well as keeping a lookout on certain geographies, where we might see Appsmith suddenly gain traction.

What else are our Stargazers checking out?

Starring on Github is super easy and people can go trigger happy with it. Still, analyzing the other repositories our Stargazers star gives us a directional sense of their interests. Our Stargazers starred a total of 247K repos. Of these, 222K repos had < 5 stars, which sorta points towards a power law that we’ve come to expect from social networks.

Here are the top 20 repositories

Screenshot 2021-05-30 at 8.31.26 AM.png

Our users love dev tools which should come as no surprise. Some common themes that are noticeable here: Tools that make it easy to create UI, tools that help automate workflows and tools that help on the database side of things. And since Appsmith is highly relevant to users trying to accomplish each of these things, it makes sense that these end up becoming the most correlated repos.

How much do our Stargazers contribute to open source projects?

29.1% (1310) of our Stargazers have made atleast 1 commit to a repository. repository. In total, our Stargazers made about 379K commits, of which the top 10 contributed 127K commits (or 33.5%). Spencer was kind enough to include some base criterion in his code to make the numbers palatable: only repositories with > 25 stars or 10 forks, or 10 open issues were included. This puts the average number of commits at 289 with a median number of commits at 46.

The top 20 active Stargazers had these impressive stats

Screenshot 2021-06-01 at 5.57.41 AM.png

A Networked Platform

Do our Stargazers follow each other? If so, to what extent. To make the data meaningful, we decided to go with only those Stargazers that had atleast 10 followers. This gave us a dataset of 2214 (~49%) Stargazers. Plotting the distribution bases % of shared followers, we see that for 62% of our Stargazers, there was an overlap of atleast 40% of their followers with other Stargazers of the Appsmith repo. Talk about a networked platform! And since we get followers from many countries, we can be reasonably certain that such a networked effect isn’t restricted to one or two locations.

Distribution of Shared Followers with Appsmith's Stargazers.png

Attributes of our new Stargazers

One additional thing that Spencer included in his code was to look at the follower and commit activity of Appsmith’s incoming Stargazers. Honestly, we’re not quite sure of what to make of this data except that there’s a positive (albeit weak) correlation between average follower count and average commits on Github.

Average Followers & Commits for new Appsmith stargazers.png

Why not try it yourself?

Go ahead and use the Stargazers repo yourself to analyze yours (or anyone else’s) repo’s trends. Depending upon the number of Stargazers you have, it can take some time. It took us about 7-8 hours (with a 5K/Hr rate limit).

And incase you're fed up of spending months building internal tools, dashboards, admin panels and what not or are just curious about why these 4500+ folks starred Appsmith, do check it out here !

Building Our Community while Building in Public: Learnings at Appsmith
6
July
2021
Product

Building Our Community while Building in Public: Learnings at Appsmith

Building Our Community while Building in Public: Learnings at Appsmith
Akshay Rangasai
0
 minutes ↗
#
community
#
open-source
#
marketing
#
leadership
Product

User engagement is a catch-all phrase the internet uses for well...engaging with your users. But like all such phrases, it doesn’t mean much without context, especially for an open-source company like ours that builds software for developers.

At Appsmith, we’re evolving from a small project with great support on Discord to a company that is investing heavily in engaging its users. In this post, I’ll walk you through our key learnings over time, with a little bit about what our users had to say at each step of the journey.

  1. Distinguishing great support from engagement
  2. Personalizing interactions with users
  3. Discovery as a core function of engagement initiatives
  4. Using the product to drive engagement
  5. Segmenting users
  6. Seeding content in the initial days
  7. Tracking progress and engagement

Great support is just the first step

We started a Discord channel to brainstorm ideas and learn from our users. Back in January, our Discord was (and still is) active 24x7. We were helping users across time zones all day. Users loved the speed of our support. Support work has remained extremely important for us and @mohanarpit, our co-founder, makes it a point to give shout outs for support work on our internal slack.

CleanShot 2021-07-06 at 17.38.42@2x.png
CleanShot 2021-07-06 at 17.38.57@2x.png

Being available all the time for support was helpful, but we were not generating relevant content. Very rarely were users spending time discussing the product with us. We needed to do more to communicate with users around what we were doing, and had to find ways to show them that we cared about their inputs. While speaking to our users, we also learnt that they engaged with us to request features, report bugs, and plan for the future so they could continue using us. Asking for support was just one of the ways in which they could get their jobs done. Support is what gets users started with the community, but it doesn’t make them stay and get involved.

That’s when we started our newsletter and other content initiatives. In addition to our docs, Appsmith now has a wide variety of videos, tutorials and templates to get users started. We immediately saw an impact and a lot of new users loved us for it, and our non-support channels started getting more active on Discord!

Make it personal and experiment with what works

Almost simultaneously with the content initiatives, we started something we used to call “office hours”. Users could join us on Thursdays and ask questions and receive live support. Our first month was decent, but over time, fewer people joined, and most questions coming up were about future features and timelines. So, on one hand, this felt like a failure because we didn’t get the volume of activity we expected, but on the other hand, our entire team loved interacting with the users. It felt personal and we got the best feedback through these sessions. Some of these sessions also helped users decide whether Appsmith was offering them what they wanted in the near future. There was definitely a great value in having such an initiative.

CleanShot 2021-07-06 at 17.42.21@2x.png

First community call where 3 users showed up

So we furthered the initiative with Community Hours. With Intercom and Discord for near-instant support, we used the Community Hours to speak about our product roadmap, talk about releases and lift the hood around some engineering choices we made.

CleanShot 2021-07-06 at 17.43.50@2x.png

All the features voted for by the community, that we’re building right now (watch)

We had a long list of feature requests and these events helped us prioritize our features to what the community wanted. We also started streaming live demos so our users could see our new features in action while we built complex applications.

This showed us that not every initiative is a success, but if there is value in an initiative, it is worth looking at how we could get the same interactions through a different format. We were so focused on support that it took us time to realize our users were with us in this for the long haul.

Now, we have launched Betasmith to interact with users even more closely. You can join Betasmith here!

CleanShot 2021-07-06 at 17.45.23@2x.png

Discovery is important

It’s easy to ship content, but it is really hard to make it discoverable for people. It is even easier to set up a website or Discord channel, but even harder to get them to work for you.

The trick is to have easy ways to engage with your users and this sometimes means using multiple channels in tandem. We frequently inform all our users about our Discord channel in case they need support. Our intercom chat pops up a couple of times for new users helping them with tips, tutorials and asking them if they need help. Our entire onboarding email is set up to get users to succeed with Appsmith and engage with us meaningfully.

To really drive home engagement, we included an omnibar really early in the lifecycle of the product so people could find what they were looking for easily. Our content efforts were first focused on existing users vs initiatives for real growth. We focused on the problems our users were trying to solve on Appsmith and focused on it than content that was more friendly to new users on SEO. Tying back to our first point, the only reason we believe our content initiatives are successful is that we made them easy to access.

omnibar.gif

Omnibar to the rescue

Use your product

We want to be there for our users, especially while they’re using the product. To make it as non-intrusive as possible, we use Intercom for gentle nudges to help them, hear from them and figure out how to help them succeed. From our analysis, it is surprisingly effective in getting people the help they need and setting them up for success on Appsmith.

At the same time, it is important not to overuse the product for engagement and let our users use the product the way they want. It is easy to get carried away and use the real estate near the banner, navbar and other empty spaces to push for engagement (This is something we argue over every day), but it is important to understand that users don’t use the product to engage with us. Engagement is a great side effect of a good product.

Not all users are the same

This seems obvious but is hard to put into practice. Not all users want the same features or the level of support or the roadmap. Segmenting users here helps to figure out which channel is more effective to engage with them.

Our users include startup founders (who are super active on Appsmith) as well as CTOs of large companies (who use our product once in a while and don’t personally engage on the platform). We need different strokes for different folks. For example, support requests work great on discord for founders and engineers, but might not be the most optimal channel for CTOs of larger companies.

Discord was great for instant support, but it was a nightmare for users during peak hours. Repeated questions, examples and JavaScript snippets were clogging the pipeline. Before we officially launched community.appsmith.com, users had already found the website and started asking questions. We quickly realised that our users were seeking a place where they could search for pre-existing queries or have their queries answered without the hassle of Discord. This also signalled a preference for more elaborate answers to questions about the direction of our project.

We’re still in the process of getting our forums to be as active as our community, and I think we will get there fairly soon, simply because of users’ preferences in where and how they want to engage with us.

CleanShot 2021-07-06 at 18.01.47@2x.png

Seed common spaces!

The one thing I believe we definitely did right from the beginning, was seeding our forums and Discord community with content. When our users saw that there was activity, they were happier to post, argue and discuss with us across a variety of channels.

But what really helped us do this easily was that we decided that as contributors to Appsmith, we were essentially the group that set the bar on community interactions and formed the core part of the community. We operated as members of the community first, and used Appsmith to create our own internal apps, and posted questions that came up naturally in that process.

CleanShot 2021-07-06 at 18.03.14@2x.png

From a user on our forums

Track your progress:

While this is not something you do directly for the community, as a project, it is very important to see where you and the community see returns in the efforts. At Appsmith, we use GitHub for issues, discourse forums, Reddit, Discord, email and intercom as channels to engage with users, and it is really complicated to see if our initiatives are working long term, without measuring retention and engagement for the community.

Luckily, we found orbit, a product-focused on community engagement that helps us figure out how users are interacting with various touchpoints in the community and the engagement of our users. We can now keep track of important metrics like messages on Discord and posts on discourse along with the number of returning members, and tie it with product metrics to improve user experience and engagement.

CleanShot 2021-07-06 at 18.03.55@2x.png

Orbit Dashboard for Appsmith

CleanShot 2021-07-06 at 18.04.48@2x.png

Tracking messages on Discord to measure the engagement

Some things to keep in mind:

While these ideas have worked for us at Appsmith, by no means will it work for everybody across the board. Also, one obvious engagement tool I haven’t touched upon in this article is email. Email is how most engagement starts, and there is tonnes of content about using email and making engagement effective online. The other problem with email, is there is a fine line between engagement and spam and thus we use email judiciously with a cap of one email a week and not more. We’re always thinking about how we can cut down the email we send our users and engage with them without spamming their inboxes.

But in the spirit of ticking all the boxes, you can check out our live demo on how we email users who are churning out. As we have scaled, we have also used Appsmith to build a ton of our internal engagement tools, to great effect.

This article provides an overview of the initiatives we’ve undertaken at appsmith to drive user engagement and build a community. We hope some of these initiatives will be useful for your context. Do let us know what you think!

One Open Source Project for Admin Panels, CRUD Apps, and Internal tools
21
August
2020
Product

One Open Source Project for Admin Panels, CRUD Apps, and Internal tools

One Open Source Project for Admin Panels, CRUD Apps, and Internal tools
Arpit Mohan
0
 minutes ↗
#
news
#
showhashnode
#
javascript
Product

We’ve all spent time on building internal tools which could be CRUD apps, admin panels, or complex workflows. These kind of internal tools are used for:

  1. Analytics and reporting
  2. Customer data views for sales & support teams
  3. Configuration managers for client-visible UI used by technical and non-technical people
  4. Multi-step data workflows which involve multiple participants(like content moderation tools or customer KYC at fin-tech startups)

These tools often aren’t very interesting to build because of the repetitive work involved like building UI, writing CRUD APIs, setting up authentication, & managing deployments.

Creating Admin Panels, CRUD Apps, and Internal tools quickly!

I decided to create Appsmith because I couldn’t find a project which did most of the work for me and also easily customizable.

How does Appsmith work?

1. First setup Appsmith using Docker. Read instructions here for a 2 min setup process.(docs.appsmith.com/quick-start#docker). Or try our online sandbox

2. Go to localhost or your machine’s public IP to see the login page. online sandbox.

3. Create a new application and name it.

Create an application

4. Connect to a database or API. Today MySQL, Mongo, Postgres, and REST apis are supported. The gif below shows me connecting to an API.

API creation

5. Go to the canvas section and choose a UI widget. Appsmith ships with 16 components like tables, different charts, map viewer, forms, etc. In the example below I’ve used a table component.

6. Modify the table property to display your query results by writing {{queryname.data}}. You can code in JS and use Lodash functions inside {{ }}.

7. Trigger an action through events like onClick, onTextchange, onSelectedrow, etc for CRUD operations.

Event trigger

1. Click deploy to see your app in a URL. (You can set up a custom domain in the setup script)

Deploy

2.Invite users after assigning them a role. They can sign up via a form login or with their Google/Github accounts. Make your app publicly viewable to allow access without a login.

Share & invite

So this is how you build a simple app in less than 10mins. Access an app I built on Appsmith here.

Appsmith is the first open source project to build internal tools. If you like the project, please star our GitHub project.

What features should we add to Appsmith?

TL;DR: Appsmith is an open source framework to build apps for analytics, workflows or CRUD operations. Replace all your internal tools with one project. See GitHub repo or try an example app here.