Cross-Platform Desktop App Using ElectronJS

The advent of new technology trends has set a revolutionary change in application development. Developers around the world have the potential opportunity to explore new technology and upgrade their development cycle. Among these latest technologies, Electron JS is one of the significant wonders. Let me first introduce this incredible technology. 

Electron framework is used to develop native applications using modern technologies like JavaScript, CSS, and HTML. Moreover, this technology facilitates the developers to focus on the core applications so that Electron can take care of the hard parts. To be more specific, Electron utilizes Chromium and Node.JS so that the application can take the utmost benefits of HTML, JavaScript, and CSS. Its active community is maintained by a robust foundation called openJS, which made Electron a distinctive open-source framework. The best part of this web technology is it is a versatile platform, compatible with multiple devices of Mac, Windows, and Linux. What’s more, you can expect from a new-generation framework? 

Here is a helpful notation for the amateur developers who want to try out this technology: 

 git clone https://github.com/electron/electron-quick-start

# Go into the repository

$ cd electron-quick-start

# Install the dependencies and run

$ npm install && npm start

With Electron, you can imagine a platform where building a data-driven, cross-platform application is not rocket science. The boosting power of the NPM repository module and Bower registry are enough to meet all the requirements of the clients. If you have potential coding skills of Node.js, Angular js. and Mongo DB, you will find a lot of similarities in the syntax of Electron JS. 

For installing the Electron CLI, you need to type the following command in the terminal:

$ npm install -g electron-prebuilt

For testing the installation, type electron -h, and it should display the version of the Electron CLI.

Setting up the Project:

You can simply follow the structure below to learn the basic process: 

my-app

|- cache/

|- dist/

|- src/

|– app.js

| gulpfile.js

 where: – cache/ should be used to download the Electron binaries while developing the application. – dist/ contains the generated distribution file. – src/ contains the source code. – src/app.js is the entry point of the app. 

In the following step, you have to navigate the src/ folder in the terminal and fabricate the package.json and bower.json file for the application: 

$ npm init

$ bower init

Electron JS application models 

Different organizations profited from Electron from multiple points of view. The ideal approach to comprehend this JavaScript framework for desktop apps is to see it practically speaking. 

WebTorrent desktop application 

We all know about Torrent, either for desktop or mobile. However, the developers have introduced latest version using Electron JS. 

Nonetheless, this sort of app still feels a cycle old-fashioned and slow, this is the reason the developers at WebTorrent integrated better technology – with Electron JS as their primary developing framework. 

The outcome is WebTorrent, the principal downpour client working in the program and written in JavaScript and utilizes WebRTC for shared transport. 

With no modules, expansions, or establishments required, WebTorrent joins the client to a decentralized program-to-program network that guarantees productive record move. 

For what reason does WebTorrent utilize Electron JS? 

Electron steps right into it with the WebTorrent desktop rendition, making it as lightweight, advertisement free and open source as could be expected. Additionally, it helps the streaming and goes about as a cross-breed client that interfaces the app to all the famous BitTorrent and WebTorrent organizations. 

WordPress desktop application 

As the best CMS system, WordPress deserves a reliable desktop version with an automated setup. Electron JS has been integrated in the desktop version of WordPress which helped the users to maintain the content very easily. 

Moreover, WordPress for desktop is a new version for application development – Electron JS empowered this platform with better scalability and enhanced speed. In addition, it allows the users to precisely focus on the design and content management system without much distraction. 

For what reason does the WordPress desktop app use Electron? 

WordPress desktop application is locally hosted. Moreover, it takes negligible loading time using Electron JS framework. To empower this platform, developers have potentially integrated JavaScript and React as the primary developing code. 

Understanding the unique Process of Electron 

The electron can be categorized between two sorts of processes: 

Main Process: it refers to the point of the application, the file to be executed to run the application. Generally, these files narrate the different windows of the application and can be integrated with Electron IPC modules. 

Rendered Process: It refers to the controller of the window in the application that creates the in-built rendered Process. 

var app = require(‘app’),

    BrowserWindow = require(‘browser-window’);

When the application runs, it fires a ready-event that you can bind to. At this point, you can instantiate the primary window of the application:

var mainWindow = null;

app.on(‘ready’, function() {

    mainWindow = new BrowserWindow({

        width: 1024,

        height: 768

    });

    mainWindow.loadUrl(‘file://’ + __dirname + ‘/windows/main/main.html’);

    mainWindow.openDevTools();

});

Key points to follow:

· here, you have to create a new window with a new example of the BrowserWindow objects.

· The window contains an optional openDevTools() method that allow us to open an instance of the Chrome Dev Tools in the current window to initiate debugging.

The steps are inscribed below: 

my-app

|- src/

|– windows/

|— main/

|—- main.controller.js

|—- main.html

|—- main.view.js

… where main.controller.js contains the “server-side” logic of the application, and main.view.js contains the “client-side” logic of the application.

The main.html file is simply an HTML5 webpage, so we can simply start it like this:

<!DOCTYPE html>

<html>

<head>

    <meta charset=”utf-8″>

    <title>Password Keychain</title>

</head>

<body>

    <h1>Password Keychain</h1>

</body>

</html>

Your application should be ready to deploy. However, you need to test the final process. To automate the test, you have to move at the root of the src folders:

$ Electron.

You can also automate this process. 

Hope this tutorial is helpful to explore the latest technology and using it in the cross-platform desktop application. 

References: https://www.electronjs.org/ 

https://www.toptal.com/javascript/electron-cross-platform-desktop-apps-easy

https://www.google.com/search?q=Cross-Platform+Desktop+App+Using+ElectronJS&oq=Cross-Platform+Desktop+App+Using+ElectronJS&aqs=chrome..69i57j0i22i30l5.2275j0j7&sourceid=chrome&ie=UTF-8

https://www.digitalocean.com/community/tutorials/how-to-create-your-first-cross-platform-desktop-application-with-electron-on-macos

https://www.esparkinfo.com/electron-app-examples.html

To know more about iView Labs, kindly log on to our website www.iviewlabs.com and to get in touch with us with your queries and needs just write us an email on info@iviewlabs.com and sales@iviewlabs.com. Download the latest portfolio to see our work.