Linux Format - UK (2019-12)

92 LXF257 December 2019 http://www.linuxformat.com

CODING ACADEMY Proton

directory and fill in the version value v10.15.3. Until the

project is upgraded you will still get a lot of warnings

about deprecated functions in the V8 engine of Chrome.

If you want to be more bleeding-edge, you can use the

GitHub repository for your projects. If you can solve it

yourself, make a branch and refer to that one. Branches

are reached with a hashtag ‘#’. Move into your project

directory, remove node_modules and reinstall.

$ cd <project-name>

$ rm -rf node_nodules/

$ npm install

You will still get a lot of warnings but it will go

through and you can try out your template project.

If this seems complicated, you can also create the

library and add the files manually. Use the Proton

Native install script while in your project directory. Do

this after you have installed nvm and set the .nvmrc file

as described earlier.

$ npm i -S Proton Native

After the script runs, you will have the node_

modules directory and package-lock.json as well as

the .nvmrc file. You need to add two more files: .babelrc

and package.json. Add this to .babelrc:

{

“presets”: [

“env”,

“stage-0”,

“react”

ou may not be surprised that some developers

have criticised Electron (see tutorials LXF256),

mostly regarding the memory usage of its final

binaries. The initial binary is over 100MB, because a

major chunk of code from Chrome is embedded. When

you create a small piece of code, this is a horrible waste.

With Proton Native the binary is compiled with the bare

essentials, making the binary a few kilobytes in size.

That’s a very big win for small utilities.

Until now Proton Native hasn’t been in much use

with bigger projects. However, it may become popular

thanks to the potential for more efficient and smaller

binaries compared to Electron. Since it supports

Node.js, developers can create pretty much everything

that they can with Electron.

Environment and compilers

Under the bonnet, Proton Native uses libgtk3-dev,

build-essential, python2 and pkg-config for its

compiling, so make sure they are installed.

$ sudo apt install libgtk3-dev build-essential python2

pkg-config

Now you can compile the package you are about to

make. This is a Node.js package that you can install

using npm or npx. At the time of writing, this package

needs an old Node.js version – 10.15.3 works. To ensure

that your applications work, make sure each project

uses the correct version and follow up as you go.

Proton Native uses auto-gyp to compile to the local

binaries. Auto-gyp works with gyp and nbind to choose

the compiler and its options, making it possible to

compile your code in C++. For your case, you need to

keep track of developments so you can upgrade to a

newer Node.js and move to Python 3, since Python 2’s

End Of Life status is 2020.

Start by creating a directory for all your projects.

If you use the automatic install method, the script will

create a directory for your project and install all Node.js

software you need. However, it will fail. This is where

you need to choose the old Node.js. Install nvm globally.

$ sudo npm install -g nvm

Now you can create a file for setting another Node.js

for your application. Put a .nvmrc file in your project

Coding in React looks very similar but be aware that certain things do

not work the same due to limitations still in underlying libraries.

Create smaller sized

apps

with React

Mats Tage Axelsson takes you through creating a desktop application

using Proton Native, the React way to the desktop.

Mats Tage

Axelsson

keeps fighting the

tide, showing you

what even he can

do using Linux to

make the world a

better place and

improve his own

life in the process.

Y

PROTON NATIVE

OUR

EXPERT

Find the full

project on Mat’s

GitHub:

https://github.

com/matstage/

LoveMyTasks.

92 LXF257 December 2019 http://www.linuxformat.com

CODING ACADEMY Proton

directoryandfillintheversionvaluev10.15.3. Untilthe

projectisupgradedyouwillstillgeta lotofwarnings

aboutdeprecatedfunctionsintheV8engineofChrome.

If youwanttobemorebleeding-edge,youcanusethe

GitHubrepositoryforyourprojects.If youcansolveit

yourself, make a branch and refer to that one. Branches

are reached with a hashtag ‘#’. Move into your project

directory, remove node_modules and reinstall.

$ cd <project-name>

$ rm -rf node_nodules/

$ npm install

You will still get a lot of warnings but it will go

through and you can try out your template project.

If this seems complicated, you can also create the

library and add the files manually. Use the Proton

Native install script while in your project directory. Do

this after you have installed nvm and set the .nvmrc file

as described earlier.

$ npm i -S Proton Native

After the script runs, you will have the node_

modules directory and package-lock.json as well as

the .nvmrc file. You need to add two more files: .babelrc

and package.json. Add this to .babelrc:

{

“presets”: [

“env”,

“stage-0”,

“react”

oumaynotbesurprisedthatsomedevelopers

havecriticisedElectron(seetutorialsLXF256),

mostlyregardingthememoryusageofitsfinal

binaries.Theinitialbinaryisover100MB,becausea

majorchunkofcodefromChromeisembedded.When

youcreatea smallpieceofcode,thisisa horriblewaste.

WithProtonNativethebinaryiscompiledwiththebare

essentials,makingthebinarya fewkilobytesinsize.

That’sa verybigwinforsmallutilities.

UntilnowProtonNativehasn’tbeeninmuchuse

withbiggerprojects.However,it maybecomepopular

thankstothepotentialformoreefficientandsmaller

binariescomparedtoElectron.Sinceit supports

Node.js,developerscancreateprettymucheverything

thattheycanwithElectron.

Environmentandcompilers

Underthebonnet,ProtonNativeuseslibgtk3-dev,

build-essential,python2andpkg-configforits

compiling,somakesuretheyareinstalled.

$ sudo apt install libgtk3-dev build-essential python2

pkg-config

Now you can compile the package you are about to

make. This is a Node.js package that you can install

using npm or npx. At the time of writing, this package

needs an old Node.js version – 10.15.3 works. To ensure

that your applications work, make sure each project

uses the correct version and follow up as you go.

Proton Native uses auto-gyp to compile to the local

binaries. Auto-gyp works with gyp and nbind to choose

the compiler and its options, making it possible to

compile your code in C++. For your case, you need to

keep track of developments so you can upgrade to a

newer Node.js and move to Python 3, since Python 2’s

End Of Life status is 2020.

Start by creating a directory for all your projects.

If you use the automatic install method, the script will

create a directory for your project and install all Node.js

software you need. However, it will fail. This is where

you need to choose the old Node.js. Install nvm globally.

$ sudo npm install -g nvm

Now you can create a file for setting another Node.js

for your application. Put a .nvmrc file in your project

CodinginReactlooksverysimilarbutbeawarethatcertainthingsdo

notworkthesameduetolimitationsstillinunderlyinglibraries.

Create smaller sized

apps
with React

Mats TageAxelssontakesyou through creating a desktop application

usingProtonNative,theReactway to the desktop.

MatsTage
Axelsson
keeps fighting the
tide, showing you
what even he can
do using Linux to
make the world a
better place and
improve his own
life in the process.

Y

PROTON NATIVE

OUR

EXPERT

Findthefull

projectonMat’s

GitHub:

https://github.

com/matstage/

LoveMyTasks.