http://www.techradar.com/pro/linux December 2019 LXF257 95Proton CODING ACADEMY
ELECTRON-BUILDER TO THE RESCUE
code. The best way to understand this is to move out
code you have already written. So start with moving out
the menu to a separate file. This makes your main file
cleaner. Create MainMenu.js and enter this code:
import React, { Component } from ‘react’;
import {
Menu,
} from ‘Proton Native’;export default class MainMenu extends Component {
render() {
return(
<Menu label=”File”>
<Menu.Item
type=”Item”
children=”Open”
onClick={this.props.open}>
Open
</Menu.Item>
<Menu.Item
type=”Item”
children=”Save”
onClick={this.props.save}>
Save
</Menu.Item>
<Menu.Item type=”Quit” />
</Menu>
);
}
}
The observant reader will notice that the onClick
statement has changed to contain only the name of the
code, not the entire code. In the index.js file, you now
need to change the top of the class. Add a constructor
so you can refer to the imported class:
...
import MainMenu from ‘./Components/MainMenu.js’
...
class LoveMyTasks extends Component {
constructor(props) {
super(props);
this.state ={
text: ‘’,
project: ‘’,
};
this.save = this.save.bind(this);
this.open = this.open.bind(this);
}The key difference here is that the ‘state’ needs to be
part of the constructor and that you bind the code that
you will use from the imported code. You also need to
throw out the menu code inside your <app> tag.
<App> // you must include App for everything
<MainMenu
open = {this.open}
save = {this.save}
/>
As you can see, the menu is now much smaller,
making it easier to read the code. If you need to change
the menu, start in the MainMenu.js file and tweak the
index.js file.
The Proton Native project tries to make it easy to
create desktop applications using JavaScript and React.
In contrast to Electron, it does not include the
Chromium browser to achieve this. Instead, it uses other
projects to compile to native components using Qt. Qt is
not delivered on all platforms but it uses the underlying
system, avoiding large binaries for small tasks. In short,
Proton Native is an exciting project with a bright future
but it is currently lacking some stability.When you want to package your application, you can use electron-
builder. This does not mean that we make a full Electron application
with a Chrome binary built in, it just helps us make packages to
distribute. With this system, you get features to handle all your
packaging needs. You can make packages for macOS, Windows and
of course Linux.
You also have several package formats available. For Linux it
supports snap, Appimage, DEB, pacman and RPM. On top of that you
can create for FreeBSD systems.
If you use this, make sure you have two package.json files. One
file should be for development and one for deployment. This way
you can have a small binary for production even though you have
full debugging capabilities while developing.
In the case of proton-native, you can end up with really small
application binaries thanks to the direct compiling to Qt. The ‘create-
proton-app’ adds this functionality to your project so you can simply
run npm run build to build. If you want to create a bundle use npm
run dist. You need to put all your configuration in the package.json
file. If you don’t, it will only build for your current platform.SUBSCRIBE THE EASY WAY! Subscribe now at http://bit.ly/LinuxFormat
If you have doubts about how things look, start one instance, change
the code and then run another instance from a separate terminal.You can use a new terminal and vi to try out other projects. It makes it easier to learn new
concepts to try and emulate their efforts.9992Decmbr rb2c01tab0tksyou December 2019 LXF257 95
Proton CODING ACADEMY
ELECTRON-BUILDERTOTHERESCUE
code. The best way to understand this is to move out
code you have already written. So start with moving out
the menu to a separate file. This makes your main file
cleaner. Create MainMenu.js and enter this code:
import React, { Component } from ‘react’;
import {
Menu,
} from ‘Proton Native’;
export default class MainMenu extends Component {
render() {
return(
);
}
}
The observant reader will notice that the onClick
statement has changed to contain only the name of the
code, not the entire code. In the index.js file, you now
need to change the top of the class. Add a constructor
so you can refer to the imported class:
...
import MainMenu from ‘./Components/MainMenu.js’
...
class LoveMyTasks extends Component {
constructor(props) {
super(props);
this.state ={
text: ‘’,
project: ‘’,
};
this.save = this.save.bind(this);
this.open = this.open.bind(this);
}
The key difference here is that the ‘state’ needs to be
part of the constructor and that you bind the code that
you will use from the imported code. You also need to
throw out the menu code inside your <app> tag.
<App> // you must include App for everything
<MainMenu
open = {this.open}
save = {this.save}
/>
As you can see, the menu is now much smaller,
making it easier to read the code. If you need to change
the menu, start in the MainMenu.js file and tweak the
index.js file.
The Proton Native project tries to make it easy to
create desktop applications using JavaScript and React.
In contrast to Electron, it does not include the
Chromium browser to achieve this. Instead, it uses other
projects to compile to native components using Qt. Qt is
not delivered on all platforms but it uses the underlying
system, avoiding large binaries for small tasks. In short,
Proton Native is an exciting project with a bright future
but it is currently lacking some stability.When you want to package your application, you can use electron-
builder. This does not mean that we make a full Electron application
with a Chrome binary built in, it just helps us make packages to
distribute. With this system, you get features to handle all your
packaging needs. You can make packages for macOS, Windows and
of course Linux.
You also have several package formats available. For Linux it
supports snap, Appimage, DEB, pacman and RPM. On top of that you
can create for FreeBSD systems.
If you use this, make sure you have two package.json files. One
file should be for development and one for deployment. This way
you can have a small binary for production even though you have
full debugging capabilities while developing.
In the case of proton-native, you can end up with really small
application binaries thanks to the direct compiling to Qt. The ‘create-
proton-app’ adds this functionality to your project so you can simply
run npm run build to build. If you want to create a bundle use npm
run dist. You need to put all your configuration in the package.json
file. If you don’t, it will only build for your current platform.SUBSCRIBE THE EASY WAY! Subscribe now at http://bit.ly/LinuxFormat
If you have doubts about how things look, start one instance, change
the code and then run another instance from a separate terminal.You can use a new terminal and vi to try out other projects. It makes it easier to learn new
concepts to try and emulate their efforts.