As a backend developer frontend tasks have always been painful, even now with all AI tools still it is not easy for me. I can do frontend work, but it takes ages to make it good enough to say I like it. I have always wanted to use simple and easy UI design tools to create simple desktop GUI apps. I tested many libraries and UI frameworks and still cannot find any I can enjoy using. The most user interfaces are either web-based or heavily influenced by web standards. HTML and CSS are the powerhouses of flexible and responsive layout design, but for desktop and mobile applications, other approaches are also used. I started researching about the different approaches for building a design using markup or coding language. I found these.

Declarative Design

Declarative design is focused on describing what the UI should look like rather than how to create it step-by-step. UI code is often separated from application logic, creating a clear distinction between what elements look like and how they behave.

  • Key Idea: Define the end result.
  • Example: HTML, SwiftUI, React, and Jetpack Compose.
<button>Click Me</button>

Pros:

  • Simplifies reasoning about the final UI state.
  • Automatic updates when state changes, reducing errors.
  • High-level and concise, ideal for clean layouts.

Cons:

  • Limited control over the exact rendering process.
  • Complex behaviors may require additional abstractions.

Imperative Design

In imperative design, you specify how to build the UI through sequential steps. Every element and behavior is explicitly coded, creating a detailed blueprint for the UI. Most of programming languages are imperative so this is the most primitive way to build UI, fully coding line by line the whole design. Without using templates/views or other abstractions to separate UI from the logic and data.

  • Key Idea: all the UI design/styling and other visual features have to be written with code
  • Example: Traditional Android, Python + TKinter, C++,
Button button = new Button("Click Me");
container.add(button);

Pros:

  • Provides precise control over UI creation.
  • Suitable for complex or highly dynamic UIs.

Cons:

  • Verbose and harder to maintain as applications scale.
  • More challenging to organize as complexity grows.
  • to see the full design you have to build the project

Compositional Design

In compositional design, the UI is built by nesting smaller, reusable components in a hierarchical structure. Often used in declarative frameworks, compositional design combines elements of both declarative and imperative approaches.

  • Key Idea: Create complex UIs through reusable, modular components.
  • Example: Flutter, React, Vue and Jetpack Compose (nested widgets or components).
class MyDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Do you want to proceed?', style: TextStyle(fontSize: 18)),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () { print('Yes Pressed'); }, child: Text('Yes')),
            SizedBox(width: 10),
            ElevatedButton(onPressed: () { print('No Pressed'); }, child: Text('No')),
          ],
        ),
      ],
    );
  }
}

Pros:

  • Modularity and Reusability: Components are self-contained and can be reused throughout the app.
  • Scalability: Tree structures make it easy to manage large UIs by breaking them down into smaller, manageable parts.
  • Separation of Concerns: Each component focuses on a specific UI element, encouraging clean code.

Cons:

  • Deep Nesting and Complexity: Excessive nesting can make code difficult to read.
  • Overhead for Simple UIs: For simpler interfaces, compositional structures can feel overly complex.

Data-Driven Design

In data-driven design, the UI is determined by data structures or configurations. This approach is common in dashboards, reporting, and no-code/low-code platforms.

  • Key Idea: UI is generated based on data inputs.
  • Example: Platforms like Appsmith or OutSystems use data configurations to render tables, charts, and other components automatically.

Pros:

  • Simplifies the creation of complex data-driven UIs.
  • Ideal for straightforward interfaces where customization isn’t needed.

Cons:

  • Customization can be challenging, requiring significant changes to adapt to specific behaviors.
  • Errors in data can easily break the entire UI.

There is no best approach all depends on the project objectives, the team skills and preferences. Some are for tech savy people some are for experienced developers. Declarative design is ideal for static, predictable UIs, while imperative and compositional designs excel with dynamic or complex UIs requiring specific behaviors. Data-driven design is a specialized approach for data-centric applications.

Personally I am looking for:

  • better developer experience - less writing, human readable code
  • components that work out of the box - solid layout and UI components
  • easily extendable components - components + custom classes and events
  • simple syntax and structure - probably Yaml based
  • web based - probaby Svelte