Como muchos saben, he usado a lo largo de años de todo, y he vivido en carne propia casi toda "moda" que se pueden imaginar.
Ahora, para nuestro ERP/Ecommerce estoy usando una combinacion que ha resultado TREMENDAMENTE efectiva, en especial, por lo simple de su operacion.
El backend esta hecho en Rust, pero eso es tangencial, CUALQUIER framework web que genere html y procese FORM/GET/POST es suficiente (osea, web al estilo basico y simple).
Para los diseños la mayoria usa https://getbootstrap.com que esta bien si quieres que se vea exactamente asi, pero hace muy dificil hacer modificaciones. Ahora uso https://tailwindcss.com que es toda una mejora y permite crear tu PROPIO "bootstrap" y generar CSS increiblemente pequeño y eficiente: https://tailwindcss.com/docs/optimizing-for-production.
Ahora, el lio enorme es como darle "interactividad" y eso es todo un rollo. Antes usaba https://vuejs.org, pero al igual que React y otros, hay que REHACER mucha logica del lado del cliente. Ahora uso https://htmx.org (y recien salio https://hotwire.dev que es mas completo), que le "inyecta" la interactividad pero TODO lo haces desde el lado del servidor.
La parte interesante, es que solo necesitas programar la logica del lado del servidor., osea, puedes hacer 100% o 99% a puro Delphi.
Lo que hacen muchos frameworks JS es mandar JSON, y rehacer los html/css en el cliente. Lo que hace htmx es mandar el HTML, luego hace un DIFF y reemplaza lo viejo por lo nuevo, logrando visualmente el mismo efecto, pero sin poner la logica en el cliente. En modo simple, hace un html.replace(Form, with="html from server").
Dicho de otra forma:
https://htmx.org/examples/click-to-edit/
Generas con delphi html simple, con "marcas" donde debe hacer los refrescos:
<div hx-target="this" hx-swap="outerHTML">
<div><label>First Name</label>: Joe</div>
<div><label>Last Name</label>: Blow</div>
<div><label>Email</label>: joe@blow.com</div>
<button hx-get="/contact/1/edit" class="btn btn-primary">
Click To Edit
</button>
</div>
Del lado del servidor, tu recibes HTML tal como si fuera normal (puede ser TODA la pagina si no quieres complicarte), htmx ve que esto fue lo que cambio:
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
<div>
<label>First Name</label>
<input type="text" name="firstName" value="Joe">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lastName" value="Blow">
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" name="email" value="joe@blow.com">
</div>
<button class="btn">Submit</button>
<button class="btn" hx-get="/contact/1">Cancel</button>
</form>
y reemplaza lo viejo por lo nuevo. Con tailwindcss, el "diseño" viaja junto al html:
<img class="w-32 h-32 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
asi que usando la misma idea, resuelves AMBAS cosas: Como se ve, como funciona!
Una vez le cojes el tiro a esto, es muy facil hacer cambios y avanzar la app.