Building Desktop Apps with JavaScript - Ep 27

In this episode of The toolbox, I'll talk about different frameworks that can help you leverage your HTML, CSS and JavaScript skills to build Desktop Apps. I'll show you a demo of one of the new contenders in this space...NeutralinoJS. Can it beat the dominant Electron platform. Stay tuned to find out. The pace of the web is relentless and that's why you need the Toolbox

Hello everyone this is Ray Villalobos and I stream about front-end and full stack tools Wednesdays at 1pm Eastern • 10am Pacific. Follow me and subscribe on LinkedIn and YouTube for more content. If you want to watch any past episodes, make sure you take a look at my blog raybo.org.

Industry News

Creator of SolidJS hired by Netlify

Let's start by talking about some industry news that I found interesting. First, another principal engineer for an Open Source Project got hired by a company to work full time on their project. This time is Ryan Carniato, who created SolidJS. I covered that in the last episode of the Toolbox and released a separate demo.

This follows the news that other developers including Rich Harris, the creator of Svelte was hired by Vercel. This is becoming a pattern where popular projects get picked up by companies. I'm not sure if that's actually a good thing.

We have a big problem in the industry where projects aren't always supported well by the community. Popular projects like VueJS do very well but smaller developers really struggle to be able to be successfully funded.

State of Engineering

Another survey with some pretty interesting information focusing on what engineers spend their time on. I was guessing google and stack overflow...Google and a whole lot of copy/pasting and I wasn't too far off.

Why is your course old?

I wanted to spend some brief time with a question I got from a user this week about updating my Bootstrap 5 course with the 5.2 changes.

Updating a five hour course like that is a daunting task that requires a lot of time. I try to be real efficient on how I record my courses and often avoid going to a lot of websites. One of the changes on Bootstrap 5.2 is the look and feel.

I've you've been watching these episodes you know that Episode 26 was all about the changes in the CSS Frameworks that have happened recently and I did a demo of all of the new features in this version of Bootstrap. I think that this show is a great way to keep up with things and we're really trying to bring more of this content to the library. You might see some content from The Toolbox show up on LinkedIn Learning.

Git Code Challenges

I have a new course called Git Code Challenges. I had a great time building Git and GitHub code challenges, so I'm back with an installment of that series that focusses on mostly the Git part. It's hard to separate those two.

It's structured as code challenges, but I cover a lot of the cool code that you might not be familiar with like cherry picking, tags, Git's secret reflog to undo hard resets, worktrees for dealing with multiple branches simultaneously and more. Check it out!

How Do I build for the Desktop

It used to be that whenever you needed an application for Mac, PC or Linux, you had to rely on proprietary languages. But today, chances are, if you've worked as a developer, you've been using software made with web technologies.

The dominant platform in this space is Electron. This is an open source project that started at GitHub...which is now owned by Microsoft. It's used to create apps like Visual Studio Code, Slack, Twitch and Figma.

The huge advantage is that you get to use regular web technologies like HTML, CSS and JavaScript, but also Node.js, which lets you use the filesystem and have access to thousands of existing node modules that have been built by the community.

Your apps run using Chromium which an open source version of Chrome...the browser that runs most of the web. That gives you a good shell to put your applications in, so it's easy to make your applications work with pages and the debugger and web inspector that developers use to check out their pages.

Electron and other projects usually provide different hooks into the operating system. So the API's will have ways to deal with things like the touchbar, tray, the menus, etc.

Contenders

Although it's be best known. Electron isn't the only game in town, there's a few other projects you can try:

NW.js

[NW.js] (https://nwjs.io/) used to be known as node-webkit. I think it's a built of an older project than electron, but it has very similar features. Cross platform support for NodeJS.

The main difference is their version of the node.js engine and that the entry point can be a web page instead of a JavaScript file.

I would say that today Electron has better support. So electron is better integrated with node.js.

One of the advantages of NW is that it offers legacy support for Windows XP, so that might be of interest to you in some very special instances.

Tauri

Tauri is a newer kid on the block. The interesting thing about Tauri is that it uses a Rust instead of node.js and replaces chromium with other libraries so that what you get is a smaller web view.

The thing about electron is that it creates pretty large files and that's one of the problems Tauri addresses. Electron, on the other hand, is basically loading pieces of node.js and chrome into your app. A lot of the newer alternatives try to find ways of going around this and this one of the selling points of Tauri.

The other selling point is that Rust is a very secure programming language and JavaScript/node isn't as good with that, so Tauri provides some isolation between the javascript code and the back end application code. Things like access to the filesystem are locked down by default, so you have to turn on those type of access options.

In order to do things, applications like Tauri have to provide their own ways of dealing with certain features like the FileSystem and other app specific APIs.

Tauri uses a rust library called Tao for cross platform windowing. It also uses a library called Wry for the webview.

Using Tauri means that it might require you to learn at least some of Rust to deal with the backend of the app, which is not something web developers might want to do.

I think it's a good project that has a great CLI and future. A lot of tools are switching to Rust these days for the performance and security so learning how to work with isn't a bad thing.

Neutralino

The last project we'll talk about is NeutralinoJS. The goal of this project is to help you create lightweight cross-platform desktop app. The approach is sort of a combination of what Tauri and Electron are trying to do.

How does it compare? It's like Electron in that you work with Node.js, but it doesn't bundle it with Chromium into your app. So the apps are much smaller. It uses your computer's native operating system web browser library for windows and has its own libraries for connecting to system.

If you're trying to create the smallest app possible, this is the way to go. Unfortunately, this feels like a much smaller project so the documentation isn't as good and it doesn't have a ton of support.

Let's see that demo.

So, basically Neutralino gives you a ton of way to access native functions while still allowing you to use node.js for other libraries.

I am so bummed by the fact that it doesn't let you create menu items. This is actually pretty simple in Electron...just a configuration file. Also, I found the documentation a bit light, I wish there were more resources for this.

I did like the simplicity, the file size and the concept, but I think it needs more work to be successful.

Coming Soon

Soon I'll be adding interviews starting with two I've recorded with some LinkedIn Learning authors Ronnie Sheer, we talked about the difference between Python and JavaScript and weather web developers should learn Python. Christina Truong where we talk about her career, features in CSS she's excited about. Flexbox versus Grid and other great topics.