Node-Webkit vs Electron

Fizer Khan picture Fizer Khan · May 7, 2014 · Viewed 36.5k times · Source

We are planning to built cross platform desktop application. We found that Node-Webkit is a perfect choice for us. But GitHub developed their own framework called Electron instead of using Node-Webkit.

What is the difference between them?

Answer

max collomb picture max collomb · May 7, 2014

Electron has a page explaining the differences with node-webkit :

https://github.com/atom/electron/blob/master/docs/development/atom-shell-vs-node-webkit.md

Like Node-Webkit, Electron provides a platform to write desktop applications with JavaScript and HTML, and has Node integration to grant access to low level system in web pages.

But there are also fundamental differences between the two projects that make Electron a completely separate product from Node-Webkit:

1 - Entry of application

In NW.js the main entry point of an application is a web page or a JS script. You specify a html or js file in the package.json and it is opened in a browser window as the application's main window (in case of an html entrypoint) or the script is executed.

While in Electron, the entry point is a JavaScript script, instead of providing a URL directly, you need to manually create a browser window and load html file in it with corresponding API. You also need to listen to window events to decide when to quit the application.

So Electron works more like the Node.js runtime, and APIs are more low level, you can also use Electron for web testing purpose like phantomjs,

2 - Build system

In order to avoid the complexity of building the whole Chromium, Electron uses libchromiumcontent to access Chromium's Content API, libchromiumcontent is a single, shared library that includes the Chromium Content module and all its dependencies. So users don't need a powerful machine to build atom-shell.

3 - Node integration

In Node-Webkit, the Node integration in web pages requires patching Chromium to work, while in Electron we chose a different way to integrate libuv loop to each platform's message loop to avoid hacking Chromium, see the node_bindings code for how that was done.

4 - Multi-context

If you are an experienced Node-Webkit user, you should be familiar with the concept of Node context and web context, these concepts were invented because of how the Node-Webkit was implemented.

By using the multi-context feature of Node, Electron doesn't introduce a new JavaScript context in web pages.

Source code protection

Electron is packaging its applications with asar, which contains the applications' unprotected source code. This makes it possible for application 1 to extract application 2 and inject vulnerable scripts, without the user knowing it. You can checkout this project on GitHub to see an example of how to manipulate the Slack app for an example. As for now, the Electron team don't have any plans to implement support for source code protection.

NW.js has built in support for compiling your source code to protected binaries.