Build native desktop apps with JavaScript

May 09, 2018 0 Comments

Build native desktop apps with JavaScript

 

 


Atwood’s Law: any application that can be written in JavaScript, will eventually be written in JavaScript. -Jeff Atwood

proton native project - index.js

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 native apps.

If you are on Windows install the build tools by running

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

If you are on Linux you’ll need these libraries:


  • libgtk-3-dev

  • build-essential

If you’re on Mac…you don’t need anything.

Now run npm i -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 hold the Window and Menu, the Window has three props; title (the window title), size (takes an object that contains the width and height of the window), 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 to md5.

index.js

import React, { Component } from "react"; 
import { render, Window, App, Box, Text, TextInput } from "proton-native";
import crypto from "crypto"; class Example extends Component { state = { text: "", md5: "" }; encrypt = text => { this.setState({ text }); let md5 = crypto .createHash("md5") .update(text, "utf8") .digest("hex"); this.setState({ md5 }); }; render() { return ( <App> <Window title="Proton Native Rocks!" size={{ w: 300, h: 300 }} menuBar={false} > <Box> <TextInput onChange={text => this.encrypt(text)} /> <Text>{this.state.md5}</Text> </Box> </Window> </App> ); }
} render(<Example />);

I first imported Text and TextInput so i could use them later, and 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

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

and set the state object to the updated md5.

The render method return some jsx element, the Box element is just like div in React or View in React Native which hold the TextInput and Text because the window element doesn’t allow having more than one child (what is this china … sorry).

TextInput has an onChange prop that will be called every time the text changes, so we set it to a fat arrow function that take a text argument and return 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

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, 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 checkout the repo

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

Check out the previous article

How to build a news app with React Native


Tag cloud