Declarative UI

[pychans]

(Maybe my skills are not up to par, just talking about my personal experience using it)
The newly released Declarative UI feels very complex and lacks Pythonic functionality (such as function naming and business update logic), like tic tac toe, which seems to have been optimized by deliberately reducing code volume, resulting in unclear program logic.

[pychans]

I tried to rewrite several modules. I really need to change my thinking. There are both advantages and disadvantages in code implementation.

[FeodorFitsner]

"change my thinking" - exactly! Think about data first. Define data, implement business logic/rules and then provide UI that renders that data to what you need.

The beauty of declarative approach in Flet is that it does not replace imperative, but rather complements it! It's like in web we have browser's DOM which can be modified (mutated) with createElement, appendChild, etc. and then we have React on top of it.

[angelhdzmultimedia]

Everyone is moving to that paradigm. Declarative UI.
Vue with Vine, Angular , React, Solid. Functions as components that are run when there's a change in a reactive property. Either functions that return raw component structure or rendering functions.
Flet is basically Flutter, and that's how Flutter works, classes with a build method (function) that return the widgets to be rendered.

There's even a new JS framework... https://www.ripplejs.com/
Instead of the function keyword it uses component, and no need to use the return keyword.

Apparently is either that, or use a magical proprietary compiler, and they are moving away from the latter, apparently...

Angular is moving away from classes and DI, and now its just functions.

A function can be used as a class. You define internal variables and functions that will act as methods and properties.
They are scoped to the function's body, only that you don't instantiate them like with classes.

class Component:
  def __init__(self):
     self.someProp = "abc"
   def someMethod(self):
      pass
  def build(context):
     return # Some widget or XML like template

vs

def Component():
     someProp = "abc"
   def someMethod(self):
      pass
   return # Some widget or XML like template

And the declarative part is done the same way you would do it in a XML based template:

<Button someProp="someValue" @click="someMethod">

</Button>

vs

return Button(
  someProp = "SomeValue",
  onClick = someMethod
)

I was working first with Python (PyQt), then Dart/Flutter, and now TypeScript//Node/Vue/Nuxt, sometimes Angular.

I'm curious, what are you finding hard with that logic? Or maybe I didn't understand your issue.
Or is it about imperative vs declarative?

Declarative UI is generally considered better than imperative UI because it simplifies development, improves code readability, and makes state management more predictable.

In short:
Feature	Declarative UI	Imperative UI
Focus	What the UI should look like for a given state.	How to transition the UI from one state to another.
State Management	UI automatically reflects state changes.	Developer must manually update every affected UI element.
Code	More concise, readable, and easier to reason about.	Can be verbose, complex, and harder to debug.
Examples	React, Vue, SwiftUI, Jetpack Compose, Flutter.	Traditional jQuery, standard DOM manipulation.

⚙️ Declarative vs. Imperative Paradigms

Declarative UI 🧑‍💻

In a declarative approach, you describe the desired final state of the UI for any given data state.

    You tell the system: "When the user is logged in, show the welcome message and the logout button."

    The system then handles the necessary steps (creation, updates, destruction of UI elements) to transition the UI to match that description.

    The UI is treated as a function of the state (
    UI=f(State)

    ). You change the state, and the UI framework updates the display automatically.

Imperative UI 🛠️

In an imperative approach, you have to manually write the step-by-step instructions on how to change the UI from its current state to a new one.

    You tell the system: "Get the 'user-status' div, remove the 'login' class, add the 'logged-in' class, change the text content to 'Welcome!', create a new button element, set its text to 'Logout', and append it to the main container."

    You are responsible for managing the entire transition and ensuring you've updated all necessary parts of the UI. This is often where bugs (like forgetting to update a label or hide an old element) are introduced.

✨ Key Advantages of Declarative UI

    Simplified State Management: This is the biggest benefit. You only worry about the data (state). The UI framework takes care of the synchronization between your data and the visual output. In complex applications, managing these manual updates imperatively becomes exponentially more difficult and bug-prone.

    Increased Code Readability: Declarative code often reads like a description of the UI structure, making it much easier for developers to understand the intention and functionality at a glance. It often requires less code overall.

    Easier Debugging: Since the UI is a direct result of the state, when a bug appears, you typically only need to check the state value and the declaration logic to find the issue, rather than tracing through a long sequence of manual DOM manipulation instructions.

    Optimized Rendering: Modern declarative frameworks (like React with its Virtual DOM or Flutter with its widget tree) can efficiently determine the minimum number of changes needed to update the actual UI, often performing better than repeated, manual DOM manipulations.