[mattkol]

Hi All on HN!

My name is Kola I am a .NET Architect currently working on WPF projects.

I was working on a SugarCrm WPF project - https://github.com/mattkol/SugarDesk - and wanted to include a reporting module to my project. I was presented with many options and concluded that an HTML5 report will be more appropriate. That led me to Cef. However all Cef WPF implementations use bitmap rendering (https://stackoverflow.com/questions/43362301/automation-why-...). I started looking into raw html rendering. Long story short - Chromely was born. I found it a lot more challenging and rewarding, as a result, I abandoned SugarDesk to focus more on Chromely as I concluded in my mind there is almost no fully developed framework using Cef and thin native UI host without WinForms or WPF.

Summary: Chromely is a lightweight .NET/.NET Core HTML5 Chromium desktop framework alternative to Electron.NET, Electron for .NET/.NET Core developers.

Chromely builds HTML5 desktops without WinForms or WPF. Chromely is based on CEF's Xilium.CefGlue and CefSharp using thin Windows and Linux native GUI API as chromium hosts.

With Chromely, you can build SPA's HTML5 desktop apps- using Angular, React, Vue or similar - with or without Node/NPM.

For more info please go to - https://github.com/mattkol/Chromely

[Const-me]

You embed Chrome into a windows-only WPF app?

The OS already has two web browser controls built-in.

The good old IE has a couple of issues, but they are fixable, especially if you only display your own content.

Also there’s newer MS Edge: https://blogs.windows.com/msedgedev/2018/05/09/modern-webvie...

[mattkol]

> You embed Chrome into a windows-only WPF app?

No, Chromely does not use WPF or WinForms. That is the main difference compared to other .NET Cef approaches. Chromely uses "thin" native GUI as host. This can be seen as an advantage or disadvantage depending on which angle you are looking at it.

[mattkol]

> Also there’s newer MS Edge: https://blogs.windows.com/msedgedev/2018/05/09/modern-webvie....

You can see Chromely as an alternative to this.

[seanmcdirmid]

Back in 2009, using chromium instead of IE in WPF was the only way to do overlays (that wouldn’t burn air space) and effects efficiently. Since WPF has been stagnant for so long, I wonder if there still isn’t a better solution than using chrome.

[Const-me]

> if there still isn’t a better solution than using chrome.

A better solution is use WPF for the complete GUI.

Text & typography, raster and vector graphics are very compatible to HTML5. Effects, animations and templating are far superior. The only areas where HTML5 is winner are styling, maybe layout, and definitely the labor market i.e. it’s easier and cheaper to find a front-end developer than a WPF developer.

Also WPF is better integrated into Windows. Its easier to implement per-monitor DPI awareness (starting from .NET 4.6.2, released in 2016), easier to support accessibility (narrator & others), etc..

[m_fayer]

Believe it or not modern browsers are a clear winner when it comes to graphics performance. Sure WPF has a slick animation API that can do all sorts of things and a super-flexible "lookless controls" model, but the second you try to display a lot of data with anything fancier than plain text, you're in for a world of pain. Endless optimizing of visual trees and layouts, large data binding operations causing opaque and difficult to control UI-thread freezes that disable all your wait indicators, half-baked UI-virtualization support, it's not fun. What takes me days of fiddling to get to acceptable with WPF I can do with HTML5 and an easy to use battle-tested library in a few hours.

[Const-me]

Developed quite a lot of WPF apps but very rarely encountered performance issues you’re talking about.

> Endless optimizing of visual trees and layouts

Never did that.

> UI-thread freezes that disable all your wait indicators

I avoid doing lots of stuff in the UI thread. This is especially easy to do with modern .NET and async-await.

In addition, I design my wait indicators so they run on the composition thread, i.e. aren’t affected by the UI thread being stuck.

> half-baked UI-virtualization support

For me it usually works OK but I agree there’re probably some issues with this feature. I remember fixing problems when my code or markup did something that disabled the virtualization and ruined the performance. But it never took days, maybe a few hours.

P.S. The worst issues I’ve encountered with WPF wasn’t performance, it was stability. Once I’ve spent a lot of time debugging rare render thread crash. I still don’t know the reason but I’ve simplified my visuals a bit (namely, pre-multiplied a render transform with the complex vector shapes I was rendering) and the problem seems to gone for now. Another time it crashed when I opened a popup, and closed it too soon, like 10-20ms after the open. The popup was “loading, please wait…” progress bar so it only happened when opening very small files from very fast hard drives.

[mattkol]

Like you, I have developed quite a lot of WPPF apps and still do (my day job!). I completely agree with all the points you made. Especially the point on composite control handling it's own wait indicator is spot on.

However, I believe @m_fayer is right too. The performance issue can creep up on you if you are not constantly watching it.

The weak-reference used by DelegateCommand in most WPF framework implementations - Prism, MVVMLight, Caliburn.Micro can cause extra headaches if one is not watching it. I have seen memory clogs with InputBindings; I have seen unexplaiined performance issues with ColumnSpan, RowSpan usages, and others issues I can't remember at the moment.

Buttom line is one needs to take C/C++ mindset to WPF to achieve optimal performance - that is you may have to have a strategy to clean up after yourself (just like pointers) and not rely too much on Garbage Collector (GC).

[GordonS]

> The only areas where HTML5 is winner are styling, maybe layout, and definitely the labor market

You're missing a major feature - cross platform. WPF is Windows only.

As someone who has also built a few WPF apps (altho not for some years now), I absolutely hated working with XAML - the visual designer in Visual Studio was really buggy and brought any machine to it's knees. Doing things without the designer, hand cranking all that XML felt really clunky, and things like event handling and synchronisation were fiddly to get right.

HTML and CSS aren't perfect by a stretch, but at this point I think they're a great option for desktop UIs, especially if cross-platform is desirable (and I say this as a long in the tooth, Microsoft-stack focused architect).

[Const-me]

> You're missing a major feature - cross platform. WPF is Windows only.

You’re missing the context. The OP has created that Electron-like thing to embed into a windows-only WPF app.

> the visual designer in Visual Studio was really buggy

Expression blend was, and still is, much better. It’s not especially friendly towards programmers, initially I had to read quite a lot of documentation and articles. But now I use it a lot (albeit not exclusively) and enjoy doing so.

> things like event handling and synchronization were fiddly to get right.

For me, MVVM works in 90%. The trick is to recognize the 10% of things for which it doesn’t, and do something else like code behind, or programmatic visual tree manipulation/generation, or something else.

> I think they're a great option for desktop UIs

If that desktop UI is a thin interface between user and a web server/cloud, maybe. If that desktop UI actually does something locally, I don’t think HTML is a great option: shell integration, WinAPI interop (both need COM interop). Also JavaScript isn’t exceptionally good general-purpose programming language especially for medium to large projects, e.g. MS had to create a TypeScript on top of JS for their VS Code.

[GordonS]

> You’re missing the context. The OP has created that Electron-like thing to embed into a windows-only WPF app.

I didn't miss that, I was talking in a more general sense about HTML vs WPF.

> Expression blend was, and still is, much better.

I never did actually try this properly - I had a brief play with it years ago when it first came out, but it seemed like a toy; maybe I should give it a go now it's had time to mature.

> Also JavaScript isn’t exceptionally good general-purpose programming language

No arguments there, I'm a sense-confessed JS hater ;) Typescript however, is an absolute joy to use.

[jimmcslim]

> Expression blend was, and still is, much better.

I was thinking about Blend just the other day, and wondering if was still a thing?

[seanmcdirmid]

Doesn’t help if you need an embedded web browser control. Plenty of apps needed that, and IE has real air space and redraw issues to be used that way.

[davidhyde]

Hi Mattkol,

Is there a reason why you chose to use Ajax instead of WebSockets which has much lower latency and overhead? Not backward compatibility I hope! The spec was finalized and implemented ages ago.

[mattkol]

Actually I am currently looking at websocket, but not for the same reason you raised. I was looking at extending for real-time apps.

However ... Ajax is one of the options of IPC, and this is common to both CefGlue and CefSharp implementations. The options are:

1. Ajax HTTP/XHR (Xilium.CefGlue, CefSharp) 2..NET/Javascript integration (CefSharp) 3. Generic Message Routing (Xilium.CefGlue)

I see 2 and 3 as the common usage for the CEF .NET community. Ajax may see less usage because it's use can result in other issues -- like cross-origin error and may be more complex for some people.

Like I said, I have just started looking into WebSocket and may soon be implemented for CefGlue apps.

[parvenu74]

My apologies if this is explained somewhere and I simply didn't get it, but is the HTML5 app talking to a portable web server (Kestrel?) and the .NET web portion talking to the operating system or is this a case where .NET code is being invoked from the web app with via a JavaScript-to-.NET bridge of some sort? If the latter I'm massively interested.

[parvenu74]

I think I've answered my own question: it's the latter: https://github.com/cefsharp/CefSharp

I think a sprint or two to document this project better would be massively helpful and I'm willing to volunteer.

[mattkol]

Thanks for that. Please any help, no matter how small will be appreciated. Contributions, PRs are also accepted.

[helthanatos]

Cefsharp with the winforms host is good. I'm not sure how anyone can stand the wpf version though... No matter how simple I made the app, it was still noticibly laggy with it having to render in such the terrible way. I looked at chromely for a few minutes but the amalgamation of all those projects turned me off.

[mattkol]

If you like CefSharp with WinForms, then likely you will like Chromely too. Chromely on Windows is like CefSharp hosted on Winapi ("thinner" WinForms, if you may). And Chromely has a lot of implementations out of the box, that lets you hit the road in minutes.

I hope you will give it another shot sometimes later.

[egeozcan]

Is this also bound by all the limitations of CEF? AFAIK, there's no way to override the storage limitations (i.e. 20% or something of the available free space, see http://magpcss.org/ceforum/viewtopic.php?f=6&t=15857 )

[mattkol]

Thanks for bringing this up. This is one area I have not looked at closely.

Chromely is based on CefGlue, CefSharp that are also based on CEF. So yes, restrictions, unless overridden will pass up from base.

[nawfalhasan]

Excuse my ignorance, but is this written in a .net language that transpiles to js runtime or this written in HTML/CSS/js that transpiles to .net runtime? I'm probably missing what is electron.net and similar platforms.

[mattkol]

This is a html desktop app framework built on chromium/Cef. The front end (rendering process) is in HTML/CSS/js. The "backend" if you may, or the "browser" is in .NET C#.

You still need both pair of HTML/CSS/js and C# to develop an app.

However, you can use any frontend Javascript frameworks like Angular, React that may require transpiling.