Preferred "platform" for building desktop web apps - Electron.js or WebKitGTK?

Follow-on under different thread from original topic here.

So, @lah7 (and all others), which would you bet your future on:

  • WebKitGTK,         or
  • Electron.js

This article is quite persuasive for Electron, but with GNOME appearing dominant by many distros for DM, maybe WeKitGTK would be the one to use to try to surf the "wave" of new apps.

Would appreciate

  • your recommendations,         and
  • your rationale leading you to that choice.

It's not an exact comparison, I think WebKitGTK is somewhat lower-level than Electron.

Electron will probably win the day because Google is better at supporting (or persuading) developers outside of their ecosystem to use it.

I can't think of any WebKit-based software that I use, but I will say that I typically don't like Electron-based apps - they are rather resource hungry and bulky. As an example, I am looking at alternatives to VSCode in part because of its insane need for resources.

1 Like

Sorry to dip in. Personally, I'm much comfortable on using WebKitGTK over Electron. That's despite the fact that I'm more amiable towards Blink over WebKit.

I do agree with the entirety of what Stephen said. People are easily warm towards using Blink, as though they're averse of the browser ecosystem around it. It's unfortunate that it seems to be the norm for cross-platform app development, for the same points that were mentioned.

On WebKitGTK, on the other hand, I think its pretty nice. I've seen how some Linux components have used it so far. I suppose it'll stay the way it is, kept here in Linux. I honestly don't see much development for GTK stuff when it comes down to being cross-platform, or even for WebKit (that of a significant scale as Electron).

As for Stephen's part...

I am looking at alternatives to VSCode in part because of its insane need for resources.

I personally would like to suggest Kate, or my good old friend Sublime Text (and Merge, if you need a Git client). Cheers!

4 Likes

I've used all three - WebKitGTK, Electron and also QWebEngine:

  • Electron was better suited for a full screen multimedia experience 'for fun' for someone, to be archived onto an optical disc. :cd: Since it's offline only, it was easily distributable as a binary, cross-platform and shouldn't break in future.
  • WebKitGTK because ubuntu-mate-welcome used it, and a very old version of my app started off like a web app. A natural fit for a GTK environment. Though, it was painful when users got a 'white screen' due to hardware acceleration bugs.
  • QWebEngine because some PyQt applications I've written benefit from using web code. A natural fit for Qt environments. My personal choice.

Even though Chromium isn't an ideal browser for me (mostly due to poor UI), Blink does perform better and supports more APIs/specifications then WebKit. I found browsers like Epiphany to feel jittery (maybe lacking hardware acceleration). Historically, WebKitGTK has had some maintenance problems. Even Qt removed their QWebKit.

Personally I'm all for native app experiences. In your case, if you're building a HTML game, probably:

  • Electron, if cross-platform or performance/support is important.
  • or WebKitGTK, for being lightweight and aimed for Linux/GNOME users.
8 Likes

Thank you, Luke. Given that you seem to have worked with both Electron and WebKitGTK, here is a strange pair of question:

  • If the App is built using WebKitGTK, how easy is it to "re-target" that code as based on Electron.js ?

  • If the App is built using Electron.js, how easy is it to "re-target" that code as based on WebKitGTK ?

Or ... are those questions a clear indication that I don't realize the extent of paradigm-mismatch between the two frameworks as to make it obvious that we have somehow found ourselves in "la-la-land" ? :slight_smile:

2 Likes

Easy! Since you're building a web app for the desktop, your HTML/CSS/JS is transferable between the two implementations/engines. The only thing that is different is how it works.


With Electron, files were typically placed in a resources/app/ folder (optionally bundled into an ASAR archive in production). The main.js file is the application logic.

These are bits of my `main.js` that I used years ago - don't know if it still works with today's Electron.
const {app, BrowserWindow} = require("electron")

// Allow the sound to work without needing to click
app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1366,
        height: 768,
        minWidth: 0,
        minHeight: 0,
        backgroundColor: "#FFF",
        fullscreen: true
    })
  
    mainWindow.setMenu(null); 
    mainWindow.loadFile("index.html");
  
    mainWindow.on("closed", function() {
        mainWindow = null;
    })
}
  
app.on("ready", createWindow)
  
app.on("window-all-closed", function() {
    app.quit() // macOS: When closed, disappear from dock
})

I just realised that now they prefer NPM (Node.js package manager) to get the builds. Pretty sure it was much easier years ago by downloading an off-the-shelf tarball, extracting and then placing files inside a "resources" folder.


WebKitGTK is just some Python code saying "load these files". This looks like the easier starting point. Just need to install gir1.2-webkit2-4.1 with apt if it isn't installed already.

#!/usr/bin/python3

import os
import gi
gi.require_version("Gtk", "3.0")
gi.require_version("WebKit2", "4.1")
from gi.repository import Gtk, WebKit2

class BrowserWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self, title="My Application Name")
        
        self.set_default_size(800, 600)
        
        data_dir = os.path.dirname(os.path.abspath(__file__))
        
        self.webview = WebKit2.WebView()
        self.webview.load_uri(f"file://{data_dir}/index.html")
        
        scrolled_window = Gtk.ScrolledWindow()
        scrolled_window.add(self.webview)
        
        self.add(scrolled_window)

win = BrowserWindow()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()

Tested with Ubuntu MATE 24.04.

9 Likes

Thanks. I'm looking at NeoVim and Lite-XL, too.

4 Likes

Thank you again, Luke! Much to digest. I actually did install NPN about 3 months ago, when I started this journey, but haven't completely worked my way thru making this all happen. I hope you won't mind my contacting you "offline" by direct message for some further specific guidance, unless you prefer that I keep it in the public eye via this Community site.

I will let you know how things "gelled" when I finally have the skeleton of my App working. That likely won't be for at least a month, given everything I need to sort out. :slight_smile:

3 Likes

I would mind (:email: :no_entry_sign:), please keep questions in the public eye. Others can follow your progress along and help out too.

Good luck with the development! Let's have a new programming tag!

3 Likes

Understood. No problem. Again, thank you.

1 Like