Skip Navigation
Programming @programming.dev
Cyclohexane @lemmy.ml

Why isn't there a way to make near-native desktop UIs that's similar in ease to browser and electron UIs?

it seems ridiculous that we have to embed an entire browser, meant for internet web browsing, just to create a cross-platform UI with moderate ease.

Why are native or semi-native UI frameworks lagging so far behind? am I wrong in thinking this? are there easier, declarative frameworks for creating semi-native UIs on desktop that don't look like windows 1998?

40 comments

  • It's not that native UIs are lagging behind, there is a whole set of reasons.

    TL;DR: browsers, as opposed to desktop apps, are stardartized - because they were originally designed to display and deliver text documents. We were never supposed to build complex application UIs on a web stack.

    First, there is no standard way of making native UI on a desktop. Every OS uses it's own solution, while Linux offers several different ones. Browsers rely on a set of open standards developed specifically for the web, and even there not everything works exactly the same.

    Second, browsers are designed to draw a very specific kind of UI through a very specific rendering mode - they run an immutable hierarchy of elements through layouting and painting engines. It works great for documents, but it becomes extremely unweildy for most other things, which is why we have an entire zoo of different UI implementations (crutches, most of them) for browsers.

    On the desktop we often make a choice of what UI technology would fit best our purpose. For a game engine I would use an immediate-mode UI solution like ImGUI, for the ease of prototyping, integration and fast iterations.

    For consumer software I might choose between something like QT or GTK for robust functionality, reliable performance, acessibility and community support. Mobile platforms come with their own native UI solutions.

    For data-intensive UIs and heavy editors (e.g. CAD, video and music production, games) I might need to designan entirely new rendering pipeline to comply with users requirements for ergonomics, speed, latency etc.

    It is also easy to notice that as a team or employer, it is often much easier to hire someone for web stack, than for native development. Simply put, more people can effectively code in JS, so we get more JS and tech like Electron enables that.

    If you are interested in a single solution that will get you nice results in general, no matter the platform - you might see some success with projects like Flutter or OrbTK.

    UI rendering in general is a deep and very rewarding rabbit hole. If you are in the mood, this article by Raph Levien gives a good overview of existing architectures: https://raphlinus.github.io/rust/gui/2022/05/07/ui-architecture.html

  • This is because each desktop operating system using a different graphics rendering engine—Quartz on macOS and X/Wayland on Linux, for example. In order to write an application that works on all major operating systems, you either need to use a graphics library that has already done the heavy lifting of calling the native frameworks under the hood or you have to do it yourself. Or you can use a web-based graphics library that has also already done that heavy lifting, with the added advantage that you can use languages like HTML, CSS, and Javascript to easily create visual elements. This is attractive when the alternatives like Qt are notoriously difficult to deploy and force you to use C/C++.

    • Quartz (usually referred to as Core Graphics) isn’t recommended anymore on Macs.

      Developers should be using SwiftUI now, which is a completely different approach: 

       undefined
          
class HelloWorldView: NSView {
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)

        // Drawing code here.
        guard let context = NSGraphicsContext.current?.cgContext else { return }

        // Set text attributes
        let attributes: [NSAttributedString.Key: Any] = [
            .font: NSFont.systemFont(ofSize: 24),
            .foregroundColor: NSColor.black
        ]

        // Create the string
        let string = NSAttributedString(string: "Hello World", attributes: attributes)

        // Draw the string
        string.draw(at: CGPoint(x: 20, y: 20))
    }
}

      Here’s the same thing with SwiftUI: 

       undefined
          
struct HelloWorldView: View {
    var body: some View {
        Text("Hello World")
            .font(.system(size: 24))
            .foregroundColor(.black)
            .padding()
    }
}

      • Quartz is a layer beneath SwiftUI or AppKit. SwiftUI is still using Quartz under the hood. The way you use Quartz directly from SwiftUI vs AppKit is a bit different, though still fairly similar. A more fair comparison of the SwiftUI code would be: 

         swift
            
struct HelloWorldView: View {
  var body: some View {
    Canvas { context, _ in
      context.draw(
        Text("HelloWorld")
          .font(.system(size: 24))
          .foregroundColor(.black),
        at: CGPoint(x: 20, y: 20)
      )
    }
  }
}

        Alternatively an AppKit solution (not using Quartz directly) would be something like: 

         swift
            
class HelloWorldView: NSView {
  override init(frame frameRect: NSRect) {
    super.init(frame: frameRect)
    let text = NSAttributedString(
      string: “Hello World”,
      attributes: [.font: NSFont.systemFont(ofSize: 24), .foregroundColor: NSColor.black]
    )
    let label = NSTextField(labelWithAttributedString: text)
    addSubview(label)
  }

  required init?(coder: NSCoder) {
    fatalError()
  }
}

        In either AppKit or SwiftUI, you can access Quartz directly to implement custom views. However, most of the time the UI code you write in either SwiftUI or AppKit won’t call Quartz directly at all, but will instead be composed of built-in views, like (NS)TextField or (NS)Button. Under the hood, SwiftUI is mainly just using the AppKit components at the moment, but provides a significantly nicer way to use them (especially in regards to layout and data synchronization).

40 comments