Low Code
You can turn your Quant-UX (and Figma) designs into fully functional VUE applications with the Luisa Framework. By ensuring that the design stays the single source of truth, Quant-UX reduces the need for design hand-offs and amount of front-end code significantly.
The full documentation is currently hosted on https://luisa.cloud.
The handoff problem
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 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, which includes the translation of the design into front-end code and business logic, as well as the wiring between the two. 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 generating 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 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 source of truth in the application.
Quant-UX 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. Certain aspects like workflows can be easily modeled 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 bases. 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 of entire applications 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.
Quant-UX and Vue-Low-Code
We have therefore decided to focus the Quant-UX 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 Vue-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, which is defined in the design canvas. 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 useful 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 and the business logic is implemented in VUE.js 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.
As a result, Developers can focus on business logic and backend connectivity, while the design team can iterate fast through different ideas, without impacting the development team.
- Zero Code rendering of visual design and animations
- Clear separation of UI and business logic
- Designers can use the powerful visual design tool
- Developers can focus on code
- Developers can use the tools and frameworks of their choice.
- Easy extension with custom callback functions
- Full support of data binding.
- Simple extension with custom components
- Simple extension with custom CSS
- Rich library of stylable components.
The QUX component avoids this issue, by running the code generation on the fly during program execution. All UI related code (HTML, CSS, Animations, etc.) are created behind the scenes, while the developer can focus on the implementation of the business logic. The connection between design and business logic is done through a set of simple, yet powerful, mechanisms such as data and method binding and an extension API.
The workflow
Quant UX supports a collaborative workflow where designers and developers work on a single source of truth.
A possible workflow might look like:
- The designer creates an initial design in Quant-UX
- The developer adds data binding and method callbacks in Quant-UX using a dedicated view.
- The developer sets up a new project (Vue.js for now) and includes the QUX component
- The developer loads the design from Quant-UX and creates the required methods and fills them with business logic.
- The QUX component renders the design and invokes the callbacks in clicks.
- Changes in the design are transparent to the developer, he just reloads the design from Quant-UX.
Read the docs
The full documentation is currently hosted on https://luisa.cloud.