Cross-Platform desktop Apps Development with Node.js

It's been multiple years I am doing web app development using node.js even from last year I do started Mobile app development in Ionic framework , Meteor.js too . Last year I also found some node.js frameworks which are in mostly in beta mode or in huge development and I started learning those frameworks , and I do found them useful and now I see their demand is increasing day by day , that is why I thought I should write this article for fellow Node.js programmers who are not checked out those awesome frameworks yet .

Like WebViews for iOS/Android, NW.js leverages the latest in web technologies (Chromium and io.js) to provide a complete platform for building fully-featured desktop applications using the same technologies used for the Web.

Web applications are the past, present, and future, but there are some cases where it’s not recommended to host an application on a remote server. With the arrival of HTML5, we now have low-level functionality added to modern browsers, like the ability to read and write files to a computer’s file system.

That opens up the possibility to create offline Single Page Applications (SPAs) using a web browser as a platform.

That presents some interesting possibilities, such as the ability to deploy your application on multiple operating systems.

Before we get in too deep let’s evaluate why we felt a desktop (as opposed to a command-line) app was needed:

Simplicity: Finch should ‘just work’ for as many people as possible; the rich interface offered by a desktop versus command-line app gives us a better crack at making this happen

Compatibility: Although Node.js and npm (both required to install the command-line app) are free, open-source and widely compatible, installation often proved troublesome for users less experienced with terminal interface.

Reach: A by-product of the previous factors; by making the entrypoint simpler and more accessible we’d hope to attract, and interest, a far broader audience.

As a web developer, jumping into desktop application development is a daunting task. Native toolkits seem lackluster in terms of control and speed of development, compared with the incredible flexibility of HTML and CSS. Furthermore, web apps have evolved to replace many desktop apps, but there is still a usability gap. Native apps simply have the home team advantage in terms of desktop integration and feature capabilities. Also, if you already have a web app built, but want to improve engagement with a desktop presence, maintaining a parallel native application is prohibitively time-consuming. How about we have the best of both worlds, with native desktop apps that are built with web technology?

Chrome, meet node.js!

Enter Chromium CEF. Chromium CEF is the open source, embeddable version of the Chrome browser, and has existed for nearly as long as the browser itself. This enabled the browser to be fairly easily embedded with languages like C++ or Python. However, no complete, cross-platform solution existed, and the build and dev process still resembled native desktop app development.

Everything changed with the combination of node.js. Recently, there has been an explosion of node.js-based options, enabling web developers to create pure JavaScript cross-platform desktop apps with ease. All of these combine the ample node.js ecosystem with the power of Chrome, to create the most rapid and well-supported methodology for porting web apps to the desktop, or for building up cross-platform desktop apps from scratch using web tech.

Node.js desktop frameworks

• AppJS - one of the oldest frameworks in this space, now deprecated in favor of deskshell, which, unfortunately, seems also to have lost momentum. Personally, I liked the approach of this one, as it routed content in a way very similar to web MVC frameworks, making porting web apps from node.js much more transparent. However, unless development picks up again, it's probably not a good choice for new projects.
• NW.js, formerly node-webkit, is one of the most popular and mature options today. It offers the best assortment of features, great community support, and easily searchable online questions. As it's been the go-to option for this type of application, it already has an impressive list of mature applications, Intel XDK cross-platform mobile IDE, and even several video games.
• Electron.js, originally built for GitHub's Atom editor, is brand new, but it's already really popular. Its philosophy sits somewhere between NW.js and AppJS. Like AppJS, it cleanly separates front-end from back-end (which run in separate processes and can only communicate via sockets), but it provides no built-in MVC routing framework. Electron.js probably has the most commercial momentum at the moment, despite being not quite as feature-rich or mature as NW.js, and forms the basis for Microsoft's new Visual Studio Code and Slack's desktop presence. Also, Electron.js made the bold move of supporting io.js instead of node.js, which means it supports a few more cutting-edge features of JavaScript than the others, while (at least in theory) supporting backward compatibility.

Attempting to build a cross-platform application—that is, one which will run on multiple operating systems using the same underlying code—presents a number of challenges, especially to a small team such as ours where we simply can’t afford huge amounts of time spent in Research & Development.

The cross-platform / small team constraint is actually a help here since it immediately precludes a number of options (such as a native app written for each supported OS). The shortlist was very quickly whittled down to:

• Go with an unknown UI toolkit
• Java with Swing or similar
• C++ using the QT framework
• Node.js with Node Webkit (now NW.js)
• Node.js with Atom Shell (now Electron)

In truth that’s more of a longlist since it didn’t take long to discount Go (no cross-platform GUI solution), Java (horrible cross-platform UI solution) and C++ (lack of familiarity), especially since the command-line app was already written in Node.js meaning plenty of scope for code reuse . A two-horse race was a much more manageable one, so I rolled up my sleeves and dived in.

NW.js or Electron?

Before answering this question it’s worth establishing exactly what problems these projects aim to solve. I’ve found no better explanation than Electron’s very own introduction, so I’ll simply simply quote it here:

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.

This doesn't mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

Electron allows you to create desktop Node.js applications with a Graphical User Interface driven by web technologies—HTML, CSS, JavaScript et al—while also providing access to OS-native capabilities like menu creation, window manipulation and clipboard access.

Note that anywhere you read ‘Electron’ above you can substitute ‘NW.js’—they have architectural and implementation differences, but these make little difference from a development point of view once their respective boilerplate setup is out of the way.

Given the enormous development effort behind Electron, its rapid release cycle and superb website (particularly compared to the rather woeful NW.js equivalent) I’d probably choose Electron if I was starting afresh, though in reality you can achieve the same end result whichever you use. Both are backed by technology giants (Intel sponsor NW.js while Electron is a GitHub project), neither look to be going anywhere any time soon and NW.js has a major new release on the not-too-distant horizon. Whichever you pick, you’re probably in safe hands.

Compared to developing truly native apps, web-tech desktop apps do have a few drawbacks.

The most notable is look-and-feel. All of the platforms discussed above have an assortment of desktop-integration features, but will still stand out compared to natively-developed apps.

Another drawback is memory and CPU usage. Web browsers embody a kitchen-sink approach to functionality. Chances are, you will only be using 50% of the huge feature list that the web supports, such as native video, audio, 3D gaming capabilities, and legacy support for dozens. With these frameworks, it's all or nothing, which means an equivalent app written with native toolkits is going to be much lighter-weight.

Finally, the distribution size itself. These frameworks usually sit at least at 30-50 Mb. Native apps can be as much as 10-1000 times smaller, since they use shared system libraries. While for larger apps this is not an issue, if you need to distribute a simple, smaller application, its better to use native toolkits.

At the time I started learning nw.js is more mature than Electron , so I go with nw.js but now started learning Electron too for app development . Now there is some starter packages available for speed up the development.

NW.js: NW.js Starter

Electron : Electron Starter

Follow this tutorial written by Alexandru Rosianu

Frameworks like NW.js / Electron have been out there for a while now but only recently began to grow in popularity. We are seeing more and more apps built using NW.js or other similar frameworks (Wunderlist, Atom, Brackets, PopcornTime, etc) that look and feel like native apps. I believe the decisive moment that made these types of frameworks viable was when NodeJS was blended in, giving app developers the possibility to mimic basically all of the native features so far forbidden for a classic web app.

Thanks for reading!

Love the post? Hate the post? Have other Tips? Please Leave a comment below!

About the Author

Sandip Das is a tech start-up adviser as well as working for multiple international  IT firms , tech-entrepreneurs as Individual IT consultant / Sr. Web Application developer / JavaScript Architect , worked as a team member, helped in development and in making IT decision . His desire is to help both the tech-entrepreneurs & team to help build awesome web based products , make team more knowledgeable , add new Ideas to give WOW expression in product.

More on Sandip here at LinkedIn