Graphical User Interfaces (GUIs) have become a fundamental component of modern software systems, defining how users interact with applications and how information is perceived (nonetheless if you are looking for a conversational user interface, we have you covered as well!). But, as you probably know, this can also be one of the most painful tasks for developers.
Designing a GUI often involves switching between multiple tools and technologies, dealing with layout constraints, and ensuring consistency between the user interface and the underlying data model. Even in low-code environments, this process can quickly become time-consuming and error-prone when the design and data models are not well integrated.
With the latest release of BESSER, our platform now includes a no-code editor for designing GUIs and dashboards directly within the modeling environment, seamlessly integrated with your class diagram. This enables the generation of complete web applications all within a unified, model-driven development process.
Note: this no-code editor is currently focused on designing dashboards and data visualization, but new features (such as additional GUI forms) to support full CRUD operations are being developed.
GUI Modeling in BESSER
From the BESSER Web Modeling Editor (WME), you can now visually design the graphical user interface (GUI) of your application (no coding required). You can create and arrange pages, forms, buttons, charts, and other interface elements using an intuitive drag-and-drop editor.
This no-code editor is implemented with GrapesJS and includes elements such as:
- Layouts: Rows, columns, containers, and cards for structuring your pages.
- Forms: Buttons, footers, navigation bars, and predefined dashboards.
- Charts: Bar, line, pie, radar, and radial bar charts for data visualization.
- Data Tables: Components for displaying lists of data from your domain model.
In addition to the standard styling properties of each element, you can bind UI elements to entities and attributes defined in your structural model, enabling dynamic, data-driven interfaces.
For example, when selecting a data table component, the settings panel allows you to choose which entity or class from your class diagram should be displayed in the table.
Generating a Full Web Application
As part of the last release of BESSER, a code generator to produce a web application is also included. With a single click, the Full Web App Generator produces:
- Backend: A FastAPI application with SQLAlchemy models, REST endpoints, and SQLite database integration.
- Frontend: A React application implementing your GUI design, with dynamic forms, charts, lists, and more.
- Deployment: Dockerfiles for both backend and frontend, plus a Docker Compose file for easy containerized deployment.
After generating a full web from a structural model and the GUI design, your output will look like:
For easy deployments, you can deploy your application using docker-compose, which create two containers (one for the backend and one for the frontend), and a volume for the database.
You can try the BESSER platform anytime at https://besser-editor.pearl.org
Recent Comments