webui-dev / webui

Use any web browser or WebView as GUI, with your preferred language in the backend and modern web technologies in the frontend, all in a lightweight portable library.
https://webui.me
MIT License
2.37k stars 146 forks source link

Perhaps the web UI could take inspiration from Blazor #437

Closed GodGavin closed 2 days ago

GodGavin commented 1 week ago

Motivation

To be honest, I have a certain fondness for Blazor. It's a great GUI technology, with a relatively simple and elegant syntax, especially the Razor syntax. It effectively combines HTML with backend languages. The Blazor components and server-side binding features are truly powerful tools for development. However, the downside is that it can only be written in C#.

my view of webgui

I believe that WebUI and Blazor share similar technical concepts in the direction of web GUI development. Both aim to render HTML and corresponding DOM manipulation functions without using JavaScript, by combining backend languages with HTML. Currently, since only JavaScript can control the DOM on the browser side, both WebUI and Blazor use dedicated JavaScript libraries (Blazor.js/WebUI.js) as DOM updaters.

This is undoubtedly a more advanced technology. By the way, wasm is in very fast development: After the MVP, to realize the high-level goals of (1) integrating well with the existing Web platform and (2) supporting languages other than C++, WebAssembly needs to be able to: reference DOM and other Web API objects directly from WebAssembly code; call Web APIs (passing primitives or DOM/GC/Web API objects) directly from WebAssembly without calling through JavaScript. Maybe in that day,we can only use backend language to do perfect webui

In comparison, WebUI has some shortcomings in terms of template engines compared to Razor syntax, data two-way binding, and component reuse design. It would be beneficial to directly learn from Blazor's approach.

Example code

https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/try

razor syntax https://learn.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c

GodGavin commented 3 days ago

@hassandraga please consider about this

hassandraga commented 3 days ago

Thank you for the review. I really appreciate it. Yes, Blazor is a good framework. It uses the Razor syntax to combine C# and HTML, then compiles using dotnet to WASM. It is meant to be: Run C# in the web browser using WASM, in a limited sandbox.

the WebUI, on the other hand, does not use WASM. It natively connects the HTML with your native backend coded in your preferred programming language. It is meant to be: Run any programming language from the web browser with full OS API access.

Both use different paths, and WebUI does not need or have syntax. It simply connects the JavaScript object foo() to your native backend foo() function. While Blazor, or WASM in general, are running foo() in the web browser inside a limited sandbox. Both paths are good depending on the project's needs.

GodGavin commented 3 days ago

thanks. what i do not undertand is why in webui we have to write sutpid js code like this ,like u said:Run any programming language from the web browser with full OS API access. can we just write one backend language ,not include js image

in this way below,isn't better,more elegant and simpler,Even if we still need to write JavaScript, why do we need a WebUI framework like this? I really don't understand image


@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p >

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
hassandraga commented 3 days ago

can we just write one backend language ,not include js

The C# you provided, IncrementCount(), is a basic simple example. Now try something more complex like readDatabaseSQL(), or runSystemAPI(), or shutDownComputer()... I believe those examples are not possible in Blazor due to the WebAssembly sandbox limitation, except if you run a Blazor server and connect it using APIs... I'm not sure.

I agree with you that running our preferred programming languages directly inside the web browser and without using another language like JavaScript, is something amazing, but right now, the latest web technologies offers only a limited sandbox to do that, and still JavaScript is mandatory for complex web projects.

why do we need a WebUI framework like this? I really don't understand

WebUI it's not a framework. It's a GUI library.

GodGavin commented 3 days ago

gui what?.you have to write ur own html js and css,webui gui nothing, webui is nothing but a toy

hassandraga commented 2 days ago

gui what?.you have to write ur own html js and css

I believe that everybody makes mistakes, and everybody deserves a chance to learn and fix his own mistakes. Yes, believe it or not, Microsoft WebView2, WebKit, WebUI, WebView, are all GUIs solutions, and not frameworks, even if you definitely need to write your own HTML and CSS. However, you can help yourself more by reading Wikipedia and asking ChatGPT about the differences between a Web GUI and Web Framework. Thank you @GodGavin.