Transcript
00:00:00This is Xero Native, a Xig-based native app builder by the cell that can either use the system's web view
00:00:05or bundle the whole of Chromium just like Electron for desktop or mobile apps providing super tiny binaries
00:00:12and instant rebuilds for development.
00:00:14But will the fact that you have to know a bit of Xig to use it properly put off JavaScript developers?
00:00:18Hit subscribe and let's find out.
00:00:20Although the BUN team are moving away from Xig to Rust, it's still a very cool language
00:00:28with no borough checker, no lifetimes and can call C directly, meaning any C library is a single import away
00:00:35without needing any glue code.
00:00:37And it's readable enough for JavaScript devs to pick up.
00:00:39In fact, if you want to watch me learn how to program in Xig from scratch, let me know in the comments.
00:00:44I think that'll be quite a fun thing to do.
00:00:46But essentially, Xero Native is a thin Xig shell that hosts a web view rendering a front end
00:00:51that uses JSON bridges so the JavaScript in the web view can communicate to the native Xig layer and vice versa,
00:00:58which is how it's able to reach OS level APIs.
00:01:01And if you think this sounds like ElectroBUN, well, it kind of is.
00:01:04But with one huge difference, which we'll talk about later on in the video.
00:01:07But for now, let's go through a very simple demo.
00:01:10So to get started, you first need to have Xig installed, which I've done with Miez.
00:01:13But you can also use Brew, then install Xero Native.
00:01:16And after you've done both of those things, you can run the command Xero Native init to scaffold a new project.
00:01:22This is the name of my project, but it can be anything you want.
00:01:25I'm going to use the front end flag with React, which is going to install a Vite React project.
00:01:30But it could also be Svelte, Vue, Nex or even just Vite.
00:01:34So if I hit enter, Xero Native will add a few directories.
00:01:37If we cd into the demo project, we can see we have the app Xig object notation file, which I'll go through later.
00:01:43We've got assets for things like icons and other static assets, the build Xig file,
00:01:48which is for the Xig build graph, the JS bridge and the web engine and the front end directory, which contains our front end code.
00:01:54In fact, if we go into that, we can see it contains some files that we're used to seeing it for a JavaScript developer.
00:01:58Now, at this point, if we run Xig build run, this will install all the dependencies and open our app in a new window.
00:02:04Note, if you want to install Xero Native on an existing JavaScript project,
00:02:08I recommend using Vite, which is a minimal version, and then changing everything in this front end directory to have the code for your app.
00:02:15Xero Native also has a really cool dev server that owns the whole front end lifecycle.
00:02:19So if we run the Xig build dev, this compiles the binary and runs the Xero Native dev server.
00:02:24So if I edit some code, we can see our native app update in real time.
00:02:28I can even run Xig build package, which will build the native app so I can distribute it.
00:02:33And we can see it here inside the Xig out package directory at only 2.9 megabytes, which is very small.
00:02:39And some people have even been able to get it to under 1 megabyte.
00:02:43But what if I wanted to change the app icon, the name or the web engine?
00:02:46Well, this is where the app zon file comes in, where I can do things like change the icon name, the project name, and even the engine the app runs on, as well as the window size.
00:02:55And that is a very, very quick overview of Xero Native.
00:02:58There are so many things I didn't get around to going through, like system tray icons, code signing, and embedded apps for iOS and Android.
00:03:05In fact, I need to spend some more time with it, which could lead to another video.
00:03:09But as great as Xero Native is, how does it compare to something like Electrobun, which also creates small, fast apps that use the system's native web view?
00:03:17Well, with Electrobun, bun itself is the execution environment because you have to write typescripts for the main process.
00:03:24So although a zig binary starts the app, the code runs inside a bun web worker, which communicates with native APIs through bun's FFI, which has to go through a C++ and an Objective-C layer.
00:03:37But with Xero Native, all you need is the zig binary, no JavaScript, no bun, just zig, communicates to the OS level APIs and any C libraries through a simple C import.
00:03:50This results in having the thinnest native shell possible compared to Electrobun.
00:03:54But right now you may have to write a tiny bit of zig to get everything you want out of Xero Native or at least change some configurations in a zig object notation file.
00:04:03Also, Xero Native isn't as feature rich as Electrobun, which allowed me to change the title bar style and even add some custom menu items.
00:04:11And those things, unfortunately, aren't supported right now in the app zon file.
00:04:15I also had to file an issue because building a package on MacOS wasn't quite working for me the first time, but it could have been a skill issue on my part.
00:04:22Nevertheless, I'm sure the team are working hard on adding more features and fixing some of these issues, as well as adding some cool mobile support.
00:04:29And if you can't wait for any of those features, well, it's open source.
00:04:32So just give the code to Claude, tell it what you want and I'm sure it can add those features for you, right?
Community Posts
No posts yet. Be the first to write about this video!
Write about this video