GUI tools and libraries: native, cross-platform or web¶

Exercise gui-tools-and-libraries-annex.pdf · PDF

Put three windows side by side: VS Code, any web app in your browser, and a grey Java dialog. All three have buttons. Which of them could you have on your phone tonight?

The web app, yes. VS Code is web technology inside, but packaged for the desktop. The grey dialog, never. Last unit you drew your app. Before you build it, you have one decision to make, and it is not a colour: what will draw your buttons?

Who speaks the language?¶

Keep one picture in your head for the whole page: languages. Every platform (Windows, macOS, Android, iOS, the browser) speaks its own language for drawing windows and buttons. You have three ways to be understood:

You can see the old grey dialog for yourself. If you have a JDK and a graphical session, type jshell in a terminal, then this line:

javax.swing.JOptionPane.showMessageDialog(null, "Hello, 1998")

That window comes from Swing, a Java toolkit from 1998.

Toolkit or library?¶

Two words get mixed up all the time, so let us separate them.

A GUI toolkit is the set of ready-made pieces (windows, buttons, text fields) and the code that draws them and delivers the user's clicks to your program.

A UI library (or UI framework) is code that sits on top of a toolkit and helps you organise your interface into components.

GUI stands for graphical user interface. Svelte, which you will use from Unit 3, is a UI library: it draws nothing by itself.

Three families¶

Here is the whole map. Read the row "Draws with" first: it decides everything else.

flowchart TB
    Q["<b>What draws the interface?</b>"]
    Q -->|"the platform's own toolkit"| N["<b>Native</b><br>the native speaker"]
    Q -->|"its own layer, not a browser"| C["<b>Cross-platform toolkit</b><br>the interpreter"]
    Q -->|"a browser engine"| W["<b>Web technology</b><br>the lingua franca"]

One new word is hiding in that table.

A webview is a browser engine without the browser around it: no address bar, no tabs, just the part that draws HTML, embedded in an app's window.

Fifteen real tools¶

Now you can place real names. Ask the question for each one: what does it draw with?

The first four are native. The next seven are cross-platform toolkits. The last four are web technology. A PWA (progressive web app) is a web app that a browser can install and run like an ordinary app.

Some of these are worth arguing about, and the arguments teach you more than the table:

Electron or Tauri?¶

Both put web technology in a desktop window. The difference is what they pack.

Same idea, opposite packing: Electron carries a browser, Tauri borrows one.

Electron started in 2013 under the name Atom Shell. Tauri reached 1.0 in June 2022, and 2.0 on 2 October 2024 added Android and iOS.

Choosing: a reason needs a fact¶

"Because it is better" is not a reason. A real reason quotes a number or a platform from the brief. Look at how the fact decides in each of these:

Often the fastest step is to rule a family out. "My app must run on Android phones and in the browser, so native is out: I would need two codebases." That is a complete, defensible sentence. Write one like it for your own project.

Why Svelte + Tauri here?¶

You learned Java last year. So why are we not building the interface in Swing or JavaFX? It is a fair question, so here is an honest comparison.

We are not saying Java is dead. It runs a huge share of the world's servers. What aged is its desktop toolkits. We are choosing the one family where your design file, your code and every screen your users own speak the same language.

Key takeaways¶

• A GUI toolkit provides the pieces and draws them. A UI library such as Svelte organises your interface on top, and draws nothing by itself.
• The family is decided by what draws, not by the language: native (the platform's toolkit), cross-platform toolkit (its own layer), web technology (a browser engine).
• A webview is a browser engine with no browser around it.
• Electron carries its own Chromium in each app. Tauri borrows the system's webview, so it is small but you test on each system.
• A good choice of toolkit quotes a number or a platform from the brief.
• This course uses Svelte + Tauri because design file, code and screens share one language. The cost is learning HTML, CSS and JavaScript.

Quick check¶

You know what can draw an interface. Next you try a tool that draws one for you and puts it on the internet: Framer: the canvas is the website.