How to build native desktop apps with JavaScript

How to build native desktop apps with JavaScript
0.0 0

#1

Written by Mohammed Salman.

When I was writing this article, Atwood’s Law came to mind:

Any application that can be written in JavaScript, will eventually be written in JavaScript. - Jeff Atwood
don’t worry about it

Today we are going to take a look at Proton Native, and make a simple encryption app with it.

Unlike Electron apps, apps built with Proton Native are actually native (hence the name) and not web-based on chromium.

Proton Native is like React Native but for desktop. It compiles to native platform code, so it looks and performs like a native app.

So let’s get started.

Windows

Install the build tools by running:

npm install --global --production windows-build-tools

Linux

You’ll need these libraries:

  • libgtk-3-dev
  • build-essential

Mac

You don’t need anything.

Now run the following:

npm install -g create-proton-app

and

create-proton-app my-app

to make a new project.

Open the project directory with your favorite code editor. The directory should look like this:

 └───node_modules
├───.babelrc
├───index.js
├───package.json
└───package-lock.json

index.js should look like this:

As you can see it look like React/React Native File

Just like any React or React Native Project, we import the react library and make a class component.

The App element is just a container that holds the Window and Menu, and the Window has three props: title (the window title), size (takes an object that contains the width and height of the window), and menuBar (set to false because we don’t want a menu bar).

Before we start coding, let’s install crypto using npm:

npm i crypto

We will use crypto to encrypt the text with the MD5 algorithm.

index.js

I first imported Text and TextInput so I could use them later. Then in the class after setting the text and md5 to empty strings in the state object, I created a function encrypt that takes a text argument.

In the encrypt function, we set the state to text and declare md5 to store the encrypted text (as below)

this.setState({ md5});
let md5 = crypto.createHash("md5")
.update(text, "utf8").digest("hex");

and set the state object to the updated md5.

this.setState({ md5});

The render method returns some jsx element. The Box element is just like div in React, or View in React Native, which holds the TextInput and Text . This is because the window element doesn’t allow a parent to have more than one child.

TextInput has an onChange prop that will be called every time the text changes. Therefore, we set it to a fat arrow function that takes a text argument and returns the encrypt function we created earlier.

So now every time the text changes, text is encrypted and set to md5.

Now if we run it with

npm run start

this window should pop up:

And if we enter some text, it gets encrypted to md5 like this:

You might say “It looks ugly — let’s add some styling to it.” Well, at the time of writing this article, Proton Native is still at it’s infancy. It’s very buggy and it doesn’t support styling (yet), but it’s a fun project to play with.

If you want to contribute to the project, check out the repo.

If you have any questions, feel free to comment or reach me on Twitter @4msal4 and don’t forget to hit that clap button :)

Check out my previous story here.


How to build native desktop apps with JavaScript was originally published in freeCodeCamp on Medium.