JS, JS, JS everywhere

JavaScript is the language of the web - we all have heard that many times. It has a variety of potential usages in various (sometimes not obvious) scenarios - even server-side ones - but there was a category of applications I could not imagine JS in - thick (desktop) clients. However, recently I've encountered two projects that have made me reconsider this opinion. What's interesting, they both use a very similar approach & both have already made a lot of noise around.

Thick client, where art thou?

But before we delve into actual projects - who needs thick clients anymore? Didn't we all agree that web is the way to go? Isn't Silverlight, WPF, WinForms, AWT or Swing long dead?

Well, first of all - mind mobile applications: going native is still the main way to go & it means nothing else than creating a thick client using platforms native runtime (& language, & platform, etc.). But putting mobile aside, web is absolutely awesome & you can deliver both incredibly good looking & outstandingly ergonomic applications using web tech stack, but ... web also means firm restrictions that are very hard to overcome. Some example areas:

  • local (OS resources, storage, filesystem, etc.) interactions
  • cross-domain requests
  • sophisticated encryption or non-trivial communication protocols / middle-ware

As the matter of removing these impediments from web apps causes high security risks, thick clients will stay with us, at least for now.

Have your cake and eat it too

But what about going desktop apps while still saving few of web apps tremendous advantages - mature & well known languages (HTML+CSS+JS), insanely wide range of libraries / frameworks available, being lightweight & what may be the most important aspect -> staying cross-platform.

This is what the projects mentioned above are about.

nw.js

You may have heard about nw.js under its old name - Node Webkit. What's nw.js? Basically, it's a minimum version of Chromium (engine that powers Google Chrome), that can be used to execute applications based on web tech stack (HTML+CSS+JS). It supports all "desktop" platforms Chromium is available for: Windows, Linux & Mac OSX. Obviously you can use both server-side Node modules (for instance file-system access) and web browser features (like web storage).

So, how does one build a desktop app using JavaScript & HTML? Honestly, if you've been using Ionic or Win.js, it feels pretty much the same. And it's not that far from what SPA web frameworks have accustomed us to - there's no dedicated DSL, just some constructs (objects, functions, modules) that represent native abstracts - you refer to them using standard, JS syntax. Here's an example repository with few representative samples: https://github.com/zcbenz/nw-sample-apps

If you want to learn a bit more about nw.js, here's the place to do that: https://github.com/nwjs/nw.js
And if you wonder whether any of apps you use is based on nw.js, here's a good reference list: https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js

Electron

Atom is an ultra-customizable, modular text editor created by GitHub squad. Like a dream SublimeText was supposed to realize, but it never did. But let's put Atom aside for now (however, it's a great piece of software) - the key point is, that Atom is running on a shell named Electron (previous name: Atom Shell) that strongly resembles what's under the hood of nw.js. It's also based on Chromium & it utilizes io.js instead of Node (which makes a meaningless difference, tbh).

Why do I even mention Electron then (when it's so similar to nw.js)? Regardless of it short age, it's extremely rich, well documented & easily accessible. It deals with stuff like auto-updating, packaging or error reporting for you. It provides some generic native widgets to make user perception as smooth as possible. And many, many more. Just check this list of testimonials: http://electron.atom.io/#built-on-electron. I'm personally using 3 applications (Atom, Visual Studio Code, Slack) based on Electron & if I wasn't told they are made with JS, I wouldn't believe it. It's actually quite surprising that the latest big bump of thick GitHub client (aka Desktop) is not based on Electron.

If you want to give Electron a go, I strongly advice you to start here:
http://electron.atom.io/docs/v0.31.0/tutorial/quick-start/

Pic: © Gina Sanders - Fotolia.com

Share this post