Ballerina Statement Editor

Madusha Gunasekara
Ballerina Swan Lake Tech Blog
5 min readSep 20, 2022

The statement editor is one of the core features that was introduced with the release of Ballerina VSCode plugin v3.1.0 [plugin version history]. This blog post will explain what the Ballerina statement editor is, why it is needed and the features of the statement editor.

What is Ballerina Statement Editor?

The Ballerina programming language provides a powerful graphical editor, which dynamically visualizes the higher-level abstractions of your program. You can write a complete program using this editor without even checking the source code.

Each component visible in the graphical editor is associated with a statement or an action. The statement editor is responsible for creating those statements within the low code mode. The statement editor is a tool that allows you to compose Ballerina statements by discovering the language syntaxes from templates along with the completions, diagnostics and the library browsing support.

New Statement Editor

Why Statement Editor?

Prior to the statement editor, there were several predefined forms to manipulate the statements within the low code mode. Each statement type had its own form and the forms were equipped with completions and diagnostics too.

Old form for variable declaration

However, there were several limitations on these forms which led to the new statement editor. Below are some of the major limitations with the previous forms:

The user must have a considerable knowledge about the Ballerina syntax

Users who are not much familiar with Ballerina were often struggling when filling some form fields. In those cases, they had to spend a few minutes to figure out what was to be added and that was badly affecting their seamless editing experience.

The editor was not scalable to construct complex statements

Since the forms are preconfigured, the users are restricted to construct complex statements. In the Ballerina language specification, most of the expressions are recursive. Hence the previous form approach was not capable enough to render forms for each recursive expression. Due to this, you had to write the entire expression by yourself even without having the completions.

Adding library functions

There was no way to find available library functions within the form and you had to go through the Ballerina docs and write the function call in the form field by referring to the documentation. This was a tedious and time consuming task which distracted you from focusing on writing the logic.

Not having statement-level validations

The older forms were designed in such a way that it validates the inputs only at the field level. Due to this, the end statement was not validated and could contain some diagnostics which were not detected by the form.

Apart from the above mentioned concerns, there was a list of minor issues with the previous forms approach. The new statement editor has been designed to overcome these limitations while focusing on giving a seamless editing experience to the user.

Now let’s have a look at what statement editor makes it the best.

Statement Editor Capabilities

Allows users to quickly discover language syntax

The statement editor is specifically designed for programmers who don’t have much knowledge about Ballerina (Of course you can benefit from the cool features of statement editor even if you are familiar with Ballerina ;)).

Starts with a statement template

You can start creating a statement by selecting the statement type from the plus menu in the diagram and the statement editor will generate the related statement template for your selection. From there you can edit the template to construct your own logic.

Support for adding expression templates

The statement editor allows you to search for available expressions and add those to your statement as a template.

Expression template suggestions

Due to these, you can start writing your programs without worrying about the syntax of the language even if you are completely new to Ballerina.

Library browsing

Statement editor comes with an in-built library browser which allows you to browse or search the Ballerina libraries (Currently support only language libraries and standard libraries). With this you can add library constructs to your statement by referring to the provided documentation.

Browse the integer lang lib

Context based suggestions

Statement editor backs you with contextual suggestions provided by the language server. You will get the contextual suggestions when you are selecting an expression or writing an expression. It also provides you with the available methods or fields of the selected expression as second level suggestions.

Documentation with interactive parameter configuration

The statement editor provides in-place documentation for the function invocations within the statement. You can quickly get an idea about the function and manage parameters within the documentation itself.

Documentation related to creating a HTTP client

Create in-place configurable variables

In the Ballerina language, you can define configurable variables in the module level where the value of it can be updated in the runtime. When you construct a statement that needs to have a value that is updated in the runtime, you can easily add a configurable variable within that statement itself.

Create configurable while declaring an endpoint

Conclusion

That pretty much sums all what you should know about the Ballerina statement editor. Now it is time to try out the statement editor on your own. Please share your feedback or any issue you found on the Choreo slack channel.

--

--