10 essential things for Electron App Development

Html , css Javascript has been ruling the internet but now its time for desktop apps .Electron is an application framework which is used to develop desktop apps , with great power of Javascript and node , development is far easy in getting an app at your local machine .

Everybody had already used many times , Visual code for developing code , or as communicator SLACK , and many more to name , all are developed on ELECTRON .

Best of all i like MongoDB compass , Mongo GUI developed on electron .

I recently was working on desktop app to get images from your local folder and beautify it some colour enhancements , and some opacity change over .

On my experience I would like to share top 10 mandatory requisites for an Electron App development .

1. Download Node , latest version , npm install electron --save-dev
2. Electron package - It provides the packed electron app for further development and could be run on different os ( MAC-OX, windows , linux). USE GIT REPO
3. Automatic updates -Squirrel Updates Server is Node.js application that provides updates to an Electron application.
4. A main file for electron , it has information to make electron app configure .

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 900, height: 600});

    // and load the index.html of the app.
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
});

5. Debugging tool - use chrome extension DEVTRON for debugging your app.

6. Testing tool -Spectron it is a framework for integrations tests within an Electron application comaptible with all javascript testing library . Releases app as a whole for testing and electron Api’s and chromium enviornment to be tested against it .

7. Angular - if application has some kind of forms or interaction from user , use angular forms .

8. Native menus & notifications- creating the application menu in the main process with the simple template API, it would create windows navigation and other tools like close , minimise and maximise .

9. App crash- A temp for crash reports are saved locally in an application-specific temp directory folder. For a productNameXXXX, crash reports will be stored in a folder named XXXX Crashes inside the temp directory.

10. None the less , A cup of coffee to energise us for slapping on keyboard till some magic happens . Happy Coding :)