Not long ago it was impossible to build a desktop app with JavaScript. Happily, these times are gone, and now JS developers can use their knowledge and web development expertise to create desktop applications with a native feel.
Traditionally you’d build iOS and Android apps with two separate codebases: Swift/Objective C for iOS apps. Java/Kotlin for Android apps. With React Native you can kill two birds with one stone, and use one codebase that works on both Android and iOS — and save a ton of time and money. React Native is used by many of the biggest companies. Electron is an open-source framework initially built by GitHub for Atom editor in 2013.
As usual, it’s easier said than done. While doing our research, we noticed that there’s much confusion on how JavaScript desktop apps are really built and how they work. It’s also pretty challenging to find the right tools to use on a project.
But search no further, we’ve done that work for you.
In this article, we’re taking a closer look at 5best-known JavaScript frameworks for desktop apps.
Electron is an open-source framework initially built by GitHub for Atom editor in 2013. This library lets you create desktop GUI applications with web technologies like JavaScript, HTML and CSS.
An app built by Electron development companybehaves like a web app, but it can read and write data in the computer’s file system. There are many popular desktop apps built with Electron on the market, for example, Skype for Linux or an awesome productivity tool Serene, that we’ve helped to build. If you want to learn more about popular desktop apps built with Electron, check out the article on 7 famous desktop apps using electron.
The significant advantage of this solution is that there’s no need for a JavaScript web developer to learn new technology or language to build a desktop app. The Electron app usually reuses the business logic, design and general structure of a web app. It’s a great way to save time and money on the business and development side.
If you’re a JavaScript developer, you’re going to need to learn a few relatively simple things on how Electron works and it’s API. You will most probably be able to set up your first Electron desktop application in just a few days.
Electron is a mature technology with a growing community and thus makes for a great production environment. Thanks to Chromium engine UI rendering, you get access to tools such as Developer Tools and Storage Access.
The next on our list of the best JavaScript frameworks for desktop apps is NW.js, previously known as the node-webkit. It was built at Intel’s Open Source Technology Center by combining Node.js framework with a Chromium engine (previously known as Webkit).
Thanks to the Node.js and Chromium combination, you can build an app that not only loads a local website in an application window but also connects with the OS through JavaScript API. This solution lets you control parameters such as window dimensions, toolbar and menu items, and it provides access to the local computer files.
NW.js is unopinionated and gives you the freedom to choose frameworks and libraries that you want to use on a project. It makes it possible to call Node.js modules directly from the DOM, supports all features of the browser, provides a JavaScript source protection and is available on Linux, Mac OS, and Windows.
AppJS is a simple yet powerful tool that you can use to build cross-platform apps without the need to learn new languages. Similarly to the other libraries mentioned today, you’re fine as long as you’re familiar with HTML, CSS and JavaScript.
Although it’s the oldest Node.js-Chromium framework in the AppJS, Electron and NW.js trio, it’s not nearly as mature as its competition. Because it has lost its momentum, it may not be the best choice for new projects.
In AppJS you get the following:
- JS, HTML5, CSS, SVG, WebGL provided by Chromium
- mature http/https servers and client APIs – Node
- filesystem, DNS, cryptography, subprocesses, OS APIs – Node
- sandboxed code execution environments virtual machines – Node
- tools for exposing native C++ bindings to JavaScript- Node
Meteor advertises itself as “the fastest way to build JavaScript apps”, an “open source platform for web, mobile, and desktop”. This cross-platform framework written in Node.js can be used for building web, mobile, and desktop applications.
Although it does not build desktop apps on its own, it can be used with Cordova or other similar tools to produce them. It uses MongoDB, Distributed Data Protocol, and a publish-subscribe pattern to auto-propagate the changes without developer interference. It has both front-end and back-end modules, including the API, build tools, Node.js packages.
Proton Native is a fresh release. It was made available on GitHub in the early months of 2018. What Proton Native does for desktop app development is similar to what React Native has done for mobile (read more about the difference between React.js, React Native and React VR).
What makes it one of the best JavaScript frameworks for desktop apps is that it lets you manage state and build UIs seamlessly while doing it cross-platform. It works quite differently to Electron, which runs a full Chromium browser to manage a small GUI. Proton Native, on the other hand, usesnative tools, takes less space and needs fewer resources.
This solution has a few other advantages – it uses the same syntax as React Native, works with React libraries including Redux and is compatible with Node.js.
To sum up, JavaScript frameworks for desktop apps can be divided into three categories:
- Frameworks that produce web browser hosted desktop apps, based on Node.js and Chromium (Electron, NW.js, AppJS).
- Frameworks that need to be used with Cordova-like tools (Meteor).
- Frameworks that use genuinely native components to build a desktop app (Proton Native).
It’s up to you which you choose, and it primarily depends on the type of project that you develop.
How Build Desktop Mac Apps With React Native American
Hope this short list and overview helped you take a quick look at each of this tools and make it easier for you to decide which solution will perform best for you.
React For Desktop Apps
If you liked this article, please share it with other developers so that they can also learn about these 5 JavaScript frameworks for desktop apps!