Can UI Builders help you?

Disclaimer: this article is not a comparative study on UI Builders. I’ll try to answer the question: do you really need to code your UI?

What is a UI Builder?

A UI Builder provides a way to create a Graphical User Interface (GUI, or UI for simplicity) by drag and dropping graphical components (Buttons, Text Fields, Date Pickers, …) to a white screen. Then, the components are resized, re-arranged and configured to get the required look.

Should developers use UI builders ? Or should they code the interface themselves?

There are pros and cons to both approaches:

Pros

• Very useful for Proof Of Concepts (POC), to share swiftly the interface look to the stakeholders

• When the UI is built, it is much easier to adapt and modify the pages

• The interface can be modified quickly, sometimes during a discussion or meeting

• The roles can be separated between the interface designer and the developer. Ideally the designer is a person with an excellent knowledge of the business

• You do not have to decide what is the right underlying technology and handle its updates (i.e. for a web UI: Angular, React, Vue, Web Components ?)

Cons

• You have to use a set of graphical built-in components from a palette. Adding your own components, or modifying a built-in component, is sometimes not possible, or not easy

• You cannot build a pixel-perfect interface, you have to use the choices done by the UI Builder. For instance, the gap between components may be imposed

How to choose?

As you can see, the choice will depend on your needs. If you have an obvious and precise idea on your interface, with specific graphical requirements, with specific graphical components, then perhaps you should code the interface. But if you don’t have a very precise idea on how your interface will look like, the best choice is perhaps to start designing it with a UI Builder, and make it evolve regularly. I think the latest is by far the most common, especially in an agile process where stakeholders are invested in the UI definition.

An important subject to take into consideration, especially in the web area: the choice of the right technology for your needs can take a lot of time, and these technologies are evolving very quickly. Choosing to adopt a UI Builder avoid to handle all this.

Another important point is that many UI Builders are dedicated to a specific platform. For instance, XCode Interface Builder is for the Apple platform, Bonitasoft UI Designer is for the Bonita BPM/DPA platform (see below).

Finally, once the UI is done and all the stakeholders are happy with the look & feel, a connection to the business data is needed. This allows to make the link between the UI and the data.
For instance, an e-commerce site shows a page listing all the available products. A Data Table graphical component is connected to a Rest service that fetch the list of products with the related information.
The available APIs to the business data is to be taken into consideration to choose an UI Builder. Some UI builders may not support your API types.

Examples

In my opinion, the best way to understand how the UI builders works is to take few examples. I propose to show them in action with short videos, this is the best way to explain graphical tools such as UI Builders. This is obviously a very short introduction to the tools, the goal is not to demonstrate all their possibilities, or compare them.

I have chosen 2 of them, mainly because I have already used them:

• Bonitasoft UI Designer

• JavaFX Scene Builder

Other examples : Xcode Interface Builder for the Apple platform, or Visual Studio Forms Designer for the Windows platform (this video shows it in action).

Bonita UI Designer

Bonita is a Digital Process Automation (DPA) platform that allows you to create applications based on business processes. For instance, a claims management application.

The UI designer is a graphical development environment for creating pages and forms for a Bonita Digital Process Automation (DPA) application. It is a web-based tool, which allows to create and update pages for business applications, forms to start process instances or execute human tasks, and application layouts that apply to all pages of an application.

Create a page

This could be typically done by a designer, which defines the UI.

Link a page to business data and preview

Once the UI is correct, the connection with the business data (to register the claim) is done via a Rest service (which typically stores the claim in a database).
This is a very simple connection for simplicity: usually, the connection is done to the Bonita Rest services to handle business processes.

JavaFX Scene Builder

JavaFX Scene Builder is a visual layout tool that lets users quickly design JavaFX application user interfaces, without coding. The result is an FXML file that can then be combined with a Java project by binding the UI to the application’s logic. The tool is also integrated with IDEs, that can be used to write the application logic (controller).

Create a page

The UI is defined, then previewed to check the UI behaves correctly on window resize. As above, this could be typically done be a designer.

Link to Java code

Once the UI is done and behaves as expected on window resize, it’s time to bind it to the Java application. For this, each UI control is identified by an id (fx:id), and the events or actions are bound to a method name. Once this is done, the generated controller skeleton can be used as a starting point to implement the Java controller, using the JavaFX APIs.

Conclusion

I hope you are now convinced that using an UI Builder could have a lot of benefits to build and modify a user interface easily. It allows to separate even clearly the interface (view) and the application logic (controller) which can be done by different people, with different skills and using different tools . Then, it provides a way to prototype and demo quickly the interface to the stakeholders very early in the development process. Finally, modifying the look & feel is done in a few minutes.

---