Swift vs ElectronSwift vs Electron
/ native · web-in-a-shell /
The first fork in the road when you build a desktop app — and the vocabulary it decides.
开发桌面 App 时遇到的第一个岔路口——它同时也决定了你之后用的词汇。
This is the first fork in the road when you build a desktop app. Swift means building with Apple’s own materials — the app is a Mac app, and every element on this site’s macOS tab comes free and native. Electron means building a web page and shipping it inside its own private browser window — the app is really a website wearing a desktop coat, and its vocabulary is this site’s Web tab.
这是你开发桌面 App 时遇到的第一个岔路口。选 Swift,就是用 Apple 自家的材料来造——App 是地地道道的 Mac App,本站 macOS 标签页里的每个元素都免费且原生。选 Electron,就是写一个网页,再把它装进一个专属浏览器窗口里发布——这个 App 其实是披着桌面外衣的网站,它的词汇对应本站的 Web 标签页。
Neither is wrong. It decides which names your project speaks: an Electron app has no NSStatusItem inside it (Electron calls the menu bar icon a Tray), and a Swift app has no CSS.
两条路没有对错。它决定的是你的项目说哪套名字:Electron App 里没有 NSStatusItem(Electron 把菜单栏图标叫 Tray),Swift App 里也没有 CSS。
The trade, honestly这笔取舍,实话实说
| Swift (native) | Electron (web shell) | |
|---|---|---|
| What it is它是什么 | Apple's language + native frameworks (SwiftUI/AppKit)Apple 的语言 + 原生框架(SwiftUI/AppKit) | A Chromium browser + Node.js bundled around your web app一个 Chromium 浏览器 + Node.js,裹着你的 Web App |
| Looks like a Mac app看起来像 Mac App | Yes, automatically — real menus, sheets, vibrancy是,天生如此——真正的菜单、Sheet 面板、毛玻璃质感 | Only if you rebuild the Mac look yourself in CSS除非你自己用 CSS 重造一套 Mac 的样子 |
| Uses适合做什么 | Mac-only apps that should feel native只跑在 Mac 上、要有原生质感的 App | Cross-platform apps sharing one web codebase跨平台、共用一套 Web 代码的 App |
| App sizeApp 体积 | Small (uses the system's own frameworks)小(直接用系统自带的框架) | Large (ships its own browser, ~100MB+)大(自带一个浏览器,约 100MB+) |
| Your skills你的技能 | Swift — new language for most web devsSwift——对多数 Web 开发者来说是一门新语言 | HTML/CSS/JS/React — what web devs already knowHTML/CSS/JS/React——Web 开发者本来就会的东西 |
| Famous examples知名案例 | Things, Fantastical, CraftThings、Fantastical、Craft | VS Code, Slack, Discord, FigmaVS Code、Slack、Discord、Figma |
Rule of thumb经验法则
Mac-only and you want it to feel like it belongs? Swift. Cross-platform, or your team lives in web tech? Electron (or its lighter cousin Tauri, which swaps the bundled browser for the system’s).
只上 Mac,还想让它看起来土生土长?选 Swift。要跨平台,或者团队靠 Web 技术吃饭?选 Electron(或者它更轻量的表亲 Tauri——把捆绑的浏览器换成系统自带的)。
The very first message you send decides which world your agent builds in. Paste the one for your side — it sets the stack, the native details agents forget, the vocabulary, and a first milestone you can actually see:
你发出的第一条消息,决定了代理在哪个世界里动工。把你这一边的粘过去——它会定下技术栈、代理容易忘掉的原生细节、词汇,以及一个你能真正看到的第一个里程碑:
Your first prompt — pick your world你的第一条 prompt——选好你的世界
Starting a Swift app从零开始一个 Swift App· Mac-only, feels native from day one · 只上 Mac,第一天就有原生质感
I'm starting a brand-new native macOS app. Set it up as a SwiftUI Mac app (Xcode project, macOS 14+): one main window with a NavigationSplitView sidebar, a unified toolbar, and light + dark mode from the start. Keep everything native — system fonts, system accent color, standard controls, no custom-drawn chrome. Talk to me in SwiftUI/AppKit names (window, sidebar, toolbar, sheet), never in web terms. First milestone: the empty app builds and runs with the sidebar and toolbar showing.
我要从零开始一个全新的原生 macOS App。把它搭建成一个 SwiftUI Mac App(Xcode 项目,macOS 14+):一个主窗口,带 NavigationSplitView 边栏和统一的工具栏(unified toolbar),从一开始就支持浅色 + 深色模式。一切保持原生——系统字体、系统强调色、标准控件,不要自绘的窗口装饰。跟我说话时用 SwiftUI/AppKit 的名字(window、sidebar、toolbar、sheet),绝不用 Web 术语。第一个里程碑:空 App 能编译运行,边栏和工具栏都显示出来。
Starting an Electron app从零开始一个 Electron App· Web tech, runs everywhere · Web 技术,到处都能跑
I'm starting a brand-new desktop app built with web tech. Set it up as an Electron app with Vite + React + TypeScript: one BrowserWindow with titleBarStyle 'hiddenInset' on macOS so it looks clean, secure defaults (contextIsolation on, nodeIntegration off), and hot reload in dev. Talk to me in web names (components, CSS, div — and Electron's Tray for a menu bar icon), never in Swift/AppKit terms. First milestone: the window opens, shows my React page, and hot reload works.
我要从零开始一个用 Web 技术构建的全新桌面 App。把它搭建成一个 Electron App,用 Vite + React + TypeScript:一个 BrowserWindow,在 macOS 上把 titleBarStyle 设为 'hiddenInset' 让外观干净,采用安全的默认配置(打开 contextIsolation,关闭 nodeIntegration),开发时支持热重载。跟我说话时用 Web 的名字(components、CSS、div——菜单栏图标用 Electron 的 Tray),绝不用 Swift/AppKit 术语。第一个里程碑:窗口能打开,显示我的 React 页面,热重载正常工作。
Don’t confuse them with别和它们搞混
- TauriTauri
Electron's lightweight cousin — same web UI, much smaller app, Rust underneath.
Electron 的轻量表亲——同样是 Web UI,App 小得多,底层是 Rust。
- CatalystCatalyst
An iPad app running on the Mac. Neither native-Mac nor web.
跑在 Mac 上的 iPad App。既不是原生 Mac,也不是 Web。
- React NativeReact Native
JavaScript driving native controls — mostly a mobile story, rare on desktop.
用 JavaScript 驱动原生控件——主要是移动端的故事,桌面上很少见。
Chose Swift? Read AppKit vs SwiftUI next. Chose Electron? Everything you build lives in the Web tab.
选了 Swift?接着读《AppKit vs SwiftUI》。选了 Electron?你造的所有东西都在 Web 标签页里。