Building GUI Desktop Applications on Linux

Source: Python3 Tutorial

Sometimes it feels like you’re only building for the web, and then inspiration strikes for a desktop project. Maybe a to-do list or something similar.

But how do you approach it?

• A Chrome or Firefox plugin?
• A GNOME application?
• A full-fledged desktop application?

I spend a lot of time in the browser and build plenty of tools there, but which implementation and language suits which project? If you’re thinking about writing some programs yourself, here are some thoughts to guide your choice:

Linux offers several suitable programming languages for building GUI applications. The right choice often depends on your project’s specific requirements, available libraries and frameworks, and your own experience and preferences.

Programming Languages for GUI Development on Linux

C++ with Qt

• Qt is a widely adopted framework for cross-platform GUI development.
• C++ combined with Qt is a powerful choice for high-performance and complex graphical applications on Linux.

That said, younger developers increasingly skip C++ and often start with Python instead.

Python with Tkinter or PyQt

• Python is popular for its simplicity and readability.
• Tkinter comes built into the Python standard library and provides a straightforward way to create GUIs.
• PyQt is a Python binding for the Qt framework and offers richer functionality.

Java with Swing or JavaFX

• Java is another solid option for GUI application development.
• Swing and JavaFX are two popular Java libraries for creating graphical interfaces.

Swing tends to feel dated, whereas JavaFX is a modern alternative—though it’s more effort to set up.

C# with Mono and GTK#

If you have C# experience, you can use Mono (a cross-platform implementation of Microsoft’s .NET framework) together with GTK# to develop GUI applications on Linux.

You might wonder why C# on Linux? Many IT trainees and university programs start with C# as their first language. With Microsoft back in the spotlight, C# skills belong on every developer’s learning list.

JavaScript with Electron

For web developers, Electron can be an excellent choice. It lets you build desktop applications using web technologies like JavaScript, HTML, and CSS.

Vala with GTK+

Vala is a programming language designed specifically for the GNOME platform. It uses GTK+ for GUI development and is ideal if you want to focus on the GNOME ecosystem.

Each of these languages and frameworks has its own strengths and weaknesses. Your final choice depends on your project’s specific requirements and your familiarity with the language and its tooling.

I personally oscillate between JavaScript with Electron and Python with the Qt framework.

Desktop Applications: JavaScript/Electron vs Python/Qt—Pros and Cons

JavaScript with Electron

Advantages:

Cross-Platform Development

Electron lets you build desktop applications for Windows, Linux, and macOS using the same web technologies (HTML, CSS, JavaScript).

Modern Web Technologies

Developers can leverage modern web frameworks and libraries, which often accelerates and simplifies development.

Strong Community and Resources

Electron is backed by a large community and offers abundant resources and plugins.

Node.js Integration

Electron apps can tap into Node.js, giving you access to a vast ecosystem of npm packages.

Disadvantages:

Memory Overhead

Electron applications have faced criticism for high memory consumption and large bundle sizes.

Performance

Though capable, Electron apps can be slower than native applications.

Security

Electron apps can pose security risks if not developed carefully.

Python with Tkinter/PyQt

Advantages:

Simplicity and Speed with Tkinter

Tkinter is easy to learn and use, making it ideal for smaller projects and prototyping.

Rich UI Components with PyQt

PyQt provides an extensive collection of UI components and works well for complex applications.

Python Ecosystem

Access to Python’s rich library ecosystem for countless use cases.

Lower Memory Footprint

Compared to Electron, Python-based GUI applications typically consume less memory.

Disadvantages:

Cross-Platform Challenges

Although both Tkinter and PyQt are cross-platform, you may encounter differences in look and feel across different operating systems.

Older Technologies

Tkinter in particular can feel outdated and lacks the modern features available in web technologies.

Learning Curve for PyQt

PyQt can have a steep learning curve, especially for developers unfamiliar with Qt.

Tutorial: Building a To-Do List with JavaScript and Electron on Linux

To show you what’s involved, I’ll walk through the steps to build such an application. I assume you already know what you want to build and what it should do. In this case, I’m keeping it simple: a to-do list for Linux. The actual coding part is left as an exercise—the focus here is on the process.

Steps to Create a To-Do List on Linux with JavaScript and Electron:

Install Node.js and npm

• Electron applications are built with Node.js. Make sure Node.js and npm are installed on your Linux system. You can download them from nodejs.org.

Initialize a New Node.js Project

• Open a terminal. Create a new folder for your project and navigate into it (mkdir meine-todo-app && cd meine-todo-app). Run npm init -y to create a new package.json file.

Install Electron

Run npm install electron —save-dev in your project directory to install Electron locally.

Create Your Main File

• Create a file named main.js. This will be the entry point for your Electron application. In main.js, you initialize the Electron window and define your application’s behavior.

Develop the User Interface

• Create an HTML file (e.g., index.html) to serve as your to-do list’s interface. Add interactive elements to add and remove tasks.

Implement Functionality

• Write JavaScript code (either inline or in a separate file linked to your HTML) to enable adding and removing list items.

Update package.json

• Edit your package.json file to define the startup script for your Electron application. For example: "start": "electron ."

Test Your Application

• Run npm start in the terminal to launch and test your Electron to-do list.

Extend and Refine

• Add more features and improve the design and user experience.

Here’s a simple example of your main.js structure:

const { app, BrowserWindow } = require('electron');

function createWindow() {
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

And a simple example for your index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My To-Do List</title>
</head>
<body>
    <h1>My To-Do List</h1>
    <input type="text" id="todoInput">
    <button id="addTodo">Add</button>
    <ul id="todoList"></ul>

    <script>
        // JavaScript code to add and remove tasks
    </script>
</body>
</html>

This gives you a solid foundation to build a basic to-do list. From here, you can add more features and customize the design to suit your needs.