Proposal to change the UI framework

[bolorundurowb]

The current UI is unwieldy and works by showing and hiding UI elements in a non-intuitive manner. I want to propose rewriting the UI using ELectron.NET and Angular. this gives us the added advantage of being able to make the application cross-platform but comes at the cost of making the app larger than it currently is.

[bolorundurowb]

After doing some testing with Electron.NET, a basic app with nothing going on already consumed over 200MB of RAM and I cannot justify the resource consumption. An alternative would be move to WPF

[curtisy1]

Was about to propose a cross-platform approach the other day actually, but hesitated a bit as I didn't have a look at the code yet.

Either way, I think in case of this project, a framework like WPF would be the best solution (not saying Electron doesn't have its benefits if done right, see VSCode, but doing it right takes a ton of time). About the cross-platform thinking + WPF, I suggest you can take a look at Avalonia. The documentation isn't exactly what I'd call state of the art but it's pretty much the only thing I know apart from Xamarin + Mono or QML.NET.

Another alternative would be to move to a web-based approach with CEF(Chrome embedded framework) but I'm not sure how resource intensive that is as I haven't worked with it so far (also downside is you need Chromium).

If moving away from .NET to a fully browser-based solution, typescript might be the way to go as it's pretty similar to .NET and easy to get started, but I guess that's rather not an option for now.

Just a few thoughts that might be of help in deciding for something. I'd love it to be cross platform most of all and I'd love to help out wherever possible, so feel free to assign/mention me to anything once you/the community makes a decision.

[bolorundurowb]

Thanks for the input @curtisy1. I have taken a look at Avalonia as well trying to see if it works with .NET core as that would help with the cross-platform dreams. In the end, I agree with you that moving the platform to the web would eliminate the potential issues with the native look and feel of the app on each platform while giving us the ability to keep the app logic in .NET. I am open to any other ideas

[curtisy1]

You're welcome! Glad to be of help. I took a look at CEF earlier today and noticed that they currently don't have Mac OS support apparently. So CEF is not an option for now (and as it uses and packs Chromium like Electron, it might be just as resource hungry).

The problem with having a completely web based app would be making it usable for end users. As in they just execute a file and can play around with the exam suite. That's why I'm not too sure of this approach.

Maybe ReactiveUI could be some alternative although I think they just provide wrappers around Avalonia in the end.

[rgfhfdghfgdh435645365]

Would be nice for the buttons to actually show. Full screen and expanding the window never show them. I've reproduced the issue on multiple computers.
https://i.postimg.cc/DZBYLtgz/Capture.png

[curtisy1]

@rgfhfdghfgdh435645365 Please file another issue if it doesn't already exist. But while you're here, would you rather prefer a desktop application or a browser based web app?

[rgfhfdghfgdh435645365]

I would prefer to be able to see next, previous, submit, etc. buttons.

[curtisy1]

@bolorundurowb What do you think about using a hybrid approach? Blazor has a client-side hosting model which would allow for a .NET Core Web Application that runs on the user's machine locally. I tested the demo and it's pretty intuitive, pure C# and extendible with JS interop. It also allows for hosting the generated content on Github Pages, so there'd be both an online and offline version of the app available with the same code base

[bolorundurowb]

@curtisy1 while I have read the blog posts announcing Blazor, I have not tried my hands at it yet. With what you have said, I would take it for a spin and see if it would indeed foot the bill. Thanks for the suggestion

[bolorundurowb]

@curtisy1 I have taken a look at Blazor and I like what I see but it still requires an internet connection to load up the application. I have cycled back to looking at Electron, it seems like the most viable solution for us going cross-platform. I also think going full JSON instead of OEF would be a better way going forward. What do you think?

[curtisy1]

@bolorundurowb That's weird, in my tests it didn't require an internet connection to load. Did you select the client version of Blazor? In any case I set up a default client example that you can find here. Running this requires you to use

dotnet run --contentroot=/home/curtisy/Projects/OpenExamCollection

with your respective project folder.

I'm still in favor of Blazor but wouldn't mind Electron either. However if any I'd choose the "native" approach without .NET wrappers as it would probably reduce a bit of the memory consumption.

Going full JSON definitely sounds like a good idea. Would probably reduce a bit of engineering work, as well as encourage community engagement in creating exams a bit more as it's a well known format.

[bolorundurowb]

@curtisy1 what I meant by requiring an internet connection is when the project goes live, a user would have to open a browser and load the app up before they can access the functionality. I think I have found a situation where we can eat our cake and have it https://cooldown.io/topic/16-getting-started-with-blazor-and-electronnet/ but it still makes use of the Electron.NET project

[curtisy1]

@bolorundurowb I'd see the browser as a plus point because it's bound to work on every system. I think I can understand your concern though, which is that users would have to manually launch a browser and the app. I initially intended to write a kind of wrapper script that launches the browser automatically with the app but now that I'm thinking about it, we can't know which of the installed browsers the user wants to use, so it might backfire.

So I agree with going for Electron.NET first. If it really does use too many resources in the end, it should even be pretty easy to port, since the backend code base, as well as the javascript interop would use almost the same code (Blazor and Electron.NET wise), ideally

[curtisy1]

Some additional links mainly just for my brainstorming and so I don't forget any of the links (I'm not a bookmark person), aka the combination of Electron x Blazor looks really cool (and in fact eliminates my concerns with browser selection):

Building Cross-Platform Desktop Apps using Blazor and Electron.NET
Dan Roth on Electron x Blazor
The source for the above, shortcut from the article

EDIT: I think we'll have to wait a bit if we really want to use Blazor as it seems not to reliably work with Electron.NET yet

EDIT 2: Now that there's a workaround, @bolorundurowb could you create a feature branch for the Electron.NET x Blazor version?

[bolorundurowb]

@curtisy1 I will. To try things out and see how well it works

[bolorundurowb]

@curtisy1 I came across this https://github.com/chromelyapps/Chromely. What do you think

[curtisy1]

@bolorundurowb See my comment about CEF based projects here.

I think if the ambition is to make a cross-platform (web) app out of this, it should come with a good range of OS support which CEF unfortunately doesn't offer yet (I think the CEF devs aren't to blame though, it's more like Apple doesn't allow any Chromium yet). I also don't like the idea of relying entirely on Chromium as a base. I for one am an avid Firefox user and don't have Chromium installed on my system. I'm not sure if I could still run a CEF app and don't seem to find any info on whether it includes prebuilt binaries to make this possible (unlike with Electron, which solves that by installing Chromium as a dependency of your project).

As for my performance concerns, I think we'd have to test around a bit either way, but looking at the open issues on CefGlue, I see two being about a memory leak which in the worst case might be a real issue in the future.

In the end though, I see it as a wrapper for a browser app running only in Chromium based browsers. So I'd argue that it's the same as Blazor with more limitations. But I don't know about that since I haven't yet tried CEF at all. So I'll have to wrap my head around it over the weekend.

Bottom line is, I'm not entirely against it but there's some points that I see Blazor with or without Electron might handle better. I'll have to test CEF first though and maybe my thoughts on it change then. Will update when I get the chance to test.

[farukaf]

Now we have wpf/winforms with cross-platform .net core. I guess is the easier route...
Another way is with xamarin.

[bolorundurowb]

@farukaf WPF and Winforms will still only run on windows. I think currently the path available for us is Blazor and Electron as much as we would love to avoid the resource sonsumption issues associated with Electron. Work is being done to allow for truly cross platform UI frameworks with .NET Core. you can read about a few of them http://blog.stevensanderson.com/2019/11/01/exploring-lighter-alternatives-to-electron-for-hosting-a-blazor-desktop-app.