百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

10年了,开发人员仍然不明白 Electron 的意义

myzbx 2025-02-27 15:58 38 浏览

作者 | Greg Foster
译者 | 平川
策划 | 褚杏娟

本文最初发布于 Greg Foster 的个人博客 Small Diffs。

在现代开发人员的工具箱中,Electron 是最有名的工具之一。如果你仔细观察,就会发现它是 React Native 的表兄弟,承诺 “一次编写、随处发布”,但构建和发布开销远小于移动开发。它的杀手锏是将 Node.js 和 Chromium 捆绑在一起,为 Web 技术创建了一个强大的桌面运行时。Electron 官方博客庆祝了它的 10 周年纪念日,考虑到它对开发文化的渗透之深,这真是太激动人心了。

到 20 世纪 20 年代中期,我们已经达到了这样一个阶段:大多数新软件都是从网站(采用典型的 HTML/JS 堆栈)开始,然后扩展到桌面,为的是可以获得更好的人体工学设计 —— 无论是直接的 dock 图标,更简单的 OS 级集成,还是更集中的工作区。ChatGPT 和 Perplexity 等工具遵循了这一模式,尽管它们并不一定会引入 Electron。不过,对于许多希望快速打包应用的团队来说,Electron 提供了近乎即时的跨平台支持,并且具有令人垂涎的 “ Web 风格 ”,如自动更新和零阻力发布。

当 Graphite 公司的工程团队需要一个轻量级的桌面扩展时,我们也是立刻选择了 Electron——尤其是当我们看到它的自动更新功能时。但我经常在想:对于这样一个具有统治地位的框架,它究竟从何而来?答案出人意料——它是 GitHub 创建的。

前 Electron 时代

Electron 的历史只能追溯到 2013 年,并不算久远。在使用桌面封装器发布 Web 应用程序之前,开发人员通常会为每个平台编写完全独立的本地应用程序。想要支持 Mac?编写 Objective-C 或 Swift ,然后使用 Cocoa。想要 Windows 支持?那就挽起袖子写 C++、C# 或 .NET 。Linux ?那就更有趣了。每个平台都有不同的用户界面范式、代码习惯用法和构建管道,因此,保持一致性是个令人头疼的问题。许多团队最终需要维护两到三个代码库,每个代码库都有自己细微的差别。

一些跨平台工具包,如 Qt 或 JavaFX,提供了部分解决方案,但往往有一个复杂的集成层、 UX 体验不一致,偶尔还会出现性能不佳的情况。与此同时,依赖 JVM 的 Java 虽然功能强大,但对于面向消费者的桌面应用程序来说,它从来都没有提供过特别丝滑的体验。当然,它可以让你 “一次编写,随处运行”,但并不是每个人都想用 Swing 或 JavaFX 来构建现代用户界面。而且,如果你需要将应用程序发布到 Web 上,JVM 也帮不上忙。

因此,如果回到,比如说 2010 年,构建跨平台桌面应用程序的感觉往往就像在两英尺深的雪地里艰难前行。

Electron 是如何出现的?

进入 2013 年:Electron(最初名为 Atom Shell )由 GitHub 工程师 Cheng Zhao 创建。这并不是什么利他主义的开源礼物 ——相反,它是作为 Atom 编辑器的基础。这是 GitHub 新推出的一个 “可删节的( hackable ) ”文本编辑器,依赖于 Web 技术(HTML、CSS、JS),但需要在桌面上运行。从一开始,GitHub 就资助并培育了这个框架。因此,Electron 很快就从实际测试、持续的开发反馈和庞大的用户群(即 Atom 社区)中受益了。

具有讽刺意味的是,虽然 Atom 本身已被 Visual Studio Code 的光芒所掩盖,但其底层框架却日益强大,变得更具通用性。几年内,“Atom Shell ”更名为 Electron,并于 2016 年发布了 1.0 版本。当时,Slack 和 GitKraken 等公司已经在使用它。然后发生了一件大事:微软在 Electron 的基础上推出了 VSCode。仅凭这一点,许多企业团队就认可了 Electron。

Electron 的关键技术选择

Electron 真正的突破性在于同时嵌入了 Node.js 和 Chromium。这样,JavaScript 就能直接与本地操作系统的功能进行通信,同时呈现基于浏览器的用户界面 —— 对于许多 Web 开发人员来说,这是个不可抗拒的组合。多进程架构大致以 Chromium 为蓝本:

  1. 主进程: 处理应用程序级问题,如创建窗口、连接 OS 级 API 以及管理整个生命周期。实际上,它是 Electron 的 “大脑”。

  2. 渲染器进程: 每个窗口或“视图”都在自己的进程中运行,渲染 HTML、CSS 和 JavaScript。渲染器崩溃不一定会导致整个应用程序瘫痪,因此,这种隔离增强了稳定性。

  3. 自动更新器:Electron 内置的自动更新模块。人们很容易忘记,在原生软件中,自动更新历来也都不是一件容易的事。有了 Electron,你可以轻而易举地获得自动更新功能,对频繁发布补丁或增量的新功能来说,这可是一个重大利好。

这种结构意味着,以前端开发为主的团队可以轻松地推出桌面版 Web 应用程序。这也正是许多初创公司倚重 Electron 的原因:上市时间通常比内存占用更重要。

开发者抱怨:
Electron 臃肿而冗余

Electron 一直饱受批评,尤其是在臃肿方面。每个 Electron 应用程序都绑定了自己的 Chromium 实例。因此,如果你同时打开了 Slack、VSCode 和 Discord,就相当于并行运行了三个 Chrome 浏览器。这会导致大量的内存占用以及应用程序二进制文件过大。在 Electron 中,一个微不足道的“ Hello, world ”就可能超过 100MB 。在一些纯粹主义者看来,这简直是骇人听闻。

在早期,Electron 也有一些稳定性方面的小问题。如果渲染器崩溃,用户偶尔会遇到 “白屏死机”的情况。最终,社区解决了这些问题,现在的 Electron 已经变得更加强大。尽管如此,对于优先考虑性能和资源占用的团队来说,Electron 的开销还是会让他们望而却步。

从安全角度来看,Electron 应用程序通常不会像现代浏览器标签页那样被置于沙盒中。一个不道德的依赖关系或一个不安全加载的脚本,都可能让攻击者更深入地访问操作系统。因此,对待 Electron 开发,必须持和对待本地应用程序安全一样的严谨态度:启用上下文隔离、限制远程代码执行、谨慎使用软件包等等。这并非无法克服,只需要严守纪律。

有趣的是,一些有雄厚资金支持的应用明确避开了 Electron。ChatGPT 就是最近最好的例子:鉴于 OpenAI 拥有足够的工程带宽,他们为 Windows、macOS、iOS 等平台开发了原生客户端。有人猜测,他们想要的是深度集成的体验或更好的性能(实事求是地说,如果你的应用名称中包含 “ AI ”,你很可能会想着不要浪费周期)。不过,对一个小团队来说,这个要求很高。我们中的大多数人都没有足够的资源来构建和维护多个原生实现。因此,Electron 仍然很受欢迎。

Tauri 与未来

多年来,Electron 从根本上降低了开发桌面软件的门槛。突然之间,曾经局限于 Web 技术的开发人员可以将他们的工作打包成一个原生感十足的应用程序了,而且不需要单独的代码库。这种方法激发了新的思路和快速原型,为桌面软件带来了新的声音,并引发了一波工具浪潮,如 Atom、Slack 和 VSCode 。如果要在三个平台上构建这些工具的原生版本,那么成本可能太高。在我看来,Electron 的真正成功在于,它将 “让我们做一个桌面客户端 ”从一个可怕的、专业的工作变成了一个可行的周末项目。

当然,并不是每个人都能接受为每个应用程序提供一个完整的 Chromium 实例所带来的内存开销或成本。为此,Tauri 等框架应运而生,解决了这些痛点。例如,Tauri 依赖于操作系统的原生 webview,而不是捆绑自己的浏览器引擎。在某些情况下,仅这一点就能将一个基本应用的大小从 100 MB 以上缩小到 1 MB 以下。它的后端是用 Rust 编写的,这样既能提高性能,又能保证内存安全,而且还能对应用程序可以访问的 OS 级功能施加更明确的限制。对于重视安全性或无法忍受内存占用过大的团队,这很有吸引力。Tauri 还不是很成熟,但它预示着一个引人入胜的未来:“桌面 Web 技术 ”的便利性与更小的二进制文件和更高效的资源利用可以兼得。

尽管存在一些批评,但作为一个从 Atom Shell 时代就开始关注 Electron 的人,我对它的持久力还是印象深刻。

对于大多数企业来说,与初始效能相比,产品上市时间仍然是更迫切的问题。因此,在短期内,Electron 很可能会继续占据主导地位。尽管如此,风向已经在发生变化。开发人员越来越多地意识到,需要在便利性和性能之间进行权衡,而像 Tauri 这样的替代品也在加速挑战现状。

在未来几年里,无论 Electron 是继续保持其王者地位,还是逐渐退出市场,它都已经改变了我们对桌面应用程序的看法。它让跨平台开发变得直观,甚至充满乐趣,这可不是一件小事。

原文链接:

https://smalldiffs.gmfoster.com/p/what-happened-to-lightweight-desktop

声明:本文为 InfoQ 翻译,未经许可禁止转载。

今日好文推荐
??OpenAI“背水一战”:紧急上线Deep Research,比DeepSeek强三倍?网友直呼AI开源大战要来了!
??一场由DeepSeek引发的技术裂变,正在重写AI时代的权力分配方程式
??DeepSeek霸榜一周:奥特曼终于承认在开源问题上处于“历史错误的一边”;迅雷斥资5亿收购“直男社区”虎扑 | Q资讯
??美国终于要对 DeepSeek 下手了?美官员称 DeepSeek 是“偷窃”
读者福利

新春到,福气到

百万拼手气红包??同时到

新的一年,极客时间祝您

好巳发生,事事顺

来抽个拼手气红包,博个好彩头

0 门槛、100% 到手、即领即用

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...