“JS Editor will help developers write clean formatted code which is easy to understand”

JAXenter: Hi Nikhil, thanks for answering our questions. Could you first tell us a little bit about JS Editor?

Nikhil Nandagopal: To put this in context, Appsmith is an open source framework for creating internal applications and custom software. In essence, it helps connect any datasource (databases or APIs) to a UI and then program logic into it via means of JavaScript. So the JS Editor is essential since engineers use it to write custom logic.

The new JS Editor is a full-screen code editor that helps developers create reusable JavaScript variables and functions as JS Objects. These JS Objects can be used anywhere across the Appsmith platform using the mustache bindings.

It is an upgrade to the input boxes that enabled developers to use JavaScript anywhere on the platform to handle bindings, transformations, actions, workflows. It had excellent auto-complete, slash commands, linting, and debugging features. However, all this had to be done in the small input boxes on Appsmith’s property pane. This was extremely cumbersome, especially when writing larger blocks of code.

With the JS Editor, we’re moving closer to having an IDE-like experience within Appsmith.

JAXenter: How will JS Editor help improve developer productivity?

Nikhil Nandagopal: The JS Editor will help developers write clean formatted code which is easy to understand. The JS Editor affords developers more space to write code with proper indentation which drastically affects the readability. This is essential for developer teams doing code reviews on business critical logic. The JS Editor will also enable developers to create reusable code configs and functions so developers don’t have to repeat themselves. All of this leads to better code that is easy to maintain and refactor for developer teams.

SEE ALSO: “CASL is an isomorphic JavaScript permission management library”

JAXenter: What issues did you set out to address when creating JS Editor?

Nikhil Nandagopal: Our primary goal was to create a full-fledged code editor to help developers write JavaScript with access to all the supported libraries without any distractions, and to overcome the space constraints that the existing input boxes for writing JS presented, especially while writing large blocks of code.

To achieve this goal, we broke down this problem into three ideas:

• Introduce the concept of JS Objects files where developers can define variables and functions which they could write in a full-fledged editor.
• JS Objects should be accessed anywhere across a page, using mustache binding.
• JS objects should use linting and autocomplete features developers expect from a full-fledged code editor.

Like other parts of Appsmith, these code blocks are reactive, which means they will automatically re-compute when their dependent data points have been updated. You could make mistakes, and the editor would be forgiving and guide the user to the right path.

JAXenter: Does JS Editor have all the same features as other JavaScript editors? Does it include auto-complete?

Nikhil Nandagopal: While the JS Editor has a lot of features, as mentioned above, it is missing some advanced features like code annotations. However, it has features that other JavaScript editors don’t have such as being able to inspect variables in real time while you write code. And yes, it has auto-complete.

JAXenter: What happens if you make an error in your code?

Nikhil Nandagopal: The JS Editor informs you of the error using our linter and allows you to safely correct it. Your application continues to run even if it is a dangerous error like a null pointer. We also have a built-in debugger with errors and logs generated for the code you write.

SEE ALSO: Operating SAP in the Cloud

JAXenter: What community feedback have you received and how can someone get involved with future releases?

Nikhil Nandagopal: We’re an open source project and people can get involved in various capacities. In the order of involvement, here are a few options:

• They can create issues, or contribute to the development of Appsmith on our Github repo.
• Or they could join Betasmith, our early access program through which they can have their say on early designs and be part of user research for new and upcoming features.
• Finally, they can join our discord to interact with other users and contributors as well as give feedback.

JAXenter: Can you tell us about any plans for the future? What new features are in the works?

Nikhil Nandagopal: The JS Editor is just the start of improving the coding experience on Appsmith. We’re introducing JavaScript Promises as a native part of the coding experience which will make for a cleaner syntax when dealing with asynchronous tasks. We’re working on many loved coding interactions like code refactoring and auto-formatting. We’re integrating Appsmith with core developer workflows by allowing you to connect your applications to Git and we’re introducing themes to improve the look and feel of all our applications.

The post “JS Editor will help developers write clean formatted code which is easy to understand” appeared first on JAXenter.