Chromely - Lightweight Alternative to Electron

• Download app - 252.5 KB
• Chromely Github

Introduction

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 uses Windows and Linux native GUI API as chromium hosts. It embeds chromium using CEF implementation of Xilium.CefGlue and CefSharp.

With Chromely, you can build Single Page Application (SPA) HTML5 desktop apps with or without Node/NPM. Building SPA apps using JavaScript frameworks like Angular, React, Vue or similar is easy. You can use Visual Studio Code or any IDE you are familiar with as long as Chromely knows the entry HTML file from the compiled/bundled files. For more information, please see - Chromely-Apps.

Background

While working on a WPF project, SugarDesk, I was looking for ways to include SugarCrm Reports in my project and the most appealing option was to use Electron. Then, I discovered CefSharp but was not happy with the limitation - you can only use bitmap rendering instead of pure HTML rendering. In short, I ended up creating one without WPF and decided to share it with the community.

Alternative to Electron?

Yes, sort of.

• Electron is true cross-platform, while Chromely only supports Windows and Linux - for now.
• Chromely is only for .NET/.NET Core development.

Some advantages over Electron are:

• Chromely does not require Node or NPM. Final installation and usage does not require Node.
• Chromely is lightweight. To use Electron in .NET or .NET Core, you will require libraries like Edge.js or host Electron in ASP.NET NET like what is used in Electron.NET. Chromely uses thin native GUI hosts.
  "Lightweight" here is referring to simplicity - simple & less to achieve same, if you may. Chromely still depends on Chromium and not necessarily lighter in that regard.
• Since this is done in .NET/.NET Core, there are no new skills required for .NET/.NET Core developers.
• Easy for WPF/WinForms developers to start HTML5 desktop development with little or no Web development experience.

Using the code

Download, build and run the attached source code or follow the steps below.

The steps described here will be for CefSharp Windows App. For CefGlue and SPA apps, please check Chromely GitHub.

1. Create .NET Console Application
2. Ensure that the build platform target is x64.
3. From project property, change "Console Application"" to "Windows Application" [Project -> Properties -> Application -> Output type: "Windows Application"].
4. Add Chromely.CefSharp.Winapi from Nuget. (A warning may show, if this happens, unload the project and reload.)
   • Chromely.CefSharp.Winapi has the following dependencies and should be verified:
     • Winapi from Nuget (Ensure minimum of 4.0 version is installed that was released for .NET Standard)
     • CefSharp.Common from Nuget.
     • Chromely.Core from Nuget
5. Create index.html file in the project root. Copy the content of file to index.html. Ensure that index.html is set to "Copy always" or "Copy if newer".
6. Add the following code snippet to the Main function in Program.cs.
   C#

     1.  class Program
     2.  {
     3.    static int Main(string[] args)
     4.    {
     5.        string appDirectory = AppDomain.CurrentDomain.BaseDirectory;
     6.        string startUrl = $"file:///{appDirectory}index.html";
     7.
     8.        ChromelyConfiguration config = ChromelyConfiguration
                                             .Create()
                                             .WithAppArgs(args)
                                             .WithHostSize(1000, 600)
                                             .WithStartUrl(startUrl);
   
     9.        var factory = WinapiHostFactory.Init();
     10.       using (var window = factory.CreateWindow(() => new CefSharpBrowserHost(config),
                     "chromely", constructionParams: new FrameWindowConstructionParams()))
               {
     11.           window.SetSize(config.HostWidth, config.HostHeight);
     12.           window.CenterToScreen();
     13.           window.Show();
     14.           return new EventLoop().Run(window);
               }
           }
       }
   
   // Creates Chromely window of size 1000 x 600 pixels.
   // Sets the window title to "chromely"
   // Sets start URL to "index.html"
   // Centers the window 

7. Build the project.
8. Run the built EXE file.
9. If successful, the following will be shown:

   

How does it work?

Thin window/host

Chromely is based on CefGlue/CefSharp. Both are based on CEF that implements Chromium. Chromely approach is to create an HTML5 desktop with a very thin native GUI host. To illustrate using Win32 GUI Api:

10.   var window = factory.CreateWindow(() => new CefSharpBrowserHost(config),

This creates a window/host using WinApi

Configuration

Both host and CEF are configurable. Host properties like size, icon can be set in the configuration class. CEF command line arguments and settings are also configurable. Configuration details can be found @ Chromely Configuration.

5.        string appDirectory = AppDomain.CurrentDomain.BaseDirectory;
6.        string startUrl = $"file:///{appDirectory}index.html";
7.
8.        ChromelyConfiguration config = ChromelyConfiguration
                                    .Create()
                                    .WithAppArgs(args)
                                    .WithHostSize(1000, 600)
                                    .WithStartUrl(startUrl);

Running the window/host

11.           window.SetSize(config.HostWidth, config.HostHeight);
12.           window.CenterToScreen();
13.           window.Show();
14.           return new EventLoop().Run(window);

This snippet sets the size of the window, centers the window, shows the window, and runs the window in an infinite loop until window is closes.

Conclusion

This is a brief introduction to Chromely. Chromely offers a complete simple/lightweight framework as a different approach to use of Chromium Embedded Framework as base for achieving a modern HTML5 based GUI without the usual use of WPF and WinForms. I intend to highlight features of Chromely in future articles, however, Chromely github site has more info.

Points of Interest

What problems does Chromely solve? Many, some or none depending on what angle you are looking at it. If you are looking at developing pure HTML5 desktop apps, Chromely is for you. If you want to add/integrate HTML5 to a project requiring WPF or WinForms controls, then alternatives like NeutroniumCore or NanUI might be better options.

How does it compare to other pure HTML5 desktop frameworks? As stated earlier, Electron is, perhaps, the biggest player for pure cross-platform desktop frameworks. Chromely provides lighter alternative to Electron ONLY for .NET/.NET Core development. Also Chromely is not pure cross-platform - only Windows and Linux supported for now.

How does it help developers? The premise of Chromely is that without use of Node/NPM UI developers moving to the html/web world will have it easy to transition and vise versa.

References

1. WinApi - https://github.com/prasannavl/WinApi
2. Cef - https://bitbucket.org/chromiumembedded/cef
3. CefSharp - https://github.com/cefsharp/CefSharp

History

1. May 13, 2018 - Article submitted.
2. May 14, 2018 - Added Chromely Github links.
3. May 23, 2018 - Typo correction.
4. May 28, 2018 - Article updated.
5. May 29, 2018 - Typo correction.