00:00:00This is ElectroBun, a cross-platform desktop application framework that produces much smaller
00:00:05bundle sizes than Electron, doesn't require you to write any Rust like Tauri and gives you native
00:00:11performance through the power of Bun and its own C++ wrappers. So no Node.js or no V8.
00:00:18But does the fact that it uses your system's native WebView instead of using Chromium for
00:00:22all operating systems make it difficult to build truly cross-platform apps for?
00:00:27Hit subscribe and let's get into it.
00:00:32Ever since Bun announced full-stack executables last year,
00:00:36it's made me really excited for a decent Electron alternative.
00:00:40But after the acquisition by Anthropic, which I'll talk about later on in the video,
00:00:44it makes it less likely that that's a direction the Bun team are going to go in.
00:00:49So Yoav from Blackboard created ElectroBun, which is the closest we'll get to a Bun Electron,
00:00:55and he's already built some cool things with it like a hybrid browser, terminal and code editor
00:01:01tool called Colab, a text-to-speech app powered by Quen, and he even got Doom running on an
00:01:07ElectroBun app with the power of WebGPU. Let's go through how to use it in a simple project.
00:01:12Now, when you first initialise ElectroBun, you get access to a bunch of templates that you can
00:01:17use to see how the app works, like this really basic note-taking app, a multi-window app,
00:01:22and even a tray app that opens documentation inside your web browser.
00:01:26And because ElectroBun supports web tech, you can use any JS framework you want
00:01:31from Svelte to Vue to Solid.js and even Angular.
00:01:35But I'm going to go through a basic project from scratch to help you fully understand it.
00:01:40So here I have a basic Bun React app, which we're going to turn into a native Mac app
00:01:45through the power of ElectroBun. And to do that, I already have ElectroBun installed,
00:01:49and I already have a script to start the ElectroBun dev build,
00:01:53as well as a script to build the ElectroBun app.
00:01:55In fact, we don't need this type module here since we're not going to use it.
00:01:59Inside the roots of the project, I've created an ElectroBun configuration file,
00:02:03which right now contains the name of my app, an identifier, as well as a Bun build entry point.
00:02:09Now, I haven't yet created this entry point, so let's go ahead and do that now.
00:02:12Inside the source directory, I've created a Bun folder, and I'm going to make an index.ts file,
00:02:17which instantiates the browser window class and takes a title as an argument,
00:02:22which is the text that we'll show in our title bar, and a URL,
00:02:25which is where the app will navigate to when it first loads.
00:02:28So if we run Bun start, we should see our app load up showing the correct title,
00:02:32but nothing is showing here. This is because after Bun builds the app,
00:02:36so transbars TypeScript to JavaScript, does tree shaking and everything else,
00:02:41it puts the files in a different directory, which we need to reference in our entry point.
00:02:46And we haven't done that very well over here.
00:02:48So to fix that, we need to open up our ElectroBun configuration file and first add a new views
00:02:53object, which will contain the new views you want ElectroBun to have access to.
00:02:57And then we'll give our view a name of main and we'll give it an entry point of index.html,
00:03:02which contains front end JS that references the app,
00:03:06which holds all the JavaScript and CSS needed for this to run properly.
00:03:09You can find more information about the build config in the ElectroBun docs.
00:03:13Now that we have our main view inside our source Bun directory,
00:03:17we can open up the index.ts file and updates the URL to make use of the views and main directory.
00:03:23Which means now when we build the app, we should see everything working as expected.
00:03:28We can even give this a more app like feel by adding this property, which will remove the title bar.
00:03:34And we could also use the application menu object to give our app its own custom menu.
00:03:39And when we're ready, we can build the app for production, which creates a 17 megabyte
00:03:44DMG file and creates a 65 megabyte app. And if we compare that to a hello world Electron app,
00:03:50you can see that it's 271 megabytes more than four times the size of the ElectroBun app.
00:03:56Now, since ElectroBun apps build to OS native web views, meaning WebKit for Mac,
00:04:01Edge WebView 2 for Windows and WebKit GTK for Linux, you do have to think about certain features
00:04:08that web views don't support when developing cross platform apps.
00:04:11Although ElectroBun does support the Chromium embedded framework, which allows for cross
00:04:16platform consistency, but this does add the full Chromium browser to your app, meaning size and
00:04:22performance implications, which makes it pretty much the same as Electron, apart from the fact
00:04:27that it uses Bun. There are also some other cool ElectroBun features that I haven't spoken about,
00:04:32like an out of process iframe architecture to run each embedded WebView in their own isolated
00:04:38process, typed RPC for seamless interprocess communication, ZSTD compression and a self
00:04:44extracting wrapper for smaller initial downloads, code signing and much, much more.
00:04:48But unfortunately, I did come across some issues when building the demo app I went through earlier,
00:04:54like missing documentation, especially when it came to things around the ElectroBun entry file.
00:04:58The page flashed sometimes on full page reloads and using the inspector tools kind of messed up
00:05:03my layout. Now I know ElectroBun is really new. The first commit goes back to February and I'm
00:05:09sure there's even a few more before that. And this is just to say, I know these features will get
00:05:13fixed in the future. In fact, I hope these features get fixed in the future because the Bun team ever
00:05:19since being acquired by Anthropic have focused more on CLI and executable improvements instead
00:05:25of going down the direction of building an Elektron alternative. So it looks like ElectroBun is our
00:05:31best shot at having a cross platform desktop tool powered by Bun. And if you know nothing about the
00:05:37Bun/Anthropic acquisition or just want to know more about the new direction that the Bun team
00:05:42are going in since the acquisition, then check out this video from James, which talks about the whole
00:05:48thing.