Leveraging the TypeScript-native runtime Bun, Electrobun enhances Electron by offering a reduced application size and integrated update functionalities.
From its initial launch, Electron has evoked mixed reactions from developers. While it provides a straightforward method to deploy web-UI applications consistently across various operating systems, ensuring identical behavior, UI/UX, and codebase, it also carries the drawback of a substantial memory and disk-space overhead due to packaging an entire web browser and JavaScript runtime.
Numerous alternative projects have surfaced, aiming to offer similar ease of use and uniformity but without the associated bulk. Tauri, for instance, employs Rust to create compact executables and can utilize the system’s native web view for its front end, though this necessitates proficiency in Rust.
A newer entrant in this space is Electrobun. This solution utilizes the Bun JavaScript runtime, facilitating direct application development in TypeScript. Electrobun asserts that it generates significantly smaller bundles compared to standard Electron, as it doesn’t mandate embedding a browser. Furthermore, it incorporates proprietary differential update capabilities, eliminating the need for developers to implement custom update systems or distribute large patches for minor corrections.
Configuring an Electrobun application
To start working with Electrobun, Bun must first be installed. Following the Bun installation, execute bun install electrobun to add Electrobun as a project dependency. Subsequently, you can rapidly generate the basic structure for an Electrobun project using the command bunx electrobun init, which includes default sample application templates:
- Within the
srcdirectory, you’ll find separate folders for the application’s core code (located inbun) and for the HTML user interfaces (inmainview). - The
electrobun.config.tsfile outlines the project’s configuration and build specifications, detailing aspects like which directories or files to include in the build, options for browser bundling, the application’s starting point, and other relevant settings.
Additional files found in the directory are standard for most Bun or TypeScript projects, examples being the bun.lock file, as well as package.json and tsconfig.json.
Executing the aforementioned init command will provide a functional sample application that can be instantly launched and operated in development mode by running bun start.
An elementary “hello world” application generated by Electrobun. Elements such as menus, window controls, the application icon, and system tray presence are fully configurable.
Foundry
To compile the application into a deployable artifact, execute bunx electrobun build. Include the --env=stable flag to create a production-ready build and activate any configured patch generation (details covered later). The final setup package will be located in an artifacts directory. For Windows users, a self-extracting installer is provided, though a .zip archive, ready for in-place extraction, can also be distributed.
Developers have the option to either integrate a browser instance directly into the application or leverage the operating system’s native web view. For Linux environments, or scenarios demanding consistent feature performance, bundling the browser is advisable, despite it significantly increasing both download size and disk space usage. A compressed “hello world” application, when built without the bundled browser, typically measures approximately 30MB.
Front-end and back-end development approaches
Electrobun does not favor any specific front-end framework. Developers are free to utilize plain JavaScript or TypeScript for their user interfaces, or integrate popular frameworks such as Svelte, Angular, or React. The provided boilerplate code offers straightforward examples of applications developed with Svelte, and also with combinations like React, Tailwind, or Vite.
The backend is generally developed using TypeScript; however, any package compatible as a Bun or NPM dependency can be employed. To interact with Electrobun’s APIs, simply import them, for example: import Electrobun from "electrobun/bun"; or import {BrowserWindow, ApplicationMenu,} from "electrobun/bun";.
Electrobun’s API offers access to essential components typically used in desktop application creation:
- BrowserWindow: Represents the main application window, deriving its name from its web browser foundation, though it typically omits standard browser elements such as address bars or navigation controls.
- BrowserView: This is the embedded web browser component within the window. It can serve as a standalone display for a single view or host multiple
electrobun-webviewtags, each generating an independent browser document (akin to aniframebut with enhanced control). - ContextMenu: Provides functionality for customizing the right-click context menu. This menu can be activated even when the Electrobun application is not the active window.
- ApplicationMenu: Refers to the application’s main window menu, adopting the native UI styling for menus and supporting accelerator keys. It’s worth noting that this feature is currently unavailable on Linux.
- Tray: Grants control over the system tray icon. Nevertheless, interactive pop-up notifications or “toasts” in this area are not yet supported.
Electrobun applications additionally include a comprehensive set of pre-defined events that can be intercepted, either within specific components (locally) or across the entire application (globally). For example, a navigation event can be captured at the application scope, the web view scope, or both. Local events trigger prior to global ones, allowing for actions such as controlled resource deallocation.
The application’s build configuration also features a dedicated API. This enables the creation of hooks for behaviors that, for example, are only active when the application is built in development mode.
Application deployment and updating
While many application frameworks provide an installation process, only a select few offer native functionality to update an existing application instance. Electrobun incorporates a proprietary update API, featuring tools for detecting new versions and creating incremental patch files for each revision. These patches are differential, containing solely the modifications from the preceding release, making them exceptionally small unless substantial changes, such as new dependencies, are introduced.
It is important to note that updates via patches are only initiated when a user is transitioning from the directly preceding software release. Should a user install version 1.1 and delay updating until version 1.5 is available, the system will not sequentially download and apply patches for versions 1.2, 1.3, and so on; instead, it will perform a full download of the most recent version.
Summary
Electron’s attractiveness extends beyond its cross-platform capability and ease of use. It also enables the development of complete application stacks using JavaScript, the foundational language of the contemporary web. Electrobun seeks to build upon this by prioritizing TypeScript over JavaScript and introducing additional utilities for application distribution and maintenance.
Presently, Electrobun exhibits characteristics typical of an emerging project. Its documentation sometimes lags behind the actual project, resulting in discrepancies between documented examples and the code produced by the boilerplate. Furthermore, despite efficient compression of the downloaded artifact, the application’s footprint on disk remains considerable post-extraction, primarily owing to the substantial size of the Bun runtime.
