NodeJS /Electron Confusion about client/server code

Viewed 12283

This is a beginner kind of question. I haven't used NodeJS before, so it's a bit confusing to me. I don't see a clear separation between server modules and client modules. It seems like I can use "npm" (Node's package manager) to install both client modules and server modules.

My question is specifically related to this page: http://electron.atom.io/docs/v0.36.8/api/synopsis/

It says that I can use Node modules on client side:

The renderer process is no different than a normal web page, except for the extra ability to use node modules:

    <!DOCTYPE html>
    <html>
    <body>
    <script>
      const remote = require('electron').remote;
      console.log(remote.app.getVersion());
    </script>
    </body>
    </html>

How does this make any sense? Node is running on the server side, how is the browser ("renderer" process as they call it) able to use Node's packages?

4 Answers

In the official electron tutorial they states:

You can use Node.js modules in your application. Pick your favorite npm module. npm offers currently the world's biggest repository of open-source code – the ability to use well-maintained and tested code that used to be reserved for server applications is one of the key features of Electron.

As an example, to use the official AWS SDK in your application, you'd first install it as a dependency:

npm install --save aws-sdk

Then, in your Electron app, require and use the module as if you were building a Node.js application:

// A ready-to-use S3 Client
const S3 = require('aws-sdk/clients/s3')

In this way Electron is way different to normal Web Apps where you can't just use some node module from npm to get the job done.

As pointed out in the official electron tutorial "this is one of the key features of Electron." because it makes solving certain problems way easier.

Imagine for example, that you want to write a simple markdown app. There is a node module called markdown-it. Using Electron you can just require and use it directly from within your client-side/render-process code, as done in the implementation for StudyMD.

Related