23. Panoramica Web UI

MALDA offre più modi per costruire interfacce utente. I modelli sotto condividono concetti HTTP e di routing, ma puntano a runtime e stili di consegna diversi. Parti da qui prima di entrare in un capitolo specifico. Preferisci un modello per superficie (IDE UI1002 quando un file mescola @PAGE/@AIPAGE con ui.mount/ui.render).

23.1 Scegli il modello UI

23.2 Guida alla scelta

Scegli i componenti a frammenti HTML quando…

• Vuoi HTML renderizzato sul server con aggiornamenti mirati dei fragment invece di ricaricare l'intera pagina.
• I form fanno POST verso handler @ACTION e ti servono aggiornamenti push @LIVE.
• Ragioni già in template HTML e componentFragment(targetId, html).

Scegli gli alberi ui.* guidati dal server quando…

• Vuoi patch incrementali (ui.mount / ui.render) invece di stringhe HTML.
• Componi i controlli come ui.control(props, children?, key?) e tieni lo stato in ui.state.
• Userai l'UIHost embedded (un programma che chiama ui.mount può avviarlo). Non passare HTML a ui.mount.

Scegli HttpServer / @PAGE quando…

• Ogni richiesta deve restituire una pagina HTML completa o un redirect.
• Ti affidi a @AIPAGE o generateUI() per HTML generato da LLM.
• L'app è soprattutto orientata ai documenti (dashboard, wizard, pagine di marketing).

Scegli JavaScript nel browser quando…

• La UI deve girare lato client (giochi canvas, interazione DOM ricca, bundle quasi offline).
• Usi uno stack ibrido: API backend MALDA + bundle frontend MALDA o JS.
• Ti serve lo split @client() / @shared() da un unico file sorgente .malda.

23.3 Come si relazionano i modelli

                    ┌─────────────────────────────────────┐
                    │         MALDA Web UI choices          │
                    └─────────────────────────────────────┘
                                      │
     ┌───────────────┬────────────────┼────────────────┬────────────────┐
     ▼               ▼                ▼                ▼
 HTML fragments   ui.* trees     HttpServer / @PAGE   Browser JS
 (component +     (mount/render  (full pages +        (transpile +
  ACTION + LIVE)   + UIHost)      AI HTML)             dom.* / canvas)
     │               │                │                │
     └───────────────┴────────────────┴────────────────┘
                                      │
                              HTTP / REST API layer
                         (see REST API + REST Web Client)

Puoi combinare i modelli in un unico prodotto quando i confini sono espliciti: per esempio @PAGE per le route di marketing, uno shell di app ui.* e un bundle JS nel browser per un widget interattivo. Vedi 27. Server REST API per gli endpoint JSON che qualsiasi modello UI può chiamare.

23.4 Promemoria sul confine di runtime

• Server (interprete o .exe transpile): HttpServer, client database, agenti, componenti server, @PAGE.
• Browser (transpile JS): helper DOM, API canvas/game, actor locali — niente SQL diretto né filesystem del server dal codice nel browser.
• Ibrido: la UI nel browser chiama le route REST MALDA; il server tiene i secret e la persistenza.

Vedi 2. Strumenti e toolchain (Runtime modes at a glance) per i trade-off tra interprete, transpile e JavaScript.