Xyncgas
commented
1 year ago This would be huge investment yet it would make you stand out to be the best cross platform UI framework for people to use, it runs on the browser via canvas so you can use javascript libraries (not for manipulating DOM but for reading file etc), it can output exe so it's like a game that you can run. you can use html to create your next app, or you can use F# to create blazor components defined in C# in a component library which outputs html which draws the UI on canvas, or you can simply use language native elements that's already made available to you :
Here I am going to describe 2 types you would most often use
Layer : ?PositionType * Position * Dimension * ?Style * ?Configuration
Position Type : relative or absolute or etc, using the rules in css
Configuration : you can further configure this UI element, for example what happens during scroll or contextmenu or mouse hover etcInput : ?PositionType * Position * Dimension * ?Style * ?Configuration
PositionType : if it's set to relative (I forgot what's the rule in my own implementation), or dimension is Zero, it expands to width:100%; height:100%; so you may use myLayer.addChildren(Input()) and you have the input inside a layer of its specified width and height
MackinnonBuck
Is there an existing issue for this?
Is your feature request related to a problem? Please describe the problem.
This would be additional feature for blazor, another way to use it
Describe the solution you'd like
Instead of outputting DOM, blazor offers a different way to render a website for performance intensive application, so what you need to do is to select 'Canvas rendering' and write code as usual. After the application compiles and running, you get your regular website you always get, but there is something different about this website if you hit F12 to open the browser's debugger and inspect the elements of this page, you would see that there's only one element inside body which is canvas.
So all your html code and buttons and scrolling still works, but it's inside this canvas, which emulates all the html elements by directly computing the layout and drawing them on the canvas, like a game, according to html's specification.
So what's so huge about this, first of all it's still in beta testing, so there's a lot html features that's not supported and a lot that's supported, because it takes a while to bring these specification into the implementations that generates the UI you are seeing because it's emulating, but it has a couple advantage.
Even though right now it's in beta testing, you can only use simple elements like 'div' in your codes, but you can already do a lot with it, you can create a box, you can put text inside, you can assign contenteditable like you would do usually in html and it becomes an input, you can style it using css to make the border big, to make the background green for example.
Because of the effort to emulate html inside the canvas, there's in fact a layer on top of the html you are using to create the UI that's used by blazor. So technically you don't have to use html, you can use other languages such as C# / python / F# to create elements and listen to the events in ways feel natural to the language you are using without writing any html. Currently there's already nuget package so there is support for C# and F#, so unlike the previous years a new framework feature has considered F# to be supported from day 1 which is good news for idk 15 people on earth who are using F#, it's a good language just no one is using it. Python support and other languages support however is yet to come, it's up to the venders to implement the bindings to this unified layer / toolkit which just a way for drawing UI and handling events it doesn't offer any implementation of button with text inside for example, so presumably if more people are using this feature and blazor gets really popular, which personally it's a pretty big innovation and definitely a new way to make app for people who are sick of using virtualDOM and html to create their applications, once it's popular, we're gonna see more language supports coming from all the other languages.
The UI created this way is cross pltaform, because there's no html displayed in your app it's just a canvas, this means you can write an application using the newest version of html 10 years from now and have it still be running on the first iphone. Or if you don't like to use the newest html features the visual studio has good support for you to just select an html version you would like to use in the project configuration. You can open this application on MAC, on WINDOWS, on mobile devices it will look the same. Meanwhile because your code needs to be running some where even though there's only a canvas, you are actually using .NET to compute the states so it's running in .NET. For browser that supports webassembly, it will be running in webassembly, or if the browser doesn't support webassembly, you can choose to compile your application along with the entire .NET to asm.js which is a subset of highly optimized javascript that runs similarly to native performance which means your app is going to be fast. Lastly there're options to run it side by side, what it means is the .NET engine is running outside of the browser, but it talks to the browser to make changes to it. You can do it directly inside a blazor project, you can do it in a MAUI project (it's a little bit confusing, MAUI was the cross platform attempt by microsoft, it's similar to xamarin in that you can create UI native to a pltaform for example a button that looks native on IOS), you can do it in other languages via packages presumably, where venders only use the unified API from this project and do the communication to the browser and the deployment of the webview themselves.
Additional context
I found this monologue from a youtuber's video in the future, obviously the person telling people about blazor doesn't know everything about it, so please don't use the content as the blue print for everything you are making