What's New in Electronjs with Nodejs

What’s new in Electronjs with Nodejs explores the new features and breaking changes of the current release version Electronjs and all the different stacks.

On November 16th, 2020, Electronjs releases version 11.0.0 which comes with great new features, fixes, and of course the scary breaking changes.

It is the official Electronjs 11.0.0 and in this release comes great features, performance optimizations, bug fixes, and of course many breaking changes.

Electron.js is known to be the go-to framework in building native desktop applications using web technologies like HTML, CSS, and JavaScript, while this seems simple because of how familiar and confident you might already be with these web technologies.

Electronjs does the hard part so you can focus more on creating something beautiful.

Electron combines three or more different stacks or technologies to make this possible. Viz:

In this article, we are going to review the different upgrades and changes that are made to the current release of Electronjs including those of the different stacks that make up an Electronjs.

Before you dive in, if you’re a backend developer or looking at delving into this career path, join other developers to receive daily articles on backend development that will boost your productivity.

Stack Changes

We are going to review the different upgrades and changes made to the different stacks that Electron uses.

V8

The newest version of chromium used by electron 11.0.0 is Chrome 86 which was released on 21st September 2020 and it comes with great features such as:

Respectful Code

The Chromium team focuses more on making the codebase of Chromium more respectful by following Google’s guidelines and commitment to racial equality by removing or replacing some insensitive terms in the project.

In as much as this feature is released alongside version 86 however, the changes are still ongoing and can be full here.

You can also learn more about what respectful code means to Google and the Chromium team here.

JavaScript

Under JavaScript, the team has made a lot of cool changes, we will go over a few of them below:

JS-Fuzzer is now Open-sourced

The mutation-based JavaScript Fuzzer which has been the cornerstone of V8 stability and security in the past is now Open Sourced.

What JS-Fuzzer does is to mutate existing cross-engine test casing with Babel AST transformations configured by mutator classes.

The reason for this change is the correctness issues detected from JS-Fuzzer when running an instance of the fuzzer in differential-testing mode.

Number.prototype.toString Speed Increased

Converting a number to a string seems like a simple task to developers but it can be a very complex operation in the general case.

A lot of things have to determine the process such as floating-point precision, scientific notation, NaNs, infinities, rounding, etc.

To improve the speed and efficiency of this operation, the Number.prototype.toString has to be converted and created with the C++ runtime function.

When working with smaller numbers, there is a Fast Path written in Torque to run the operation by Microsoft instead of calling a C++ runtime function for just that little operation.

This new addition improved the number of printing micro-benchmarks by ~75%.

The Atomic.wake function is removed

The Atomics.wake function is renamed to Atomics.notify to correspond with a spec change in v7.3 and the depreciated Atomics.wake alias is now removed.

This list is just a tip of all the improvements that come with the new Chromium 86 including the improvements made to Web Assembly.

You can get a complete list of all the features and improvements here.

Chromium

In October 2020, Google released Chrome 86 (which Electron 11.0.0 currently uses) with lots of great features and bug fixes which we are going to review.

2 of the key features introduced.

1. The File System Access API is now stable in Chrome 86
2. New origin trials for Web HID and Multi-screen Window Placement API.

File System Access API

Normally you can use the element to read a file from a disk and to save the changes you add the download to the anchor tag which will show a file picker when clicked and then saves the file.

It can be annoying sometimes because there is no way to write to the same file you have opened.

With the new File System Access API, you can call the showOpenFilePicker() which will show a file picker, then returns a filehandle that you can use to read the file.

async function getExampleFileHandle() {
  const opts = {
    types: [
    {
      description: 'Text Files Example',
       accept: {
         'text/plain': ['.txt', '.text'],
         'text/html': ['.html', '.htm'],
       },
    },
  ],
 }
return await window.showOpenFilePicker(opts)
}

To save the file to a disk is as simple as either using that filehandle that you got earlier or call showSaveFilePicker() to get a new filehandle.

async function saveExampleFile(fileHandle) {

if (!fileHandle) {

fileHandle = await window.showSaveFilePicker();

}

const writable = await fileHandle.createWritable();

await writable.write(contents);

await writable.close();

}

Before writing to the file though, Google will check for permissions and prompt the user accordingly.

Check out this article to understand even more about this new File System Access API.

Web HID

HID (Human Interface Devices) simply means takes input from humans, or give output to humans.

There are too many of these human interface devices that are too new, too old, or too uncommon to be accessible by the systems’ device drivers.

WebHID provides the solution by making it available for all of these devices to be accessible using JavaScript.

With this new development, web-based games can now make use of gamepads instead of keyboards and mouses.

butOpenHID.addEventListener('click', async (e) => {

const deviceFilter = { vendorId: 0x0fd9 };

const opts = { filters: [deviceFilter] };

const devices = await navigator.hid.requestDevice(opts);

myDevice = devices[0];

await myDevice.open();

myDevice.addEventListener('inputreport', handleInpRpt);

});

The above code sample shows a sample of how to set it up.

Multi-Screen Window Placement API

Using JavaScript to retrieve the information on your screen is easy with this function window.screen(), you will be presented with code like this:

const screen = window.screen;

console.log(screen);

// {

// availHeight: 1612,

// availLeft: 0,

// availTop: 23,

// availWidth: 3008,

// colorDepth: 24,

// orientation: {...},

// pixelDepth: 24,

// width: 3008

// }

But what if you want to retrieve the information of a multi-monitor setup? Sorry, you can’t. That is where Multi-Screen Window Placement API comes to help.

With this new feature, simply type the following code to retrieve the Information of a multi-monitor setup.

async function getPermission() {

const opt = { name: 'window-placement' };

try {

const perm = await navigator.permissions.query(opt);

return perm.state === 'granted';

} catch {

return false;

}

}

Once you set up the permission, call the getScreens() method to retrieve the Information in an array.

const screens = await window.getScreens();

console.log(screens);

// [

// {id: 0, internal: false, primary: true, left: 0, ...},

// {id: 1, internal: true, primary: false, left: 3008, ...},

// ]

There are many other cool features of Chromium that were not covered but you can get a curated list of them here.

Node.js

Version 12.x.x of Node.js comes with lots of important improvements and bug fixes.

This is a long list of commits for new features, bug fixes, and breaking changes in this version of Node.js used by Electron 11.x.x such as:

1. Introduction of AsyncLocalStorage API.
2. Addition of ECMAScriptModules flag removal.
3. REPL substring-based search is now added
4. REPL reverse-i-search was introduced.
5. Monitoring error events is now possible.

You can review a complete list you all the commits and changes here.

Take a break and subscribe to receive daily information that will boost your productivity as a Nodejs Backend Developer.

Electron 11.x.x

Now that we have reviewed the features and improvements that are added to the different stacks that the latest version of Electronjs uses

Let’s look at what improvements and features or in general, What’s new in Electronjs with Nodejs.

Highlight Features

1. New Experimental Apple Silicon (darwin arm64) builds were added, more details here.
2. New app.runningUnderRosettaTranslation property was added to detect when running under rosetta on Apple silicon, more information about it here.
3. V8 crash message and location data to crashReport parameters were introduced.
4. A small console hint to console to help debug renderer crashes is introduced.
5. Added a new system-context-menu event to allow preventing and overriding the system context menu.

Fixes

1. The issue where pageRanges was not properly honored when printing is fixed.
2. Draggable regions stop working when devtools are opened on macOS Fixed.
3. Fixed an issue whereby a corrupted async_hooks stack would crash the renderer when throwing some errors in the renderer process.
4. Fixed window.open not accepting size values with “px” at the end.

Breaking Changes

In as much as we have great additional features to Electron, there are also many breaking changes to look out for.

We are going to explore a few of them here:

Removal of the following experimental APIs: BrowserView.{destroy, fromId, fromWebContents, getAllViews} and the id property of BrowserView.

More instructions can be found here.

Updated information about these breaking changes and more future changes here.

You can also look at more information about this release that I did not cover here.

Also, the release tag can be found on GitHub here.

What’s Next?

The electron team will continue in the development and improvement of the newly introduced features or components.

However, this improvement will also include more adjustments on the Chromium, Node, and V8 engine versions used.

The team will not continue to update the version 8.x.y anymore as this year marks the end of support for it to encourage newer versions of Electron.

Conclusion

In what’s new in Electronjs with Nodejs we have learned about new features and breaking changes of the new electron 11.0.0.

We also explore the different changes that come with the different stacks used by Electronjs.

Congratulations on making it this far.

Originally published at https://masteringbackend.com on December 18, 2020.