How to build native C++ apps with HTML/CSS UI?

web-development

embedded-systems

cross-platform

ui-design

byAlex Kataev·Dec 6, 2024

To swiftly integrate a web-based UI in native C++ applications, take an advantage of Chromium Embedded Framework (CEF). Instigate a CEF instance within your C++ project, load up an HTML file, and run the CEF loop for effective event handling. This combinatory approach empowers you to breathe life into the frontend with HTML/CSS while retaining the backend logic in the iron-grip of C++. Check this example:

#include "include/cef_app.h"
// Saving the planet with C++, one line at a time...

int main(int argc, char* argv[]) {
  CefMainArgs main_args(argc, argv);
  CefSettings settings;
  
  // When in doubt, initialize!
  CefInitialize(main_args, settings, nullptr, nullptr);

  // Create that pretty window with a stunning UI
  CefWindowInfo window_info;
  CefBrowserHost::CreateBrowser(window_info, new SimpleHandler(), "file:///your_ui.html", CefBrowserSettings(), nullptr);

  // Message loop, not a cereal kind!
  CefRunMessageLoop();
  
  // Don't worry, Cef got you covered ;)  
  CefShutdown();
}

Replace those "file:///your_ui.html" with the address to your UI file. Voila! Your HTML/CSS is now served royal, inside a C++ application window.

Assorted alternatives and implications

While CEF is a well-known savant in embedding a Chromium-based browser inside a C++ application, feel free explore other alternatives:

Multiple engines and frameworks fragment

Electron: Melds a formidable Chromium browser with a Node.js backend for a wholesome app development experience leveraging JavaScript.

Ultralight: Best suited for OpenGL or DirectX applications that demand a lightweight HTML renderer.

Qt WebEngine: Gives you the leverage of Qt's arsenal of tools when integrating web content.

Sciter: Provides a compact yet powerful engine for HTML/CSS rendering, infused with additional functionalities like SVG and WebSocket.

Awesomium and engines based on WebKit or Gecko: Offer similar attributes as CEF, tinted with unique implementation details and affinities.

Framework maturity and community influence

Keep an eye out for the maturity, community support, and precisions of documentation when cherry-picking a framework. While Both CEF and Electron are backed by substantial communities, you may find other options endowed with unique benefits regarding your specific needs.

Extracting engine-specific offerings

Sciter and Ultralight introduce unique attributes such as animation support and adherence to modern web standards.

If you're venturing into game development, libRocket, a middleware designed specifically for gaming UIs, might take your fancy.

Performance and resource management

Ultralight prioritizes performance and could be the choice weapon if resource management sits atop your priority list.

CEF and Electron are somewhat resource-magnets but are chosen frequently for their comprehensive functionality and extensive support.

Nuts and bolts: practical tips & familiar pitfalls

Platform versatility

Ensure you test your application across various platforms (Linux, Windows, MacOS). Frameworks like Sciter and CEF allow development from the same source base, easing this process.

Embedded third-party web content

Bear the security implications in mind when embedding third-party web content and always remain prepared with relevant strategies to protect your application.

Custom modules and extension collaboration

With Electron, be ready to create custom natively compiled C++ Node modules, driving your application's capabilities beyond the typical web APIs.

In frameworks like CEF, consider using the handy built-in mechanisms to foster communication between JavaScript and C++ via cordial messages or JavaScript bindings.

UI responsiveness

Ensure your app's UI is always 'on its toes' and remains responsive. Leverage CSS3 transitions, animations, and SVG graphics for visually appealing yet lightweight elements.