If you’re a developer and you’re like me, you’ve probably developed app interfaces using a variety of different technologies (other than good old HTML), including:

  • Windows Forms
  • WPF
  • Android
  • Unity

And also like me, you might have come to the same conclusion: how much you love HTML!

The Beauty of Web Technologies…

Some time ago, when it became possible to build cross-platform desktop apps using web technologies, some developers, including myself, were ecstatic. That’s because HTML + CSS are, in my opinion, the clearest and simplest technologies for building interfaces.

Today there are two major frameworks that allow you build these desktop apps: Electron and NW.js, both based on Chromium and Node.js.

My experience with Electron is from some small contributions to an open source project. We were using React to build the app components and Sass for styling with CSS… all web-related. It was really smooth and felt like home. I mean… you need inputs, a table, a list? Go and write the HTML. It’s that easy. You need to debug or inspect? Go and use Chrome’s dev tools. Automation? Configure the tasks you want with Gulp or Grunt.

The Codebase: Is It Different?

Maybe you’re wondering, “what’s the difference in the codebase for each platform?”.

The code is nearly the same for each operative system. There are some specific changes that differ between them: the ones related to generating the build and other minor chunks of code here and there (like which keyboard shortcuts to use (bind)). Here’s an example:

 

{

label: 'Cut',

accelerator: 'CmdOrCtrl+X',

role: 'cut'

}

 

Yup, it’s that easy! With that simple JS object you are giving instructions to bind the “cut” option to “control+x” on Windows and Linux or “command+x” on Mac.

The Pros & Cons

Working with Electron has its own framework particularities. You need to learn the design, the architecture, the app flow, the main process, and Renderer process.

So then why would anyone build desktop apps using web technologies? Well… there are some points to take into account.

These days, people are used to web apps. There are limitations on what you can do with UX when running as a website. Desktop applications, on the other hand, provide other capabilities and UX.

From the development point of view there are some benefits for building your app using a web technology like Electron. Every web developer knows these technologies so you will be able to reuse that experience instead of hiring experts for each platform or operating system.

This of course leads to faster production time as well as lower development costs. You can even pick any Node.js module you need.

There are some considerations, too. These web-based desktop apps will never run as fast as those compiled with native code. There is also a layer between the OS and the web-based app which native apps do not have, and which could lead you eventually to an unsupported feature.

Conclusion

If you’re a web developer, you are capable of use your expertise for building desktop apps. That’s why Electron or NW.js are so incredibly welcome in our industry. There’s a slight learning curve for these frameworks of course, but overall you’re going to save a lot of time and you will have the opportunity to use web features in desktop apps.