Vue-Low-Code is an open-source project that enables the direct inclusion of Figma and Quant-UX designs in VUE applications. The novel low-code approach provides a clear separation between design and development teams and reduces the need for design hand-offs and front-end code significantly.

A constant pain point during the development of an application is the hand-off between the design and the development team. Often this process is not frictionless. The design team creates a set of graphics and even interactive prototypes, which serve as the source of truth and specification for the development team. The development team implements the visual design in the desired technology, for instance iOS, React (Native) or VUE. The implementation includes the translation of the design into front-end and business logic, as well as the wiring between the front-end code and the business logic. When the design changes, the front-end has to be changed as well. As the development evolves, the implementation becomes a second source of truth, and keeping the design and the code base in sync can be a painful exercise.

Handoff tools, such as Zeppelin, ease this pain by generateíng code snippets from the visual design and allowing a copy-paste workflow to ensure that the design stays the single source of truth. This approach can be further accelerated by using code generation tools such as Supernova. These tools take the visual design and generate front-end code. The developers take-over the code, improve it, include the business logic and add the wiring to the generated front-end.

This approach works perfectly when the design is fixed. However, in agile projects the situation is often different. The design changes frequently, in particular in early iterations. New user input and insights are gathered, and the design is improved to reflect the new learnings. Code generation fails at this point. It is not possible to simply regenerate the code base, because it would overwrite the manual changes that have been done by the development team. The solution of these tools is to generate a new code base, and leave the tedious task of merging up the developers.

Low Code as a solution

Low-Code is a term which describes a family of technologies, which aim to minimize the amount of manually written code. The intuition behind this approach is that certain aspects of an application can be visually modelled by domain experts. These models can be interpreted at runtime by special software components. The visual model serves as the single sources of truth in the application. Vue-Low-Code adopts the Low-Code idea for the development of user interfaces.

The tricky decision when it comes to Low-Code is to find the right balance between modelling and coding. For user interfaces, the front end code is a great opportunity for Low-Code, as the design is always created in a visual design tool. Business Logic is different however. Some aspects like workflows can be easily modelled with tools like BPMN, but complex decision logic or connections to backend systems are often easier expressed in code. The main question is where to draw the line.

Some tools try to apply the Low-Code paradigm for the entire user interface and create App Builders, that allow for instance the visual configuration of data operations or REST requests. In practise, this methodology suffers from several major drawbacks. First, it usually requires a lot of interactions with a manyfold of menus, text- and dropdown boxes and so on. This makes the creation very cumbersome. Simple operations that can be expressed in one line of code, take much longer and make the developers less productive. Second, this approach is prone to errors. While code is checked by the compiler (and other utils) automatically for errors, visual tools lack the sophisticated and mature validation capabilities that developers are used to. For example, simple typos can lead to problems and debugging is often more difficult when compared to a full fledged development environment such as Visual Studio Code. Last, the closed nature of these App Builders, makes it impossible to utilize the wide ecosystem of external libraries such as NPM.

We have therefore decided to focus the Vue-Low-Code project solely on the front-end part of a user interface, and leave the implementation of the business logic in code. The core of the solution is the low-code component which reads the visual design and creates the front-end automatically on the fly. As a result, changes in the design are immediately updated in the application. The wiring between the front-end component and the business logic is achieved through method and data binding. Quant-UX has a special data view (see the image below), which allows to define the method and data binding, whereas Figma has a dedicated plugin.

For example, when a user changes the value of a text field and clicks a button, the data variable that is bound to the text field is updated and afterwards the method that is bound to the button is executed. The implementation of the methods and data happens in plain JavaScript and leaves the developer with the strong tooling support that they are used to. To make this approach suitable for real application development, the Low-Code component allows full UI customizations through extension points and custom child components.

We believe this approach offers the best balance between visual modelling and coding. The visual design of the user interface is created in Quant-UX or Figma and the business logic is implemented in VUE with the development environment of choice. As a result, the development process is simplified as there is no hand-off and the amount of front-end code is drastically reduced.

Working with Vue-Low-Code

Using Vue-Low-Code is dead simple. Once an initial design (even wireframes) is ready, the developers add binding meta data to the design. This meta data contains the wiring between the design and the application data and business logic. In Quant-UX there is a dedicated "data & code" view to set the low code related meta data. In addition, Quant-UX supports a wide variety of ready to use components, such as checkboxes, input fields or even repeater grids and table components. Figma is different as it is a vector based tool. Even when a rectangle looks like an input field, it is still just a rectangle. Therefore an additional step is needed. The Figma plugin allows the developers to specify which UI elements to use, e.g. text input fields.

Afterwards, the Low-Code component must be imported into the VUE application and configured with a link to the design file. The design is automatically rendered without a single line of UI code. Also, prototyping links work out of the box. The developers can focus on the implementation of the data objects and business methods. Through the wiring defined in the plugin, data is shown at the right places and the business logic is invoked on user interactions. Changes in the design are automatically updated, and as there is no front-end code, there is no risk of code breaks and similar complications.

How does it work under the hood?

The Vue-Low-Code is just another dependency. The component is usually placed at the root of the application. It loads the design from a file (or during development from the Figma or Quant-UX API) and creates the required Vue child components and CSS styles.

The data exchange between the LowCode component and the application is based on a ViewModel and data binding. In the plugin, the developers define the path of the data variable that should be bound to a certain UI element. The ViewModel holds the UI related data, and allows a clean separation between front-end and business logic. When a screen is loaded, the LowCode component will populate the element with the right data from the ViewModel and user changes are automatically written back.

The wiring between UI elements and the business logic is also defined in the Figma plugin or Quant-UX data view. The developers specify the name of the method, which should be called for a certain event, for instance when a user clicks on a button, or data was changed. During runtime, the LowCode component checks if a method with the given name exists and executes it.

Extensibility was a key concern during the implementation of the LowCode component. The generated CSS code follows a simple pattern (.screen-name .element-name) and can be overwritten or extended to introduce for instance hover or focus styles. Sometimes it is not possible to model the desired behavior of a screen section in the design tools. For such scenarios, it is possible to define custom VUE components in the meta data. During runtime, these components will be loaded and placed into the design. The developer has the full freedom and fine grained control over behavior of these components.

The Vue-Low-Code and Quant-UX projects are OpenSource and free to use. You can find more information at our GitHub pages:

Vue-Low-Code - Project Home and documentation
Quant-UX - Open Source Prototyping
Figma Plugin
Figma Template